Pretty-in-Pink
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template 2</title>
<style type='text/css'>
/* CSS Document */
body {
margin:0px;
background:#FF7373 url(Pretty-in-Pink-images/dots.png);
}
#wrapper {
position:relative;
padding: 0px 10px;
margin:0px auto;
width:1000px;
height:1000px;
}
#header {
width:1000px;
height:200px;
}
#nav {
width:990px;
margin-left:10px;
}
#nav a {
background:#FFB273;
color:#E667AF;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
padding:5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
z-index:-10;
}
#nav a:hover, #nav a.active {
background:#e667af;
color:#ffb273;
}
#content {
width:700px;
background:#e667af;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color:#FFFFFF;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-top:-5px;
padding:10px;
z-index:10;
}
#content p a {
color:#ffb273;
text-decoration:none;
}
#content p a:hover {
text-decoration:underline;
}
#sidebar {
width:200px;
padding:10px;
background:#ffb273;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color:#FFFFEE;
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-top:-5px;
}
a {
color:#e667af;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
<a href="#top" class="active">Home</a>
<a href="#top">Blog</a>
<a href="#top">About</a>
<a href="#top">Contact Us</a>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget purus elit. Mauris aliquam, urna eget adipiscing fermentum, dui tortor eleifend magna, eget laoreet ipsum erat id ipsum. Ut accumsan, turpis et sodales volutpat, ante nibh euismod nibh, eget accumsan ipsum tellus vel dui. Praesent quis nisl dolor, elementum commodo tellus. Aliquam est massa, sagittis quis tristique non, vestibulum nec massa. Praesent adipiscing tellus volutpat libero rutrum vitae consectetur risus lacinia. Proin eget dolor vel mauris vestibulum molestie eget eget libero. Fusce metus leo, luctus quis faucibus egestas, sollicitudin id felis. Proin odio risus, tincidunt non tincidunt eu, lacinia auctor magna. Sed imperdiet ultrices purus ut iaculis. </p>
<p>Sed commodo, nibh ac ultrices posuere, nunc augue iaculis tellus, vitae venenatis nisi erat placerat nisl. Ut in purus ac sem imperdiet congue. Fusce fermentum, mauris id laoreet feugiat, nisi ipsum condimentum odio, sed aliquam orci sapien in justo. Vestibulum convallis ultrices laoreet. Maecenas elementum convallis tellus, ut convallis quam posuere non. Nunc vel sapien velit. Quisque sodales molestie sollicitudin. Praesent porta lobortis tristique. Nulla sit amet tellus orci. Nunc vitae mi nec lectus euismod dignissim. Suspendisse ac ipsum mi, et commodo sapien. Donec nec ultrices dui. Donec massa orci, ullamcorper ut dapibus nec, vehicula in quam. </p>
<p>In scelerisque, sem in porttitor egestas, metus leo faucibus metus, non faucibus magna quam at nisi. Integer sodales risus ut neque sollicitudin rutrum ut sit amet libero. Suspendisse nibh risus, aliquet eu volutpat a, malesuada in justo. Nunc luctus dolor et neque mollis at gravida arcu rhoncus. Sed a lorem id augue mollis vestibulum vel eu quam. Phasellus nibh magna, vehicula vel auctor et, fermentum eu justo. Sed cursus euismod volutpat. Nullam vitae dignissim eros. Cras lorem odio, viverra nec ultrices et, tempor sed lectus. Quisque vehicula pretium quam eget luctus. Aliquam lacus massa, porttitor in posuere sed, feugiat a ipsum. Aliquam eget erat libero. Curabitur id tempus erat. Phasellus congue vestibulum turpis nec porta. Mauris viverra tortor sit amet turpis sagittis a consequat dui rutrum. Nulla malesuada dignissim risus vel aliquet.</p>
<p>Mauris porttitor, ante in pretium rutrum, lectus urna aliquet mi, eget ullamcorper ipsum felis ac risus. Suspendisse placerat orci augue, ut porta enim. In semper feugiat mi eu ullamcorper. Donec sodales pharetra volutpat. Integer venenatis faucibus rhoncus. Sed pellentesque hendrerit ullamcorper. Quisque hendrerit nunc leo, quis volutpat lectus. Nullam odio felis, fermentum quis pharetra vitae, molestie id metus. Nulla semper rhoncus venenatis. Integer consequat blandit malesuada. Nam laoreet neque a eros tempus eu posuere nisl viverra. Vivamus sit amet elementum justo. Ut ac dolor dolor, eu adipiscing arcu. Integer nec dui nunc, ut hendrerit leo. Nunc interdum felis et tellus volutpat elementum. Quisque aliquam, odio aliquet bibendum cursus, urna mi consectetur diam, id vestibulum nisl risus at nulla. Proin quis ipsum quam, quis fermentum dui. Nunc dapibus ultrices nunc a sodales.</p>
<p>Fusce quis <a href="#">eros</a> pellentesque ante porttitor sollicitudin sodales at tortor. Maecenas non nulla non neque dictum accumsan. Nam turpis eros, euismod eget facilisis ac, bibendum eget quam. Morbi ultricies euismod mauris sollicitudin rutrum. Pellentesque eu sapien tempus lacus sagittis mattis in at odio. Vestibulum luctus, dui ac porttitor venenatis, diam neque rhoncus justo, et blandit risus leo in quam. Nunc ullamcorper elit tempor lacus sagittis at scelerisque nisi dignissim. Mauris sollicitudin vulputate massa et iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam felis orci, adipiscing eu imperdiet non, egestas vel justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus tincidunt suscipit libero quis egestas.</p>
</div>
<div id="sidebar">
<h1><a href="#">Lorem</a></h1> <h1>ipsum</h1> dolor sit amet, consectetur adipiscing elit. Curabitur eget purus elit. Mauris aliquam, urna eget adipiscing fermentum, dui tortor eleifend magna, eget laoreet ipsum erat id ipsum. Ut accumsan, turpis et sodales volutpat, ante nibh euismod nibh, eget accumsan ipsum tellus vel dui. Praesent quis nisl dolor, elementum commodo tellus. Aliquam est massa, sagittis quis tristique non, vestibulum nec massa. Praesent adipiscing tellus volutpat libero rutrum vitae consectetur risus lacinia. Proin eget dolor vel mauris vestibulum molestie eget eget libero. Fusce metus leo, luctus quis faucibus egestas, sollicitudin id felis. Proin odio risus, tincidunt non tincidunt eu, lacinia auctor magna. Sed imperdiet ultrices purus ut iaculis.
</div>
</body>
</html>
Related examples in the same category