Did_My_Time
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Did My Time (It Wasn't Fun) V2.0</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;
background-color: #333333;
}
#container {
width: 810px;
margin: 2px auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #666666;
background-color: #666666;
}
#container2 {
width: 810px;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #efefef;
background-color: #666666;
border: solid #110000;
border-width: 0 1px 1px 1px;
}
h1 {
font-family: "Courier New", Monospace;
font-weight: normal;
font-size: 32px;
color: #efefef;
margin-bottom: 30px;
background-color: #666666;
padding-left: 35px;
}
h2 {
color: #efefef;
font-size: 140%;
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
padding-left: 20px;
border: solid #000000;
border-width: 1px 1px 1px 1px;
}
a {
color: #eeeeee;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
/**************** images styles ****************/
a img{
border:none;
}
img.left,img.center,img.right {
padding: 4px;
border: 1px solid #110000;
background-color: #efefef;
}
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 20px;
}
/**************** 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: 810px;
padding-bottom: 10px;
padding-top: 10px;
clear: both;
border-top: solid #110000;
border-left: solid #110000;
border-right: solid #110000;
border-width: 1px 1px 0 1px;
background-color: #666666;
}
#header p {
margin-top: -20px;
margin-left: 60px;
color: #efefef;
}
/**************** menu styles ****************/
ul.navbar {
list-style-type:none;
float:left;
display:inline;
width:100%;
line-height:1px;
clear:both;
padding:0;
background-color:#555551;
border-left: 1px solid #110000;
border-right: 1px solid #110000;
border-top: 1px solid #110000;
border-bottom: 3px solid #110000;
margin-left:-0px;
}
ul.navbar li {
display:inline;
margin-right:0px;
}
a.nav:link, a.nav:visited {
display:block;
float:left;
width:24.5%;
padding:1em 2px 1em 0;
margin:0;
text-decoration:none;
background-color:#555551;
color:#FFFFFF;
text-align: center;
border-right: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
}
a.nav:hover {
display:block;
float:left;
width:24.5%;
padding:1em 2px 1em 0;
margin:0;
text-decoration:none;
background-color:#333333;
color:#FFFFFF;
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
a.nav:active {
display:block;
float:left;
width:24.5%;
padding:1em 0 1em 0;
margin:0;
text-decoration:none;
background-color:#999999;
color:#FFFFFF;
}
/**************** content styles ****************/
#content {
width: 560px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
float: left;
margin-top: 5px;
}
#content p {
padding-bottom: 20px;
border-bottom: 1px solid #DDDDDD;
}
/**************** sidebar styles ****************/
#sidebar {
width: 188px;
padding-left: 21px;
padding-right: 10px;
padding-top: 5px;
float: right;
border-left: 1px solid #dddddd;
margin-top: 5px;
}
#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: 806px;
background-color:#222224;
border-top: 1px solid #000000;
}
#footer p {
color:#efefef;
padding: 5px;
text-align: center;
}
#footer p a {
color: #efefef;
font-weight:100;
}
#footer p a:hover {
color: #dddddd;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Did My Time V2.0</h1>
<p>ya, it wasn't fun...</p>
</div>
<div><ul class="navbar">
<li><a href="#" class="nav">Home</a></li>
<li><a href="#" class="nav">About Us</a></li>
<li><a href="#" class="nav">Products</a></li>
<li><a href="#" class="nav">Contact</a></li>
</ul></div>
<div id="container2">
<div id="content">
<h2>Here is the Main Content</h2>
<p> This Design, "Did My Time" is Valid XHTML Strict and CSS. It Works in Most Browers that i know of and is very designfull-ish-ism.
You may need some HTML/CSS knowledge if you want to add/remove sections in the nav-bar. If you need help with this, please contact me at <a href="mailto:apcfreak_666@yahoo.com">this address</a>. In this version, i have also changed the image background from default to a whitish color. You can easily change this in the CSS. I dont mind what you do with this, just dont credit it for your self. Thank you.
I hope you like using this template!<br />
<br />
<img src="Did_My_Time-images/time.jpg" alt="Time - Left Align" width="200" height="133" class="right" />There are three image classes, Left,
Right, And Center, as you can see on this page. (The Images are Stock, and Free..)
<br />
<br />
Quisque viverra, eros sed imperdiet iaculis, est risus facilisis quam, id malesuada arcu nulla luctus urna. Nullam et est. <br />
</p>
<h2>Different Lorum Ipsum! Yay!</h2>
<p>
<img src="Did_My_Time-images/time2.jpg" alt="Also Time - Right Align" width="150" height="214" class="left" />Aenean eros arcu, condimentum nec, dapibus ut, tincidunt sit amet, urna. Quisque
viverra, eros sed <a href="#">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 />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin facilisis dignissim neque. Morbi metus. Aliquam at turpis. Praesent hendrerit tristique elit. Quisque vulputate nulla.
Pellentesque pulvinar. Aenean non erat at est iaculis scelerisque. Etiam vel mauris. Etiam vulputate erat quis purus. Integer nec felis. Nulla sodales malesuada sem. Maecenas ut dui
non metus interdum dapibus. Fusce massa. Ut tempor pretium mi. Maecenas tortor dui, pretium a, varius nec, ultrices et, elit. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Sed sit amet neque. Nunc nec ipsum. </p>
<h2>Fusce varius</h2>
<p>
Aenean eros arcu, <a href="#">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.<img src="Did_My_Time-images/hall.jpg" alt="Hall - Align Center" width="160" height="137" class="center" /></p>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
<p>Sidebar for just about any thing... (Pics, News, Bios, etc., etc.)</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin facilisis dignissim neque. Morbi metus. Aliquam at turpis.Quisque viverra, eros sed imperdiet iaculisSuspendisse pede urna,
fringilla quis, tristique ut, facilisis pulvinar.</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
</p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category