pinkweb
<!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>
<title>PINK WEB</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 75% "Trebuchet MS", verdana, tahoma, sans-serif;
color : #333;
background : #fff url(pinkweb-img/pink_bg.gif) center repeat-y;
}
#container {
width : 750px;
margin-left : auto;
margin-right : auto;
padding : 0;
line-height : 1.8em;
}
/*TOP BANNER*/
#banner {
padding : 5px 0;
margin-top : 10px;
height : 100px;
color : #000;
background : #fff url(pinkweb-img/spider_head.jpg) no-repeat;
}
/*TOP NAVIGATION*/
#navbar {
padding : 10px;
margin-bottom : 20px;
height : 30px;
}
#navdrop {
margin : 0;
padding : 0 0 20px 0;
border-bottom : 1px solid #eee;
}
#navdrop li {
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
}
#navdrop a:link, #navdrop a:visited {
background : inherit;
float : left;
padding : 0 20px 10px 20px;
font-size : 1.2em;
letter-spacing : 1px;
text-decoration : none;
color : #000;
}
#navdrop a:link.active, #navdrop a:visited.active, #navdrop a:hover {
color : #9a3466;
background : inherit;
background : url(pinkweb-img/pink_menu.gif) no-repeat bottom center;
}
/*MAIN CONTENT*/
#content {
width : 550px;
padding-bottom : 20px;
margin : 0 5px 0 5px;
background : #fff;
color : #333;
}
/*RIGHT SIDEBAR*/
#sidebar {
float : right;
width : 170px;
margin-top : 0;
margin-right : 10px;
padding-left : 5px;
border-left : 1px solid #eee;
color : #666;
background : #fff;
}
/*FOOTER*/
#footer {
clear : both;
height : 60px;
padding : 5px;
margin-bottom : 0;
font-size : 0.9em;
background : #fff url(pinkweb-img/pink_foot.jpg) no-repeat;
color : #000;
}
#footer a:link, #footer a:visited {
text-decoration : none;
color : #9c3a6b;
background : transparent;
}
#footer a:hover {
border-bottom : none;
color : #000;
background : transparent;
}
/*ROUNDED CORNERS*/
.rbroundbox {
background : url(pinkweb-img/nt3.gif) repeat;
}
.rbtop div {
background : url(pinkweb-img/tl3.gif) no-repeat top left;
}
.rbtop {
background : url(pinkweb-img/tr3.gif) no-repeat top right;
}
.rbbot div {
background : url(pinkweb-img/bl3.gif) no-repeat bottom left;
}
.rbbot {
background : url(pinkweb-img/br3.gif) no-repeat bottom right;
}
.rbtop div, .rbtop, .rbbot div, .rbbot {
height : 10px;
font-size : 1px;
}
.rbcontent {
margin : 0 7px;
}
.rbroundbox {
float : left;
width : 520px;
margin : 1em 2em;
}
/*TYPOGRAPHY*/
p {
padding : 0 0 5px 10px;
}
h1 {
margin : 10px 70px 0 0;
text-align : right;
font-size : 170%;
letter-spacing : 3px;
}
h2 {
margin: 0;
padding : 5px 0 0 15px;
font-size : 150%;
letter-spacing : 3px;
text-transform : uppercase;
background : inherit;
color : #333;
}
/*LINKS*/
a:link, a:visited {
text-decoration : none;
background : inherit;
color : #9b3567;
}
a:hover {
text-decoration : underline;
background : inherit;
color : #333;
}
ul li {
color : #9c3a6b;
list-style-type : square;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h1>Your Company Name</h1>
</div>
<div id="sidebar">
<h2>Search</h2>
<form action="http://www.free-css.com/" method="post">
<fieldset>
<legend>Search</legend>
<div> <span>
<label for="txtsearch"> <img src="pinkweb-img/search.gif" alt="search" /></label>
</span> <span>
<input type="text" value="demo only" name="txtsearch" title="Text input: search" id="txtsearch" size="20" />
</span> </div>
</fieldset>
</form>
<h2>Resources</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus varius, leo sit amet consequat venenatis, ante sem volutpat nulla, ac tristique lectus ipsum sit amet nisi. Ut ullamcorper pede non lacus. Maecenas eget ipsum auctor lectus aliquet tincidunt. Sed mi elit, pulvinar consectetuer, consequat quis, ultricies dapibus, mauris.</p>
<ul>
<li><a href="http://www.free-css.com/">home</a></li>
<li><a href="http://www.free-css.com/">TODC</a></li>
<li><a href="http://www.free-css.com/">CSS Drive</a></li>
<li><a href="http://www.free-css.com/">Style Gala</a></li>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
<li><a href="http://www.free-css.com/">OSWD</a></li>
<li><a href="http://www.free-css.com/">OWD</a></li>
<li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
<li><a href="http://www.free-css.com/">James Koster</a> </li>
</ul>
</div>
<div id="navbar">
<ul id="navdrop">
<li><a class="active" href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">Order</a></li>
</ul>
</div>
<div id="content">
<h2>Welcome to <span style="font-size: 0.9em;color: #9C386A;">PinkWeb</span> Template</h2>
<div class="rbroundbox">
<div class="rbtop">
<div></div>
</div>
<div class="rbcontent">
<blockquote>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS.<br />
For more FREE templates visit my website.</blockquote>
</div>
<div class="rbbot">
<div></div>
</div>
</div>
<h2>About</h2>
<p>This is a <a href="http://www.free-css.com/">link</a> to nowhere. Maecenas eget ipsum auctor lectus aliquet tincidunt. Sed mi elit, pulvinar consectetuer, consequat quis, ultricies dapibus, mauris. Phasellus est arcu, cursus ac, accumsan id, bibendum id, diam. Duis vulputate urna id metus. Aenean ac metus. Curabitur fermentum, leo eget mattis pellentesque, ante neque semper erat, at cursus pede augue non orci. Suspendisse nonummy augue sit amet enim. Duis vulputate urna id metus. Aenean ac metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus varius, leo sit amet consequat venenatis, ante sem volutpat nulla, ac tristique lectus ipsum sit amet nisi. Ut ullamcorper pede non lacus. </p>
<blockquote>Spiders - belong to a group of animals known as 'Arachnids'. They have a two-part body, four pairs of legs and two pincers. House spider (Tegenaria gigantea/domestica) - Female house spiders are 9-10mm in size, and males are 6-9mm (not including leg span). They are brown and hairy with long legs. The leg span of this spider can reach up to 60mm.</blockquote>
<p>Phasellus est arcu, cursus ac, accumsan id, bibendum id, diam. Duis vulputate urna id metus. Aenean ac metus. Curabitur fermentum, leo eget mattis pellentesque, ante neque semper erat, at cursus pede augue non orci. Suspendisse nonummy augue sit amet enim. Duis vulputate urna id metus. Aenean ac metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus varius, leo sit amet consequat venenatis, ante sem volutpat nulla, ac tristique lectus ipsum sit amet nisi. Ut ullamcorper pede non lacus. </p>
</div>
<div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>
This work is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>
Related examples in the same category