Appropriate.

Designer's Comments

Look carefully for specific instructions

HTML Template with internal stylesheet.
Please keep credit to my site if using.

Layout Code

Copy and paste to Template HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <TITLE>Your Website Title</TITLE>
<style>
body {
font: georgia 9px;
}

a {
text-decoration: none;
color: #ccc;
}

a hover {
text-decoration: underline;
}

.container {
width: 100%
margin: 0 auto;
}

.sidebar {
position:fixed;
height: 100%;
background: #000000 url('http://cbimg6.com/layouts/11/11/36702aa.png') no-repeat;
color: #ccc;
width: 400px;
margin-top: -30px;
margin-left: -10px;
margin-bottom: -10px;
border-right: 10px solid #000;
border-left: 10px solid #000;
}

.title {
font: 70px georgia;
text-align: center;
font-style: italic;
}

.sidebox {
color: #000;
background: #ccc;
opacity: 0.6;
width: 200px;
padding: 5px;
font: 10px georgia;
-moz-border-radius: 15px;
border-radius: 15px;
}

.sidecase {
margin-top: 400px;
margin-left: 7px;
color: #000;
}

.littlelinks a {
color: #fff;
text-decoration: none;
font: 10px georgia;
}

.sidebox a {
color: #000;
font: 20px georgia;
font-style: italic;
text-decoration: none;
}

.sidebox a:hover {
color: #f6f6f6;
}

.content {
position: right;
margin-left: 420px;
margin-top: 30px;
color: #000;
font: 11px georgia;
}

h1 {
font: 30px georgia;
font-style: italic;
margin-bottom: 5px;
text-align: center;
border-bottom: dotted 1px #000;
}

h2 {
font: 20px georgia;
font-style: italic;
margin-bottom: 5px;
text-spacing:15px;
}

.footer {
text-align: center;
font: 20px georgia;
font-style: italic;
}

blockquote {
border-left: 8px solid #000;
padding: 5px;
}

textarea {
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
width: 90%;
}

.center {
text-align: center;
}

.firstletter {
font: 19px book antiqua;
color: #ccc;
}

</style>
  </HEAD>
  <BODY>
<div class="container">
<div class="sidebar"><div class="title">your title.</div>

<div class="sidecase">
<div class="sidebox">
Hello, my name is Christine. I like to make templates in my free time.<Br>
<div class="center">
<a href="#">Click</a> •
<a href="#">These</a> •
<a href="#">Links</a> •
<a href="#">Maybe</a> •
<a href="#">These</a> •
<a href="#">Too</a>
</div>
</div>
<div class="littlelinks">&nbsp; 
<a href="#">once.</a> <a href="#">doce.</a> <a href="#">trece.</a> <a href="#">catorce.</a> <a href="#">quince.</a>
<a href="http://bear.hugs.nu">layout.</a>
</div>
</div>
</div>
<div class="content">
<h1>Header 1</h1>

<h2>&raquo; About</h2>
<span class="firstletter">S</span>imple theme that I made in a short amount of time. It's very basic, and can have many customisations made to it (Like change background image, etc.) I used a lot of divs though, for some reason, so I apologise in advance. Please keep link intact.
<BR><BR>
Quis tristique mus hac velit, cras cursus etiam elit lacus, a rhoncus! Phasellus natoque? In adipiscing? Odio eu! Mattis amet integer nisi augue pellentesque vut porta a vut nascetur turpis, porttitor? Et aenean? Lacus amet duis ut scelerisque porta sociis, enim nisi ultrices enim placerat rhoncus. Nec amet, purus elementum augue, elementum amet a facilisis nunc, pid vel tempor scelerisque! Ridiculus massa mid. Sociis augue magna, ac porta turpis, enim adipiscing ac phasellus velit et porta odio sed turpis augue, mauris pulvinar duis porttitor, cursus amet, sociis eros, dis proin, magnis mus rhoncus est vut dignissim, turpis purus aenean? Facilisis egestas nec, odio ut, pid, mattis, nunc ut diam, adipiscing, in. Dictumst quis purus? Natoque natoque, turpis mauris tincidunt. Aliquet, odio porta, proin facilisis, ac phasellus purus aliquet, est ac porttitor adipiscing montes aliquet elementum, ac, magna eros ac adipiscing phasellus! Urna tortor phasellus, velit elit mus ac! Pid montes et lundium? A tristique tristique eros, rhoncus mauris tortor, urna magnis magna, lundium in, amet lundium rhoncus integer. Mus integer lacus quis tincidunt ut lundium rhoncus cras pellentesque odio integer, sed turpis, amet dictumst massa lorem nunc pid augue sed urna pulvinar! Hac turpis nunc, purus? Ultrices ut in nunc.
<BR>

