5ThirtyOne Minimal Dark Overlay

Layout Notes

released under creative commons. do not use for commercial reasons.

Copy and paste to About me.

<a href="http://www.divoverlay.com/" target="_blank"><img
src="http://www.divoverlay.com/img/button.gif" alt="Myspace Codes" style="position:absolute; left:0px;
top: 0px;" border="0"></a><style type="text/css">
body {
	font-family: helvetica, arial, sans-serif;
	font-size: 62.5%;
	background-color: 444444;
}

table, td {
		background-color: 444444;
	}

.main{
	position:absolute;
	left:50%;
	top:125px;
	width:800px;
	z-index:1;
	margin-left:-400px;
}

.main a:link, .main a:active, .main a:visited {
		color: a3bdc8;
		text-decoration: none;
		font-size: 1em;
	}

.main a:hover {
	color: ffffff;
	}
	
img {
	border: 0;
	filter:alpha(opacity=80); 
	-moz-opacity: 0.80; 
	opacity: 0.80;
}

img:hover{
		filter:alpha(opacity=95); 
		-moz-opacity: 0.95; 
		opacity: 0.95;
	}

p, li {
	font-size: 1.2em;
	color: f0f0f0;
}

.title1, .title2 {
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: -1px;
	color: dbdbdb;
}

.title1 {
		font-size: 1.3em;
	}

.title2 {
		font-size: 1.2em;
	}

.title2 a {
			font-size: 1.1em;
		}

.sidebar .title2 {
			padding: 0 0 0 12px;
		}

.newnav {
margin: 11px 0 20px 0;
padding: 0;
text-transform: lowercase;
letter-spacing: -1px;
}

.newnav a {
		font-size: 1.2em;
		color: d0d0d0 !important;
	}

.newnav a:hover {
		color: ffffff !important;
	}

.newnav .active {
		color: ffffff !important;
	}

.newnav li {
		list-style: none;
		display: inline;
		margin: 0 0 0 13px;
	}

.sidebar {
	float: right;
	width: 200px;
}

.content {
	float: left;
	width: 500px;
	padding: 0 0 0 28px;
}

.breaker {
	clear: both;
	margin-top: 25px;
	border-top: 1px solid;
	border-color: 777777;
	background-image: url("http://img440.imageshack.us/img440/3802/gradient5gj.jpg");
	background-repeat: repeat-x;
	height: 200px;
}

.cell {
		float: left;
		padding-top: 10px;
		margin: 0 0 0 25px;
	}

.cell-inner {
		width: 225px;
		padding: 0 10px 0 0;
	}

.bottoms {
	clear: both;
	padding: 45px 0 0 0;
}

textarea {
	background-color: 555555;
	border: 1px solid;
	border-color: 666666;
	color: f0f0f0;
	padding: 3px;
	overflow: hidden;
}

input {
		background-color: 444444;
		color: f0f0f0;
		border: 1px solid;
		border-color: 666666;
	}

.askfirst {
	clear: both;
	text-align: center;
	padding: 25px 0 0 0;
}
</style>

Paste in id like to meet

<ul class="newnav">
	<li><a href="#">Home</a></li>
	<li><a href="#" class="active">Send a Message</a></li>
	<li><a href="#">Add to Friends</a></li>
	<li><a href="#">Add to Group</a></li>
	<li><a href="#">Favorites</a></li>
</ul>

<div class="sidebar">
	<a href="#"><img src="http://i29.photobucket.com/albums/c275/isdereks/myspace/269523782_m.gif" style="width: 165px;" /></a><br /><br />
	<span class="title2">////// Friends <a href="#" title="View more contacts">//////</a></span><br /><br />
	<a href="#"><img src="http://img95.imageshack.us/img95/4940/p7zb.png" title="Sylvia" alt="Sylvia" /></a> 
	<a href="#"><img src="http://img95.imageshack.us/img95/4940/p7zb.png" title="Sharon" alt="Sharon" /></a><br />
	<a href="#"><img src="http://img95.imageshack.us/img95/4940/p7zb.png" alt="Jain" title="Jain" /></a> 
	<a href="#"><img src="http://img95.imageshack.us/img95/4940/p7zb.png" title="Ryan" alt="Ryan" /></a><br />
	<a href="#"><img src="http://img95.imageshack.us/img95/4940/p7zb.png" title="Shell" alt="Shell" /></a> 
	<a href="#"><img src="http://img95.imageshack.us/img95/4940/p7zb.png" alt="Becca" title="Becca" /></a><br />
	<a href="#"><img src="http://img95.imageshack.us/img95/4940/p7zb.png" title="Lynda" alt="Lynda" /></a> 
	<a href="#"><img src="http://img95.imageshack.us/img95/4940/p7zb.png" title="Adam" alt="Adam" /></a><br />
