Coffee Stained

Designer's Comments

Look carefully for specific instructions

--PLEASE DON'T REMOVE LAYOUT CREDITS-- ^_^

More layouts available at http://cynthia.paper-cranes.net

This layout has been tested in Google Chrome, Mozilla Firefox, and Internet Explorer, with a screen resolution of 1600x900. It is also coded in Valid HTML and CSS.

Credits:

Brushes:
http://contagiouz.org/Hauptordner/Layout/ (Contagiouz)

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
<head> 
<title> | Coffee Stained | m o r n i n g    style </title>

<style type="text/css">
body { background: url("http://cbimg6.com/layouts/10/07/36407ac.png") repeat; text-align: center; margin: 0 auto; padding: 0; font-family: "century gothic", arial; font-size: 11px; color: #A7A7A7; }
#container { margin: 0 auto; width: 800px; height: 100%; }
#header  { width: 100%; background: url("http://cbimg6.com/layouts/10/07/36407ad.png") repeat-x; height: 370px; text-align: center; margin: 0 auto; }
.header { width: 800px; height: 370px; background: url("http://cbimg6.com/layouts/10/07/36407ae.png") no-repeat; margin: 0 auto; padding: 0; text-align: center; }
.featured { position: relative; width: 715px; height: 75px; top: 50px; left: 49px; float: left; text-align: center; overflow: auto; }
.title { width: 620px; height: 103px; position: relative; top: 25px; left: 74px; float: left; text-align: right; font-family: century, georgia; text-transform: lowercase; font-size: 80px; font-weight: normal; }
#back { float: left; width: 800px; height: 100%; background: url("http://cbimg6.com/layouts/10/07/36407af.png") repeat-y; margin: 0; padding: 0 0 100px 0; }
#content { float: left; left: 49px; width: 705px; padding: 7px; margin: 0; position: relative; text-align: justify; }
#footer { text-align: right; width: 100%; height: 115px; clear: both; background: url("http://cbimg6.com/layouts/10/07/36407ag.png") repeat-x; padding: 0; margin: 0; text-align: center; float: left; color: #000000; }
.footer { float: left; padding: 20px; height: 75px; margin: 0; text-align: justify; }
.credit { float: right; width: 419px; height: 115px; padding: 0; margin: 0; }
h1 { font-family: georgia, century; font-size: 40px; color: #CDCDCD; font-weight: normal; padding: 0; margin: 5px; border-bottom: 1px solid #6DCFF6; }
h1:first-letter { font-size: 50px; color: #6DCFF6; }
h2 { background: url("http://cbimg6.com/layouts/10/07/36407ah.png"); font-family: georgia, century; font-weight: normal; font-size: 20px; color: #17393E; text-align: center; }
blockquote { background: #8FBEC9; padding: 15px; border-bottom: 20px solid #303030; color: #ffffff; }
b { color: #315E65; }
i { color: #76A8B2; }
u { color: #76A8B2; border-bottom: 1px dotted #315E65; }
s { color: #BDECF5; }
a:link, a:visited, a:active { text-decoration: none; color: #47727B; }
a:hover { color: #bdecf5; }
input, textarea, code, select { text-align: justify; background: url("http://cbimg6.com/layouts/10/07/36407ah.png"); color: #17393e; border: 2px dotted #17393e; margin: 0; padding: 5px; font-family: "century gothic", arial; font-size: 11px; }
</style>
</head> 
 
<body> 
<div id="header"> 
<div class="header">

<div class="title">this<font color="#6DCFF6">is</font>the<font color="#6DCFF6">title</font></div>

<div class="featured">                              
featured featured featured featured featured featured featured featured featured featured featured featured                                              
featured featured featured featured featured featured featured featured featured featured featured featured                                              
featured featured featured featured featured featured featured featured featured featured featured featured                                              
featured featured featured featured featured featured featured featured featured featured featured featured                                              
featured featured featured featured featured featured featured featured featured featured featured featured                                              
featured featured featured featured featured featured featured featured featured featured featured featured                                              
</div>

</div> 
</div> 
 
<div id="container"> 
 
<div id="back"> 
<div id="content">

<h1>Lorem Ipsum</h1> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis ligula eu velit luctus vestibulum vitae nec diam. Nunc laoreet massa nec eros mattis facilisis. Praesent felis ante, dictum et tempus id, porttitor quis lacus. Cras gravida pretium arcu at adipiscing. Nam at blandit diam. Mauris nunc ante, tristique vel pulvinar et, commodo eget libero. Sed pellentesque felis ut ligula imperdiet vitae interdum felis varius. Sed lacus lectus, pellentesque lacinia tempus et, imperdiet porta ligula. Integer non velit justo, sed vulputate nulla. Ut et lacus ut felis dapibus blandit. Curabitur leo urna, lobortis molestie tincidunt non, commodo dictum tellus. Mauris laoreet purus ut dui commodo posuere. Curabitur id velit in arcu ullamcorper semper eu sed purus. Phasellus pellentesque metus sit amet ante eleifend quis porta mauris vestibulum. Nunc iaculis bibendum ligula. Nam congue ultrices imperdiet. Etiam in cursus massa. Integer ac tortor ligula, tempus posuere sapien. Morbi fermentum lacus ac velit porttitor vulputate vitae vitae eros.
<h2>Lorem Ipsum</h2> 
<blockquote> 
Cras accumsan iaculis semper. Vestibulum ante ipsum primis in faucibus <b>orci luctus et ultrices</b> posuere cubilia Curae; Pellentesque sit amet orci felis. Curabitur quis <i>diam id tortor scelerisque</i> vulputate quis sed mi. Aenean vel mi in mi convallis pellentesque id at odio. <u>Vivamus et ante risus</u>. Curabitur tempor sapien in risus facilisis at semper tellus accumsan. Nam sollicitudin dapibus metus, at faucibus <s>ipsum hendrerit vel</s>. Aliquam erat volutpat. In elit metus, consectetur et vestibulum vel, elementum sed ipsum. Vivamus cursus, metus <a href="#">id tempus dignissim</a>, metus lorem scelerisque nunc, eget posuere ipsum justo in quam. Ut convallis iaculis adipiscing. Proin vel auctor ante.
</blockquote> 
 
<h2>Miscellaneous</h2> 
<b>bold</b> <i>italic</i> <u>underline</u> <s>strikethrough</s> <a href="#">link</a>  <Br><Br> 
<input><br><br> 
<textarea cols="40" rows="5">textarea goes here</textarea><Br><br> 
<code>code goes here</code>

</div> 
</div> 
 
</div> 
 
<div id="footer"> 
<div class="footer">

All content copyright &copy; <b>You</b> 2010 unless otherwise stated.<br>

Layout coded and designed by <a href="http://cynthia.paper-cranes.net" title="Cynthia">Cynthia</a>.<br>
<a href="http://validator.w3.org/check?uri=referer">Valid HTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></div>
<div class="credit"><a href="http://cynthia.paper-cranes.net"><img src="http://cbimg6.com/layouts/10/07/36407ab.png" border="0" title="layout by fairybliss" alt="layout by fairybliss"></a></div> 
</div> 
 
</body> 
 </html>

Layout Comments

Showing latest 7 of 7 comments

http://iohs-lrc.webs. com/

By LadyLBlack on Aug 17, 2010 1:32 am

So adorable,love the color combos :D
GOOD JOB!~

By Snaily on Jul 27, 2010 9:14 pm

fucking beautiful! however i don't think the "comment box" is necessary it makes it more [myspace - y] And the rollovers would look divine if it had a subtle swirly line [or squiggly] one the crosses over it just so it would make it POP.

By koobecaf on Jul 26, 2010 8:41 pm

Way cute :)

By x3Simplicity on Jul 26, 2010 7:51 pm

Neat beans. I'm not getting the title since it's not brown, but nice design nevertheless. :D

By schizo on Jul 26, 2010 3:26 pm

I love this new layout for sure

By LadyLBlack on Jul 26, 2010 2:38 am

I like this one! looks great!

By Butterface89 on Jul 26, 2010 2:14 am

Layout Details

Designer	cynthiachioma
Submitted on	Jul 17, 2010
Page views	10,579
Favorites	39
Comments	7
Reviewer	Christy
Approved on	Jul 26, 2010

Coffee Stained

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates