Content Starts Here

Hiya there! Welcome to this 2-columned layout template! ^_^ It looks more greyer and different than my other layout templates, but that doesn't mean that it's still a template! Feel free to edit in whatever way you'd like! I actually really like this layout template. It's pretty simple to edit, and I've tried to make it even more simpler by adding some comments inside the HTML of this layout. They're not visible to the visitors, but are just there to help you with editing this layout~ Basic HTML knowledge is a great, but if you don't know any HTML, you may find this layout a little confusing ^^'; This 2 columned layout features a 640px width by 200px height banner (although the height can be changed~), a content and navigation menu bar areas. It also has a disclaimer/footer type thing near the bottom where you can hold all your site's copyright stuff, etc. Please leave the credits to Kasumi in the disclaimer, although you may move it to a Credits/Thanks page if you want. ^_^

Help?

If you need help in ANY way at all with the layout, I'm ALWAYS happy to help you! Once I was a newbie at HTML, and thanks to all the friendly people helping me in HTML, has inspired me to help others as well! Don't be scared to ask for help, I won't bite! xD I'll try my best to help you! Please allow for up to 3-4 days to get a responce~ ^^

Email: wishjiirachii@gmail.com

Download?

To download this layout template, please right-click somewhere in the text-box below, and choose Select All. Then right-click again, but this time choose Copy. Now paste it (by right-clicking and clicking Paste) in a Notepad document to edit, or straight into a new file at your website host. (Freewebs, 000Webhost, etc)

<html> <head>  <title>Layout Template #7</title>  <style> /*******************************************************/ /* The CSS Stylesheets start here. This is where all the pretty and awesome stuff in your layout is controlled, such as the fonts, colors, images, etc. ^^ Please follow and read these comments I have left you thouroughly */ /*******************************************************/ /* Here, this section below controls the link colors in your layout. Just replace the 696969 part with whatever hex color code you'd like. You can find some at this website: www.html-color-codes.info */ A:link, A:visited, A:active { text-decoration: none; color: #696969; } /*******************************************************/ /* This section controls what your links look like when a mouse hovers/rollovers them. You don't have to change anything except the 696969 part. Just replace it with a hex color code of your choice. */ A:hover { text-decoration: none; color: #696969; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: underline; } /*******************************************************/ /* You see the FFFFFF below? Well FFFFFF in hex color code language basically translates to the color white. Depending on what hex color code you put there, you can change the white background to a different color. */ body { background-color: #FFFFFF; } /*******************************************************/ /* Not too much to edit here, except that you can change the font used in this layout! Oh! and you can change the color of the text as well ;) To change th font, you see where it says: font-family: ? Well just replace the font names already there eg. Courier New, courier, etc. with the font name that you'd like to use on your layout. Eg. Arial. If the font has more than one word in the name, eg. Courier New, then put " and " marks around it. If it's only one word... eg. Verdana, then you can take off those quote marks. To change the color of the text, replace 000000 (on the 'color:' attribute below) with your desired color hex code. 000000 in hex color code means the color black. */ #container { background-color: #f9f9f9; font-family: "Courier New"; font-size: 11px; color: #000000; width: 640px; margin-left: auto; margin-right: auto; } /*******************************************************/ /* Here is a very important part of your layout... the banner! you see the text below in-between the (' and ') brackets: BANNER DIRECT LINK HERE? Well just replace it with the direct link to your banner image! You can get a direct link by uploading your banner image to www.tinypic.com , and copying the direct link to paste in below. */ #banner { background-image: url('BANNER DIRECT LINK HERE'); background-color: #D5D5D5; border-bottom: 3px double black; height: 200px; text-align: center; float: left; width: 640px; clear: both; } /*******************************************************/ /* Nothing much to edit here, but you see the EDEDED below? Yep, you guessed it... its another hex color code. You can change the color of the menu sidebar thing on your layout by replacing EDEDED with another hex color code. */ #sidebar { float: left; width: 197px; border-right: 3px double; background-color: #EDEDED; clear: left; } /*******************************************************/ /* You can replace the f9f9f9 below with another hex color code. This'll change the background-color of the content area of your layout */ #content { float: left; background-color: #f9f9f9; text-align: justify; width: 440px; } /*******************************************************/ /* Nothing to edit here... except the D5D5D5 hex color code for the background-color of your disclaimer/footer area. */ #footer { float: left; clear: both; text-align: center; border-top: 3px double; background-color: #D5D5D5; width: 640px; } /*******************************************************/ /* These sections below control what your headings will look like. There's really no need to change them unless you know what you're doing. ^_^ */ h1 { border-bottom: 2px solid; font-size: 18px; font-variant: small-caps; font-family: Arial, sans-serif; } h2 { font-size: 13px; text-align: center; border-left: 10px solid; border-right: 10px solid; font-family: verdana; border-bottom: 1px dotted; } /* You can change the D5D5D5 below though ^_^'; */ h3 { background-color: #D5D5D5; text-align: right; font-family: Arial, sans-serif; } /*******************************************************/ /* Nothing to edit here ^^ */ b { font-family: arial, sans-serif; font-variant: small-caps; border-bottom: 1px dotted; } /*******************************************************/ /* The CSS stylesheets end here!!! */ </style> </head> <body> <div id = "container"> <div id = "banner"> </div> <div id = "sidebar">  <h1>Left Navigation</h1> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <h3>Header</h3> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <h3>Header</h3> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <h3>Header</h3> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <h3>Affiliates</h3> <a href="#">Affiliate 1</a><br> <a href="#">Affiliate 2</a><br> <a href="#">Affiliate 3</a><br> <a href="#">Affiliate 4</a><br> <a href="#">Affiliate 5</a><br> <a href="#">Affiliate 6</a><br>  </div> <div id = "content">  PUT ALL YOUR CONTENT HERE  </div> <div id = "footer">  Site is © to <b>Your Name</b>. Layout Template by <a href="http://kasumi.netii.net" target="_blank">Kasumi</a>.  </div>  </div> </body> </html>

-By Wishjirachi