<div class="center">
<textarea>This is a textarea. Fill it with codes or text. </textarea>
</div>

<h2>&raquo; Header 2</h2>
<span class="firstletter">U</span>ltricies auctor tempor, arcu sociis amet eros, natoque et. Vel enim turpis adipiscing tortor mus porta, et lundium lacus adipiscing placerat! Elementum ac, scelerisque. Penatibus, duis magna, urna dictumst turpis, non dignissim dignissim scelerisque parturient mus cras eu scelerisque? Sed purus magna et, turpis phasellus, sit urna nunc phasellus lacus eros? Nisi elementum porttitor sit adipiscing urna, porta, et, est odio auctor ac? Ac a. Mattis duis, nunc dolor lundium pellentesque elementum duis nec urna mattis et nunc. Sit? Cursus enim, sagittis natoque scelerisque, ac, duis a, lundium dis ultrices odio, ac dictumst ridiculus parturient habitasse sit urna in. A? Dis etiam et platea tortor, vut elementum! Elementum cursus? Enim massa. Dis ultricies, habitasse? Facilisis porttitor scelerisque nisi ridiculus arcu, vut quis, sed purus tincidunt urna magna placerat, penatibus! Porta mattis tortor cras, ac parturient? Est egestas ut natoque nunc odio dignissim mid elit? In magna cum? Tincidunt mus placerat lorem, aenean porta? Ac non ac! Ac, cras magna. Sagittis platea? Cum ut lacus velit dignissim elit amet dictumst turpis placerat, nec elementum platea mattis. Auctor porttitor, pid mauris, porta nisi mattis velit! Nunc, ultrices! Phasellus nec nunc ut! Quis, dictumst nunc sed! Egestas magnis sed enim ut porttitor.

<blockquote>Turpis. Sagittis ac vut! Duis ultricies elit enim, scelerisque etiam porta, aliquet aliquet? Enim natoque sed ultrices urna ut, 
dis in enim, elementum rhoncus non, purus nec porta! In ultrices egestas, magna elementum tortor, tincidunt, arcu tincidunt integer</blockquote>

urna, aenean et nec proin, integer, augue mauris non, pulvinar parturient? Integer eros, porttitor. Elementum, tincidunt tristique, ultrices integer magna mid, ultrices ut. Facilisis cursus sit! Urna ut penatibus dapibus pulvinar diam vel urna porta duis ultrices turpis! Augue pulvinar pulvinar aliquam a porta dapibus sed urna. Amet est. Sagittis. Et facilisis, pulvinar? A parturient etiam proin? Penatibus ac. Dapibus magna porttitor odio. Pulvinar. Hac integer magna? Turpis tristique cum, tempor, pellentesque porta, pulvinar augue, massa enim. Adipiscing eu magna elit et et! Placerat lundium. Magnis, velit nisi sagittis, sit! Et lacus nec! Platea vel. Dapibus dictumst? Penatibus aenean ac enim montes odio ac et lundium habitasse, elementum sed odio integer aliquam urna elementum. Tincidunt mattis odio elementum purus tempor velit, tincidunt, nisi lacus rhoncus non sed eros duis elit scelerisque amet non ultricies magna rhoncus elementum, elementum tortor nec, egestas diam! Nunc mauris quis et. Urna urna lectus? Adipiscing ut augue eros, lacus tristique! Placerat odio auctor pid est penatibus.

Porttitor amet et mus ac nunc massa, velit aliquet duis! Arcu! Lorem pulvinar! Magna, ut habitasse mattis porttitor penatibus tempor lundium odio purus, urna turpis ac odio amet natoque! Dolor in urna nisi sociis ut. Tortor etiam lundium porta, eros facilisis. Risus duis parturient, sagittis, hac scelerisque parturient sit! Sit? Ut quis ac, amet hac, non lundium turpis tincidunt, sed elementum magna a, scelerisque est et diam lacus enim. Cum rhoncus? Dictumst tincidunt sociis! Urna, turpis rhoncus placerat tincidunt sociis pulvinar a eu! Lacus parturient, pellentesque mid! Dolor in, augue dapibus vel pulvinar sed ac rhoncus natoque nisi. Magnis? Cursus augue, ac pulvinar, tincidunt turpis augue et porta ultricies nascetur placerat phasellus odio, et cras, cras non amet elementum. Sed pid ridiculus augue, cursus, ut, nisi rhoncus, urna, augue ultrices? Magna, integer tempor et? Urna. Sociis mauris duis magnis aliquam montes pulvinar aliquam, scelerisque? Amet lundium! Platea integer nisi? Porttitor porta nunc duis vel placerat turpis magna sociis porttitor. Quis aliquet sociis magnis adipiscing. Nisi aenean, sagittis, eu pid lacus scelerisque in purus mattis nunc amet placerat et elementum? Magna nisi odio! A a rhoncus amet sed odio. Tempor porttitor mauris enim? Tempor mus vel amet cras. Scelerisque in.

Phasellus vel, tincidunt turpis a scelerisque, magnis in lacus magna penatibus ridiculus! Augue elementum nisi ultricies porta! Tempor platea, lectus sed nunc magna in, augue amet sociis facilisis lundium ridiculus urna tortor lorem! Ridiculus pulvinar dictumst turpis sed ac. Lundium? Quis porta diam nunc sagittis porta quis ut ultrices? Duis mus elementum placerat nunc porttitor porta ut tempor enim, ut cras, aenean ac, a a, scelerisque habitasse urna placerat! A, turpis? Enim montes odio auctor risus sit lundium hac! Risus tempor adipiscing sit sed vel adipiscing magna massa nascetur, placerat odio integer nec adipiscing, a, et penatibus integer in et facilisis nisi! Augue dis et, lectus mid. Dictumst massa, porta, porta! Turpis facilisis et mauris elementum diam, pid sit, tristique dictumst? Montes mus! Turpis a lorem enim porta nec nunc integer nascetur pulvinar sit aenean, a natoque integer tortor vel aliquet, nisi est! Turpis integer. Rhoncus et. Lacus ac sed ultricies tincidunt velit ac elementum urna sagittis aliquam odio, ultricies adipiscing magnis adipiscing quis in hac dapibus amet! Pid magna? Mattis. Tincidunt ac tempor, tincidunt elit risus in purus! Et ac sed magna, pulvinar massa, urna? In augue dis nunc magna dapibus, ridiculus, ridiculus pulvinar ultrices est pulvinar ridiculus.

<div class="footer">Backwards >Fowards</div></div>
</div>

</div>
 </BODY>
</HTML>

Layout Comments

Showing latest 8 of 8 comments

Hii
Nilesh shah

By NileshShah on Dec 9, 2011 9:58 am

Layout Details

Designer	baiorin
Submitted on	Nov 9, 2011
Page views	16,596
Favorites	14
Comments	8
Reviewer	manny-the-dino
Approved on	Nov 18, 2011

Appropriate.

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates