Vanessa Anne Hudgens

Designer's Comments

Look carefully for specific instructions

I know, not my best layout. I have no idea what Vanessa Hudgens has to do with the rest of the layout. I just can't find any inspiration, so this is just something very simple i tried to throw together.

Credits:
Brushes: Swimchick (http://swimchick.net)
Images: PSDelightful (http://majestic-skies.net)
More layouts at http://cynthia.paper-cranes.net

Valid HTML and CSS
Tested in Firefox 3.5 and Internet Explorer 7.

Please don't remove any credits! Thanks :)

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>Your Title Here</title>

<style type="text/css">
body { background : #e6e6e6 url('http://cbimg6.com/layouts/10/02/36153ab.png') repeat-x; font-family : century gothic, arial; font-size : 11px; letter-spacing : 1px; color : #595959; text-align : justify; margin : 0; padding : 0; }
#container { width : 700px; height : 100%; padding : 0; margin : 0; }
#header { background : #e6e6e6 url('http://cbimg6.com/layouts/10/02/36153ac.png') no-repeat; width : 700px; height : 372px; padding : 0; margin : 0; }
#back { background : #e6e6e6 url("http://cbimg6.com/layouts/10/02/36153ad.png") repeat-y; width : 700px; float : left; }
#content { float : left; width : 424px; margin : 0 0 0 42px; }
#nav { float : right; width : 193px; margin : 0 33px 0 0; }
#footer { width : 700px; background : url("http://cbimg6.com/layouts/10/02/36153ad.png"); padding : 10px; margin : 0 0 0 0; text-align : center; clear : both; }
#nav2 { width : 210px; height : 154px; position : absolute; left : 434px; top : 42px; }
a.nav2:link, a.nav2:active, a.nav2:visited { border-bottom : 2px solid #666666; font-size : 11px; color : #666666; background : #a7a7a7; text-align : center; letter-spacing : -1px; text-decoration : none; font-family : georgia; display : block; margin : 1px; padding : 3px; }
a.nav2:hover { border-bottom : 2px solid #a7a7a7; font-size : 11px; color : #a7a7a7; background : #666666; text-align : center; text-decoration : none; display : block; margin : 1px; padding : 3px; }
h1 { font-size : 16px; text-transform : uppercase; letter-spacing : 3px; text-align : center; border-bottom : 2px dashed #a7a7a7; color : #a7a7a7; }
h2 { font-size : 15px; background : #cdcdcd url("http://cbimg6.com/layouts/10/02/36153ab.png"); font-family : georgia; font-style : italic; text-transform : lowercase; letter-spacing : -1px; border-bottom : 2px solid; font-weight : normal; margin : 3px 0 2px 0; }
h3 { font-size : 14px; text-transform : uppercase; letter-spacing : 2px; text-align : center; padding : 0; margin : 0; }
textarea { text-align : center; background : url("http://cbimg6.com/layouts/10/02/36153ab.png"); font-family : arial; color : #595959; border : 1px dashed #595959; font-size : 10px; text-transform : uppercase; }
#title { text-align : center; color : #b45137; font-weight : 500; font-size : 40px; font-family : century gothic; letter-spacing : 3px; text-transform : uppercase; position : absolute; left : 235px; top : 237px; width : 441px; height : 61px; }
blockquote { padding : 5px; background : url('http://cbimg6.com/layouts/10/02/36153ab.png'); border-bottom : 10px solid #cdcdcd; }
a:link, a:visited, a:active { text-decoration : none; color : #303030; font-size : 12px; }
a:hover { color : #4b4b4b; font-size : 11px; }
#bottom { background : #dbdbdb; height : 80px; text-align : right; clear : both; }
</style>
</head>

<body>

<div id="nav2">
<h3>Navigation</h3>
<table align="center" width="210"><tr>
<td><a href="#" class="nav2">Link 001</a></td>
<td><a href="#" class="nav2">Link 002</a></td>
</tr><tr>
<td><a href="#" class="nav2">Link 003</a></td>
<td><a href="#" class="nav2">Link 004</a></td>
</tr><tr>
<td><a href="#" class="nav2">Link 005</a></td>
<td><a href="#" class="nav2">Link 006</a></td>
</tr></table></div>

<div id="title">yoursite.com</div>
</div>

<div id="content">
<h1>Lorem Ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in luctus leo. Sed vitae elit quam, sagittis porta tellus. Vivamus pharetra, mauris ac vulputate venenatis, est nisl porta nunc, nec egestas neque neque sit amet lorem. Ut id nibh a diam egestas dictum quis et leo. Etiam eu vulputate neque. Nulla vitae ipsum diam, at molestie erat. Cras sit amet ante velit, eget tempus arcu. Pellentesque molestie luctus urna non malesuada. Cras non ipsum lacus. Suspendisse potenti. Vestibulum sed felis lectus. Fusce elit sem, faucibus at aliquet et, tincidunt ac odio. Donec sodales pellentesque sodales. Phasellus vel tincidunt est. Vestibulum a magna risus, id consectetur metus. Proin tincidunt, nisi in vestibulum malesuada, libero nulla ornare quam, eu rhoncus leo nunc in tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eget tellus sed augue bibendum luctus. Maecenas lorem nisi, semper sed commodo quis, vulputate nec risus.
<br><br>
Ut velit mauris, facilisis dignissim luctus nec, ultricies sed risus. Fusce vel ante sed ante interdum lacinia at quis nulla. Duis vitae dolor tincidunt nisl mattis porttitor. Nullam sed tempor magna. Nunc cursus facilisis tellus eu malesuada. Vivamus eget dolor metus, a consectetur sem. Praesent ut elit id lorem tincidunt dignissim sed vitae augue. Nam vestibulum metus quis diam sagittis varius. Mauris eu dui turpis, id malesuada est. Sed leo enim, auctor eu ornare in, suscipit et lacus. Nam turpis risus, facilisis ut posuere sit amet, ultricies a justo. Etiam nec justo eu velit suscipit cursus. Duis ac ligula nec lectus viverra rhoncus at varius tortor. Sed commodo neque tortor. Nulla sed nunc massa, vitae semper eros. Cras tincidunt, lacus ac varius vulputate, nisi quam volutpat leo, at condimentum velit nibh sit amet est. Cras pellentesque malesuada lorem, eget pellentesque enim tempus a. Nunc id ligula magna. Ut id nulla sit amet odio porta vestibulum nec eget nunc. Nunc sit amet magna quam.

<h2>Extra</h2>
<blockquote><b>bold</b> <i>italic</i> <u>underline</u> <s>strikethrough</s> <a href="#">link</a></blockquote>
</div>

<div id="nav">
<h2>Header 2</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in luctus leo. Sed vitae elit quam, sagittis porta tellus. Vivamus pharetra, mauris ac vulputate venenatis, est nisl porta nunc, nec egestas neque neque sit amet lorem. Ut id nibh a diam egestas dictum quis et leo. Etiam eu vulputate neque. Nulla vitae ipsum diam, at molestie erat. Cras sit amet ante velit, eget tempus arcu.
<h2>Navigation</h2>
<table width="193"><tr>
<td><a href="#" class="nav2">link</a></td>
<td><a href="#" class="nav2">link</a></td>
</tr><tr>
<td><a href="#" class="nav2">link</a></td>
<td><a href="#" class="nav2">link</a></td>
</tr></table>
<h2>Textarea</h2>
<textarea rows="4" cols="30">text text text text text text text text text text text text text text text text</textarea>
</div>
</div>

<div id="footer">
All content Copyright © <b>You</b> 2010.<br> Layout coded and designed by <a href="http://cynthia.paper-cranes.net">Cynthia</a>.<br>
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a> | <a href="http://validator.w3.org/check?uri=referer">Valid HTML</a></div>
</div>
<div id="bottom"><a href="http://cynthia.paper-cranes.net"><img src="http://cbimg6.com/layouts/10/02/36153aa.png" border="0" alt=""></a></div>

</body>
</html>