</div>

<div class="content">
	<div class="title1">Who is this Derek guy?</div>
		<p>I've got 22 years of trickiness and creativity under my belt. And... according to a questionnaire which I took while sitting in a class I didn't belong in, I have a 75% social desirability. Maybe I should focus my educational aspirations on a psych major so I can sit around all day and answer true / false tests to find out how desirable I am?</p>

<p>What's there to say? Stuck between a rock and a hard place. Literally. I'm that back country hiker who didn't bother to heed the warning signs that read <em>Park Closed: Hungry Wild Ass-Bears Seen Mauling Hikers</em>. I went ahead and ignored the signs, ran into a beastly bear, fell into a Batman lair-like cave as I tried to outrun the bastard, and got myself wedged between hell and a giant boulder. So I have a little extra baggage I have to carry around. The emotional kind. Who doesn't have any of that? The question is where's the lost &amp; found when you need it?</p>

<p>I want to meet someone to pick the bones out of my fish. I hate getting pricked by those damn things during dinner. I also want to meet someone who can tell the difference between Haribo and Black Forest gummi bears based on taste alone. They're not the same dammit!</p>

<p>Sometimes what you're looking for is staring right back at you.</p>
<p>Smile.</p>
</div>

<div class="breaker">
<div class="cell">
	<div class="cell-inner">
		<span class="title2">Vitals /////////</span>
		<p>Age :: Twenty Two<br />
		Body :: Six Two<br />
		Status :: Nag-iisa<br />
		Here for :: Friends / Networking<br />
		Orientation :: Women<br />
		Hometown :: Seattle<br />
		Ethnicity :: Pacific Islander<br />
		Occupation :: Geek</p>
	</div>
</div>

<div class="cell">
	<div class="cell-inner">
		<span class="title2">Interests /////////</span>
		<p>Music :: The clang of pots n' pans or random nonsense <em>humming</em>.<br />
		Books :: Huh? Don't people give these to short friends to sit on?<br />
		Movies :: The Incredibles<br />
		Design :: Projects never look the way they look in my head</p>
	</div>
</div>

<div class="cell">
	<div class="cell-inner">
		<span class="title2">Links /////////</span>
		<p><a href="http://5thirtyone.com" title="5ThirtyOne :: Journal Design Eyecandy :: Derek Punsalan">5ThirtyOne</a> :: Journal Design Eyecandy<br />
		<a href="http://uneasysilence.com" title="Observing the unobserved">UNEASYsilence</a> :: Observing the unobserved<br />
		<a href="http://flickr.com/photos/0401/" title="Flickr Photostream">Flickrstream</a> :: Personal Flickr photostream<br />
		<a href="http://del.icio.us/unfortunate" title="Social bookmarks">del.icio.us</a> :: Sometimes I find the good stuff</p>
	</div>
</div>
</div>

</div>
	
		<div class="content">
		<div class="title1">Eh?</div>
		<p>"Practice safe lunch....use a condiment"</p>

<div class="title1">The Junkyard</div>
		<p>I'm never content with whatever I'm working on. Aesthetically, anything I tweak is a direct reflection of my personality and tastes. Consider this profile - which I dub derkilicious - an ever changing work in progress. The original color schemes can be found <a href="http://flickr.com/photos/0401/59197867/">here</a>. The layout has some minor issues with IE, Safari, and Opera. Can I recommend <a href="http://getfirefox.com" title="Download Mozilla Firefox">Firefox</a> or <a href="http://flock.com" title="Download the Flock social browser">Flock</a>? Use Intercrap Explorer as a last resort.</p>
	</div>
</div>

<div class="askfirst">
	<p>Best viewed in <a href="http://getfirefox.com/">Firefox</a> :: Layout by <a href="http://5thirtyone.com/archives/15" title="5ThirtyOne :: Journal Design Eyecandy :: Derek Punsalan">5ThirtyOne</a> :: Ask First</p>
</div>

</td></tr></table></div>

Pages

Sponsor

Partners

5ThirtyOne Minimal Dark Overlay

Layout Notes

MORE FUN STUFF

Latest Layouts