Sweet as Sugar.

Designer's Comments

Look carefully for specific instructions

I also have this for Wordpress: click here!

I know I've been overly fond of simplicity lately, but all my other simple website layouts have been popular so why not? This one's on the edge of being too cutesy for my taste (yes, it's possible). I'm happy about how clean it looks, though.

-Gabi
Resource Site l Blog/Portfolio

Layout Code

Copy and paste to Template HTML

Help

<html>
<head>
<title>Sweet as Sugar</title>
<style type="text/css">
body{
background-image:url(http://cbimg6.com/layouts/10/07/36366ab.gif);
background-repeat:repeat;
background-color:#e97d94;
font-family:"lucida sans unicode";
font-size:11px;
line-height:16px;
text-align:justify;
}

#container{
position:absolute;
left:50%;
margin-left:-392px;
top:0px;
width:775px;
background-image:url(http://cbimg6.com/layouts/10/07/36366ac.png);
background-repeat:repeat;
overflow:auto;
}

.header{
margin-top:40px;
text-align:center;
}

.navigation{
width:690px;
padding:5px;
margin-left:40px;
margin-top:40px;
margin-bottom:20px;
text-align:center;
}

.title{
font-family:"century gothic";
font-size:23px;
font-weight:bold;
color:#785343;
display:block;
text-align:left;
margin-left:140px;
margin-top:5px;}

.sidebar{
float:left;
margin-left:40px;
width:200px;
}

.main{
float:right;
margin-right:50px;
_margin-right:30px;
width:460px;
}

a.nav, a.nav:active, a.nav:visited, a.nav:link{
color:#ea8f88;
text-decoration:none;
font-family:"century gothic";
font-weight:bold;
font-size:17px;
padding-right:70px;
}

a.nav:hover{
color:#785343;
text-decoration:none;
font-family:"century gothic";
font-weight:bold;
font-size:17px;
padding-right:70px;
}

a.nav2, a.nav2:active, a.nav2:visited, a.nav2:link{
color:#ea8f88;
text-decoration:none;
font-family:"century gothic";
font-weight:bold;
font-size:17px;
}

a.nav2:hover{
color:#785343;
text-decoration:none;
font-family:"century gothic";
font-weight:bold;
font-size:17px;
}

a, a:active, a:visited, a:link{
color:#ea8f88;
text-decoration:none;
}

a:hover{
color:#89695b;
text-decoration:none;
}

b, strong{
color:#ea8f88;
text-decoration:none;
font-family:"century gothic";
font-size:11px;
}

i, em{
color:#89695b;
}

u{
border-bottom:1px dotted #ea8f88;
text-decoration:none;
}

h1{
font-family:"century gothic";
font-size:22px;
text-align:left;
letter-spacing:0px;
color:#785343;
border-bottom:2px dotted #ea8f88;
padding-top:10px;
margin-bottom:5px;
padding-bottom:4px;
}

</style>
</head>

<body>

<div class="header">
<img src="http://cbimg6.com/layouts/10/07/36366aa.gif">
<span class="title">Your Website Name Here</span>
</div>

<div class="sidebar">
<h1>About Me</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper aliquet venenatis. Aliquam erat volutpat. Nam et suscipit velit. Vestibulum placerat, felis quis dictum interdum, neque est pulvinar neque, at eleifend purus mauris at sapien.

<h1>Links</h1>
<a href="LINK HERE">Link</a><br>
<a href="LINK HERE">Link</a><br>
<a href="LINK HERE">Link</a><br>
<a href="LINK HERE">Link</a><br>
<a href="LINK HERE">Link</a><br>

<h1>Other</h1>
Morbi facilisis, orci congue volutpat lacinia, nisi sapien vestibulum sem, a volutpat justo eros eget neque. Curabitur posuere nunc eget nisl tincidunt eget dapibus massa sagittis. Etiam porta congue purus vitae mollis. Maecenas porttitor, lacus in commodo elementum, ligula lorem sodales lacus, nec adipiscing risus elit non magna. Ut id tortor quis nulla malesuada tristique. Maecenas eget molestie lorem. Curabitur non nibh nunc, sit amet suscipit neque. Nam vitae justo pellentesque eros eleifend porttitor.

<h1>Credits</h1>
Layout by <a href="http://www.atomicaffliction.com" target="new">Atomic Affliction</a>.
</div>

<div class="main">
<h1>Sweet as Sugar</h1>
I would recommend filling up the sidebar or the content area so that it reaches the bottom of the page. If you don't the white column will stop short, and that doesn't look as clean as it does when it reaches the bottom. You can easily edit the background and header images if you have some experience with HTML.<br><br>

<center>
<b>Bold.</b> <i>Italic.</i> <u>Underlined.</u>
</center><br><br>

All I ask is that you leave the credit link on the layout. You may move or change it if you're not happy with the current placement, just don't remove it.<br><br>

Go nuts.

<h1>Filler</h1>
Sed dignissim tempus bibendum. Praesent lobortis risus sed nisi egestas scelerisque. Integer in enim purus. In eget diam lacus. In posuere enim nec risus auctor sollicitudin gravida ligula condimentum. Phasellus accumsan dui iaculis magna vestibulum congue. Suspendisse et ligula justo, at vulputate neque. Nunc imperdiet nulla sit amet velit vulputate porttitor. Vestibulum nulla nunc, scelerisque et vehicula ut, placerat ut justo. Sed et justo id ante dignissim tempor ac non velit. Nulla pellentesque tellus porta nibh porta condimentum. Fusce eu dolor ante. Nam ut purus ligula, consectetur porta est. In est dolor, congue eu imperdiet vel, feugiat a elit. <br><br>

Fusce ut risus ut neque semper dictum vitae id augue. Cras consectetur varius nunc. Curabitur ipsum ante, varius ac mattis viverra, malesuada ac elit. Pellentesque imperdiet nisl a eros pellentesque luctus. Suspendisse sit amet ullamcorper leo. Donec sagittis sodales bibendum. Integer quis tellus dolor, at tristique neque. Maecenas libero quam, ullamcorper id scelerisque id, molestie nec nisi. Vivamus vulputate bibendum nunc congue condimentum. Proin bibendum dolor fermentum purus gravida vitae vehicula neque vestibulum. In hac habitasse platea dictumst. Duis laoreet libero at lectus ultrices quis lacinia nisl placerat. Vestibulum blandit risus vitae orci tincidunt vel venenatis justo commodo. Sed eu lorem ante. Nulla facilisi. Proin pellentesque sagittis cursus.

</div>

</body>
</html>

Layout Comments

Showing latest 8 of 8 comments

love that template!! But I don't know how to use it. I copy everything as told but my entries+comments are not shown up. Plz help me modify&editing. =(
I really want to use that layout of yours!

Contact me at J.Riceball@gmail.com
Thx a lot

By Reiskeks on Dec 8, 2010 9:17 am