deliciouslyblue
<!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>Deliciously Blue</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/**************** body and tag styles ****************/
body {
margin-top: 0px;
margin-bottom: 30px;
}
#container {
width: 750px;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #666666;
background-color: #FFFFFF;
}
#container2 {
width: 746px;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #666666;
background-color: #FFFFFF;
border-bottom: 2px solid #2763A5;
}
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 32px;
color: #6DA6E2;
margin-bottom: 30px;
background-color: #FFFFFF;
}
h2 {
color: #666666;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
a {
color: #6DA6E2;
background-color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
a:hover {
background-color: #FFFFFF;
color: inherit;
font-weight: bold;
text-decoration: underline;
}
/**************** images styles ****************/
a img{
border: none;
}
img.left,img.center,img.right {
padding: 4px;
border: 1px solid #a0a0a0;
}
img.left {
float: left;
margin: 0 12px 5px 0;
}
img.center {
display: block;
margin: 0 auto 5px auto;
}
img.right {
float: right;
margin: 0 0 5px 12px;
}
/**************** form styles ****************/
form {
float:right;
font-size: 9px;
}
input {
background-color: #FFFFFF;
color: #999999;
border: 1px solid #2763A5;
font-size: 11px;
padding: 3px;
}
.button {
padding: 2px;
background-color: #6DA6E2;
color: #FFFFFF;
border: 1px solid #2763A5;
font-size: 11px;
}
/**************** header styles ****************/
#header {
width: 750px;
border: 0px
padding-bottom: 10px;
padding-top: 10px;
clear: both;
}
#header p {
margin-top: -20px;
margin-left: 30px;
color: #999999;
}
/**************** menu styles ****************/
#tabs10 {
float:left;
width:750px;
font-size:93%;
padding-bottom: 1px;
border-bottom:4px solid #2763A5;
line-height:normal;
}
#tabs10 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs10 li {
display:inline;
margin:0;
padding:0;
}
#tabs10 a {
float:left;
background:url("tableft10.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs10 a span {
float:left;
display:block;
background:url("tabright10.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#tabs10 a span {
float:none;
}
#tabs10 a:hover {
background-position:0% -42px;
}
#tabs10 a:hover span {
background-position:100% -42px;
}
/**************** content styles ****************/
#content {
width: 520px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
float: left;
}
#content p {
padding-bottom: 10px;
border-bottom: 1px solid #DDDDDD;
}
/**************** sidebar styles ****************/
#sidebar {
width: 175px;
padding-left: 21px;
padding-right: 10px;
padding-top: 10px;
float: right;
}
#sidebar p {
padding-bottom: 10px;
border-bottom: 1px solid #DDDDDD;
}
/**************** footer styles ****************/
#footer {
margin-top: 15px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 2px;
padding-right: 2px;
clear: both;
width: 742px;
background-color:#2763A5;
}
#footer p {
color:#FFFFFF;
padding: 5px;
text-align: center;
}
#footer p a {
color: #FFFFFF;
background-color:#2763A5;
font-weight:100;
border-bottom: 1px dotted #FFFFFF;
}
#footer p a:hover {
color: #FFFFFF;
text-decoration: none;
border-top: 1px dotted #FFFFFF;
border-bottom: 0px dotted #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<form name="form1" id="form1" method="post" action="http://www.free-css.com/">
<input type="text" name="textfield" value="Search For..." />
<input class=" button" type="submit" name="Submit" value="GO" />
</form>
<h1>Deliciously Blue</h1>
<p>so tasty it hurts</p>
</div>
<div id="tabs10">
<ul>
<li><a href="http://www.free-css.com/"><span>Home</span></a></li>
<li><a href="http://www.free-css.com/"><span>Link 2</span></a></li>
<li><a href="http://www.free-css.com/"><span>Link 3</span></a></li>
<li><a href="http://www.free-css.com/"><span>Link 4</span></a></li>
<li><a href="http://www.free-css.com/"><span>Link 5</span></a></li>
<li><a href="http://www.free-css.com/"><span>Link 6</span></a></li>
<li><a href="http://www.free-css.com/"><span>Link 7</span></a></li>
</ul>
</div>
<div id="container2">
<div id="content">
<h2>Here is the Main Content</h2>
<p> Well, I don't have too much to say about this template. It was heavily inspired by "Leaves" by "Anthonyy". I also used a menu that I found in the Designologue. So really, I didn't do much here, but it was my first submitted template and I am quite happy with it. I believe this thing is standards compliant too.<br />
<br />
<img src="left.gif" alt="Left Align" width="150" height="112" class="left" />Now I also added some image classes to position your nifty photos, so go ahead and have yourself a merry little time. There is a left one, a right one, and guess what? A center one!<br />
<br />
Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. <br />
</p>
<h2>Quisque facilisis</h2>
<p> <img src="left.gif" alt="Right Align" width="150" height="112" class="right" />Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed <a href="http://www.free-css.com/">imperdiet</a> iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc. <br />
<br />
Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. <a href="http://www.free-css.com/">Vestibulum velit</a> sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc.<img src="left.gif" alt="" width="150" height="112" class="center" /></p>
<h2>Fusce varius</h2>
<p> Aenean eros arcu, <a href="http://www.free-css.com/">condimentum</a> nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. Vestibulum velit sem, faucibus cursus, dapibus vestibulum, pellentesque et, urna. Donec luctus. Donec lectus. Aliquam eget eros facilisis tortor feugiat sollicitudin. Integer lobortis vulputate sapien. Sed iaculis erat ac nunc.</p>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
<p>This is a little tidbit for sidebar content. This whole column could be used for whatever kind of purpose: news, pics, etc.</p>
<p>Aenean eros arcu, condimentum nec, <a href="http://www.free-css.com/">dapibus</a> ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est.</p>
<p>Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est.</p>
</div>
<div id="footer">
<p> <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0</a> | Copyright © Your Name Here | Design by <a href="http://www.free-css.com/">super j man</a> </p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category