Too Sexy for Sleep

Designer's Comments

Look carefully for specific instructions

Remember to separate the CSS from the layout!
Please read the comments within the template preview if you're interested in using this! Danke schön!
The only credit is in the footer, please don't remove it.

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>heart of pandora dot com</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

body {background: #fff url(http://cbimg6.com/layouts/09/07/35089aa.png) top right scroll no-repeat;}

#xtra {position: absolute; top: 35px; right: 35px; width: 225px; height: 125px; overflow: auto;}
		#xtra p {text-align: center; color: #ccc; font-family: "Times New Roman"; font-size: 11px; line-height: 200%; margin: 0 0 10px 0;}
		#xtra a {color: #bbb; font-size: 9px; font-weight: bold; text-transform: none;}
			#xtra a:hover {color: #aaa;}

#wrap {float: right; margin: 465px 10px 0 0; width: 715px; height: auto;}
		#main {width: 535px; float: right;}
			#main h1, #main h1 a {text-align: left; font-size: 25px; color: #aaa; font-style: italic; display: block; text-transform: lowercase; font-weight: bold; line-height: 150%; margin: 0; padding: 0;}
				#main h1 a:hover {color: #999;}
			#main .meta {color: #ccc; font-family: small fonts; font-size: 8px; text-transform: uppercase; text-align: left; line-height: 80%; margin: -5px 0 10px 10px;}
			#main p {text-align: justify; color: #666; font-family: "Times New Roman", sans-serif, serif; font-size: 12px; line-height: 200%; margin: 0 0 1em 0;}
			#main ul, #main li {text-align: justify; color: #888; font-family: "Times New Roman", sans-serif, serif; font-size: 12px; line-height: 200%;}
			#main b, #main i, #main u, #main big, #main small {color: #aaa;}
			#main blockquote {width: 85%; margin: 0 auto 10px auto; padding: 10px 20px 10px 20px; background-color: #f6f6f6; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: justify; color: #666; font-family: "Times New Roman", sans-serif, serif; font-size: 12px; line-height: 200%;}
				#main blockquote p {margin: 0; padding: 0;}

.cmnt {font-size: 12px; color: #bbb; text-align: right; font-weight: bold; margin: 0 20px 0 0;}
		.post {margin: 0 0 30px 0;}
	
		#side {width: 160px; float: left; margin: -120px 0 0 0;}
			#side a.nav, #side a.nav:visited {text-align: right; font-size: 16px; color: #aaa; font-style: italic; display: block; text-transform: lowercase; font-weight: bold; line-height: 200%;}
				#side a.nav:hover, #side a.nav:active {color: #999;}
			#side h1 {text-align: right; font-size: 16px; color: #666; font-style: italic; display: block; text-transform: lowercase; font-weight: bold; line-height: 200%; margin: 0; padding: 0;}
			#side p {text-align: justify; color: #999; font-family: "Times New Roman"; font-size: 11px; line-height: 200%; margin: 0 0 10px 0;}
			#side b, #side i, #side u, #side big, #side small {color: #666;}

#footer {clear: both; padding: 10px 0 25px 0;}
			#footer p a, #footer p a:visited {color: #aaa; font-size: 9px; text-transform: uppercase; letter-spacing: 1px;}
				#footer p a:hover, #footer p a:active {color: #bbb;}
			#footer p {color: #bbb; text-align: center; text-transform: uppercase; font-size: 10px; letter-spacing: 1px;}

a, a:link, a:visited {letter-spacing: 0px; color: #aaa; font-size: 9px; letter-spacing: 1px; text-decoration: none; font-weight: bold; text-transform: uppercase;}
	a:hover {color: #888;}

</style>
</head>

<body>
<div id="xtra">
	<p>Don't put too much in here or it'll scroll!<br />I suggest sticking to one <a href="http://twitter.com/">Tweet</a> or <a href="http://jaiku.com">Jaiku</a>.<br />Four lines maximum and keep in mind about cross browser /platform testing!</p>
</div>
<div id="wrap">
	<div id="side">
		<h1>watch me navigate</h1>
		<p>	<a href="#" class="nav">home</a>
			<a href="#" class="nav">about</a>
			<a href="#" class="nav">contact</a>
			<a href="#" class="nav">archives</a>
			<a href="#" class="nav">feed</a>
		</p>

<h1>ha ha ha HA HA!</h1>
		<p>Suspendisse mi ante, pellentesque non tristique vitae, porta ac ligula. Praesent enim nisl, molestie convallis mollis nec, hendrerit in neque. Suspendisse blandit lobortis molestie. Nunc semper urna at turpis semper quis porttitor erat suscipit. Sed ac nisi lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam turpis ipsum, laoreet quis rhoncus eu, pellentesque ut magna. Nulla non mi eget tortor tempus vulputate. Nam eget nisi nulla, ac viverra metus. Nullam sodales elementum lacus, eu tincidunt velit eleifend ut. Sed semper tempor dolor, iaculis fermentum leo vehicula ac. Ut vitae nunc a nisl lacinia ultricies. Curabitur ultricies fermentum lacinia.</p>
	</div>

<div id="main">
		<div class="post">
			<h1><a href="#">city's breaking down on a camel's back</a></h1>
				<div class="meta">posted by [name] on day.month.year at hr:mn | # words</div>
			<p>They just have to go 'cause they don't know whack...  The date is 3 July, 2009.  Lately, it seems, I've been doing a lot of simplistic designs, and this one is no exception.  I started this design a little over a month ago, but only recently decided to offer it as free love.  I suppose this one isn't safe for all work environments, but damn is she sexy!</p>
			<p>I may, in the future, put this into WordPress, but please don't ask for a version MySpace, LiveJournal, or otherwise.  I don't care about MS and I don't know the ins an outs of LiveJournal+.  This does work, however, quite nicely with FanUpdate, and it's minimal effort to combine them on your part.  Enjoy!</p>
			<div class="cmnt">
				<a href="#"># comments</a>
			</div>
		</div>

<div class="post">
			<h1><a href="#">css display</a></h1>
				<div class="meta">posted by [name] on day.month.year at hr:mn | # words</div>
			<p><a href="#">Lorem ipsum dolor sit amet,</a> consectetur adipiscing elit. <b>Quisque congue odio et metus rhoncus ac consectetur nulla sollicitudin.</b> Nunc sit amet mauris diam, ut convallis diam. <i>Aliquam interdum adipiscing scelerisque.</i> Etiam tristique ultricies mauris, nec consectetur tortor condimentum id. <u>Pellentesque eget vehicula lacus.</u> Morbi dictum dui nec magna scelerisque egestas. <big>Aliquam erat volutpat.</big> Proin suscipit lacus in lectus condimentum semper. <small>Suspendisse eu sem in mi feugiat vehicula ut sit amet risus.</small> Pellentesque vulputate scelerisque risus ac placerat.</p>
			<blockquote>
				<p>You've got a new horizon it's ephemeral style.  //  A melancholy town where we never smile.  //  And all I wanna hear is the message beep.  //  My dreams, they've got to kiss, because I don't get sleep, no...</p>
			</blockquote>
			<div class="cmnt">
				<a href="#"># comments</a>
			</div>
		</div>

<div class="post">
			<h1><a href="#">terms of use</a></h1>
				<div class="meta">posted by [name] on day.month.year at hr:mn | # words</div>
			<ul>
				<li>Redistribute and DIE.</li>
				<li>Leave the credit link.</li>
				<li>Do not alter the stylesheet.</li>
				<li>That is all.  :3</li>
			</ul>
			<div class="cmnt">
				<a href="#"># comments</a>
			</div>
		</div>

<div class="post">
			<h1><a href="#">lorem ipsum...</a></h1>
				<div class="meta">posted by [name] on day.month.year at hr:mn | # words</div>
			<p>Quisque varius sapien sed sapien varius convallis. Sed dignissim nisi a dui mollis venenatis. Suspendisse potenti. Suspendisse et quam id tortor commodo congue. Nullam scelerisque, ipsum eget interdum fermentum, enim ipsum tincidunt odio, sed hendrerit ipsum sapien in lorem. Nulla facilisi. Integer blandit condimentum massa. Pellentesque pharetra, urna in pretium suscipit, arcu eros cursus diam, quis molestie quam mi ac est. Sed id quam a tellus tristique posuere vitae eget ipsum. Nullam ut diam felis, eget scelerisque mi. Sed ultricies bibendum semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ac mauris lectus. Nam in leo nec neque pulvinar ullamcorper eget at sem.</p>
			<div class="cmnt">
				<a href="#"># comments</a>
			</div>
		</div>
	</div>
	<div id="footer">
		<p>© year name etc | Layout by <a href="http://heartofpandora.com">Aerith</a> | Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>, <a href="http://validator.w3.org/check?uri=referer">XHTML</a></p>
	</div>
</div>
</body>
</html>

Layout Comments

Showing latest 4 of 4 comments

i want to fuck the girl

By VIVEGAN on Jul 30, 2009 2:32 am

I like that song.

By lesliewelcomesyou on Jul 7, 2009 9:05 pm

Pretty coding (:
I love the shades of grey, it makes it look really sophisticated.

By aliiicimo on Jul 6, 2009 5:35 am

Sexy x)
Good Job ^ ^!

By Snaily on Jul 5, 2009 3:04 pm

Layout Details

Designer	HeartOfPandora
Submitted on	Jul 3, 2009
Page views	11,508
Favorites	29
Comments	4
Reviewer	schizo
Approved on	Jul 5, 2009

Too Sexy for Sleep

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates