pink 2
<!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</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 76% "Trebuchet MS", verdana, arial, sans-serif;
background : #fbf6fa url(pink-images/pink_bg.gif) repeat-y;
background-position : 50% 0;
}
#box {
width : 762px;
margin-right : auto;
margin-left : auto;
line-height : 1.8em;
padding : 1px;
margin-top : 0;
position : relative;
background : url(pink-images/flower.jpg) no-repeat;
}
#title {
background : inherit;
color : #fff;
width : 740px;
margin : 0;
padding : 0;
height : 35px;
}
#title h1 {
background-color : inherit;
color : #9a3466;
letter-spacing : 5px;
font-size : 140%;
text-align : right;
margin : 0 20px 0 0;
padding-top : 10px;
}
#header {
background-color : inherit;
color : #000;
width : 740px;
height : 150px;
margin : 0;
padding : 0;
}
.container {
width : 740px;
padding-top : 10px;
margin : 0;
}
#navCircle {
margin : 0;
padding : 0 0 20px 20px;
}
#navCircle li {
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
}
#navCircle a:link, #navCircle a:visited {
background : inherit;
color : #9a3466;
float : left;
font-size : 12px;
line-height : 12px;
font-weight : bold;
padding : 0 20px 15px 20px;
text-decoration : none;
}
#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
background : inherit;
color : #000;
background : url(pink-images/pink_menu.gif) no-repeat bottom center;
}
#main {
padding : 1px;
margin : 0;
float : left;
width : 542px;
}
#main p {
padding : 0 20px 0 15px;
}
#main h1 {
padding : 5px;
margin : 10px 30px 0 20px;
font-size : 110%;
text-transform : uppercase;
letter-spacing : 3px;
border-top : 1px dashed #9a3466;
border-bottom : 1px dashed #9a3466;
background : inherit;
color : #000;
}
#right-menu {
width : 180px;
margin : 0 0 0 550px;
border-left : 1px solid #eee;
padding-left : 10px;
}
#right-menu h1 {
background : inherit;
margin : 0;
text-transform : uppercase;
font-size : 10px;
line-height : 1em;
color : #9a3466;
}
#right-navlist {
background-color : inherit;
color : #333;
width : 95%;
line-height : 1.8em;
margin : 15px 0 5px 10px;
padding : 0;
list-style-type : none;
}
#right-navlist a {
display : block;
width : 95%;
text-decoration : none;
background : url(pink-images/pink_menu.gif) no-repeat right;
background-color : inherit;
color : #000;
}
#right-navlist a#current, #right-navlist a:hover {
text-decoration : none;
background-color : inherit;
color : #333;
background-image : url(pink-images/submenua_hover.gif);
}
.sideheader {
height:30px;
color : #e6cfd9;
background : transparent url(pink-images/pink_side.gif) no-repeat;
letter-spacing : 3px;
font-size : 110%;
text-align : center;
text-transform : uppercase;
margin : 0;
padding : 3px;
}
.news {
font-size : 10px;
background-color : inherit;
color : #666;
}
#footer {
clear : both;
background-color : inherit;
color : #9f6984;
padding : 0;
border-top : 1px solid #eee;
margin : 40px 0 0 10px;
}
#footer a:link, #footer a:visited {
background-color : inherit;
color : #9f6984;
}
#footer a:hover {
border-bottom : 1px dashed #000;
text-decoration : none;
}
.myborder {
border : 1px solid #000;
padding : 5px;
}
a img {
border : none;
}
a:link, a:visited {
background-color : inherit;
color : #9C3163;
text-decoration : none;
}
a:hover {
background-color : inherit;
text-decoration : none;
color : #333;
}
div.scroll {
overflow : auto;
height : 7em;
width : 160px;
border : 1px solid #fff;
padding : 1ex;
background-color : #fbe9f9;
color : #866709;
margin : 25px 0 25px 0;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
</style>
</head>
<body>
<div id="box">
<div id="title">
<h1>Your Company Name</h1>
</div>
<div id="header"><img src="pink-images/pink_head.jpg" alt="logo"/></div>
<div class="container">
<ul id="navCircle">
<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="main">
<h1>Welcome to <span style="color:#9C3163;">Pink</span> Template</h1>
<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. For more FREE templates visit my website.</blockquote>
<div style="float:right; width: 125px; height: 6em; margin:10px; font-family: georgia, arial, helvetica; font-size: 18px; font-weight:normal; line-height:22px; color: #9A3466; text-align: left;"><span style="color:#000;">"... Pink is </span> <br />
the colour of <span style="color: #7B6571;">universal</span> <br />
love ... " </div>
<p>This is a <a href="http://www.free-css.com/">link</a> to nowhere. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat. Mauris et pede eget elit congue dictum. Etiam auctor, sem eget rhoncus viverra, dolor sem vehicula nisl, ut imperdiet dui purus non dui. In ac tellus. </p>
<h1>About the Site</h1>
<p><img class="myborder" align="left" hspace="10" src="pink-images/pink_sq.gif" alt="icon"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Etiam auctor, sem eget rhoncus viverra, dolor sem vehicula nisl, ut imperdiet dui purus non dui. In ac tellus. Mauris et pede eget elit congue dictum. Etiam auctor, sem eget rhoncus viverra, dolor sem vehicula nisl, ut imperdiet dui purus non dui. In ac tellus. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Etiam auctor, sem eget rhoncus viverra, dolor sem vehicula nisl, ut imperdiet dui purus non dui. In ac tellus. Mauris et pede eget elit congue dictum. Etiam auctor, sem eget rhoncus viverra, dolor sem vehicula nisl, ut imperdiet dui purus non dui. In ac tellus.</p>
</div>
<div id="right-menu">
<h2 class="sideheader">News</h2>
<div class="scroll">
<h1>Sept 24th 2005</h1>
<p class="news">Use this space as a mini weblog maybe .....</p>
<h1>Sept 25th 2005</h1>
<p class="news">or maybe not!</p>
</div>
<h2 class="sideheader">Links</h2>
<div id="navcontainer">
<ul id="right-navlist">
<li><a href="http://www.free-css.com/">Snapp Happy</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>
<li><a href="http://www.free-css.com/">OSWD</a></li>
</ul>
</div>
</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> | 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