Clean_and_Brite
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<!--
This template is created by Jasper A. van der Meer for OSWD.org. You are free to do whatever
you like to do with this template, but it would be cool if you left the credits in the footer...
Enjoy this template, and if you use it, please let me know by emailing me on amy2k5@gmail.com
-->
<title>amygdela's atmosphere | The best free high quality stockphotos!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document created by Jasper A. van der Meer -> http://www.jmstudio.nl */
html,body {
height: 100%;
}
body {
background: #FBFBFB;
margin: 0;
padding: 0;
padding-top: 10px!important;
}
a,a:link,a:visited {
color: #2CAF2D;
font-family: Verdana, sans-serif;
}
a:hover {
color: #4ABCEA;
}
a:active {
color: Black;
}
#header {
width: 740px;
height: 90px;
line-height: 35px;
text-align: center;
border: 0!important;
padding-top: 10px;
}
#header span {
font-size: 3em;
font-family: "Courier New", Courier, monospace;
color: #9C9C9C;
letter-spacing: -4px;
font-stretch: ultra-condensed;
font-weight: 100;
}
.corner_pink_left {
margin: 0;
padding: 0;
vertical-align: middle;
}
ul#navlist {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist a {
padding: 3px 4px;
margin-right: 10px;
text-transform: uppercase;
}
#navlist a:link, #navlist a:visited {
color: #000000;
background-color: #FBFBFB;
border-bottom: 1px dotted #C4C4C4;
text-decoration: none;
font-size: 0.6em;
}
#navlist a:hover {
color: #FFFFFF;
background: #FF1493 url(Clean_and_Brite-images/corner_pink.jpg) top right no-repeat;
text-decoration: none;
font-size: 0.6em;
border: 0;
}
#container {
width: 740px;
min-height: 90%!important;
margin-left: auto;
margin-right: auto;
border: 3px solid #F0F0F0;
}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6 {
font-family: "Courier New", Courier, monospace;
font-size: 1.6em;
color: #4ABCEA;
letter-spacing: -2px;
padding-left: 5px;
margin-left: 5px;
display: block;
width: auto;
border-bottom: 1px dotted #CCCCCC;
}
#container p {
font: 0.7em Verdana, sans-serif;
padding: 5px;
line-height: 17px;
}
#firefoxlogo {
float: right;
width: 180px;
height: 75px;
margin-top: 10px;
padding-left: 10px;
font-family: "Trebuchet MS", sans-serif;
font-size: 1.6em;
color: #2CAF2D;
}
#cutsquare {
width: 180px;
height: 160px;
border: 1px solid #CCCCCC;
background-image: url(Clean_and_Brite-images/smiley-big.jpg);
background-position: center;
background-repeat: no-repeat;
line-height: 80px;
text-align: center;
float: right;
margin: 10px;
padding: 3px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.7em;
}
.line {
margin-left: 230px;
border: 0;
}
.attention {
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 10px;
font-size: 0.8em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #9C9C9C;
}
#floatspan {
font-weight: bold;
color: #FF1493;
letter-spacing: -1px;
text-transform: uppercase;
margin-left: 15px;
}
#floatlist {
width: 180px;
float: left;
background-color: #F4F4F4;
padding-top: 0;
margin-top: -5px;
margin-right: 10px;
}
#floatlist ul {
list-style: none;
padding-left: 0;
margin-left: 0;
}
#floatlist li {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.7em;
}
#floatlist a {
display: block;
width: 160px;
padding: 3px 10px;
text-decoration: none;
}
#floatlist a:hover {
background-color: #87CEFA;
color: #000000;
}
#footer {
clear: both;
height: 20px;
width: 740px;
background: #87CEFA;
text-align: center;
font-family: "Trebuchet MS", verdana, sans-serif;
font-size: 0.7em;
position: fixed;
bottom: 0;
}
#footer a {
color: #000000;
text-decoration: none;
}
#footer p {
display: block;
width: auto;
}
#spacer {
height: 20px;
width: 500px;
}
</style>
<script type="text/javascript">
<!--
pic1= new Image(20,20);
pic1.src="Clean_and_Brite-images/corner_pink.jpg";
//-->
</script>
</head>
<body>
<div id="container">
<div id="header">
<span>sitename.com</span>
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">My weblog</a></li>
<li><a href="index.html">Projects</a></li>
<li><a href="index.html">Gallery</a></li>
<li><a href="index.html">Forums</a></li>
<li><a href="index.html">About this site</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>
</div>
<h1>Clean and Brite</h1>
<p>This template is called 'Clean and Brite', and that's exactly what it is!
It's a template with an overuse of whitespace and some small details to make
it a bit less boring ;) This is my third template for OSWD.org. Let's hope it
scores just as good as my <a href="http://oswd.org/viewdesign.phtml?id=2250&referer=%2Fmost_popular.phtml" title="View my previous template for OSWD.org">previous template</a>!
</p>
<p>
I've used 2 images to create this template. One is the smiley,
the other one the rounded corner in the menu.
The page is <a href="http://validator.w3.org/check/referer" title="Check this page for XHTML 1.0 Strict validity">XHTML 1.0 Strict</a> valid and the CSS has only one IE-hack! Yes, one!
The menu is taken from MaxDesign's <a href="http://css.maxdesign.com.au/listamatic/" title="MaxDesign's Listamatic Homepage">Listamatic</a>.
</p>
<p>
In Mozilla Firefox, or any other webstandard compliant browser,
the footer is positioned fixed on the bottom of the page, no matter how much
you stuff into the site. In IE the footer positions right under the container div,
but that doesn't look wrong. All fontsizes are in em's, not in px, so it's possible
to increase fontsizes in any browser, to accomplish some accesibility standards.
</p>
<img class="line" src="Clean_and_Brite-images/line.jpg" width="250" height="20" alt="" />
<p>
I talk a lot... Enjoy this template and if you ever use it, please <a href="mailto:amy2k5@gmail.com" title="mail me, if you use this template... Thanks! ;-)">let me know</a>, thanks!
</p>
<div id="cutsquare">this div is called cutsquare.<br /> I Wonder why..? ;-)</div>
<p>Donec gravida. Ut volutpat diam nec velit. Duis arcu. Duis sed nunc
nec ligula accumsan pellentesque. Nullam vitae diam. Nulla varius eros
nec arcu. Pellentesque at ligula a risus auctor euismod. Nunc diam
diam, varius id, malesuada nec, porttitor quis, lorem. Aenean lorem.
Aliquam ut est eu nisl ultricies vestibulum. Phasellus nisi felis,
posuere sed, rutrum at, pellentesque vel, magna. Aenean condimentum
aliquet libero. Morbi sapien lorem, lobortis sit amet, faucibus sit
amet, bibendum sed, justo. Etiam libero. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Sed
dui enim, dignissim nec, rutrum eget, sollicitudin vel, justo. Integer
eu est at arcu eleifend ultrices. Donec non magna. Maecenas a ante in
velit ornare ultricies.
</p>
<h1>Curabitur lacus dui</h1>
<div class="attention">
<p>Ut id arcu. Curabitur dignissim tellus quis augue. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vivamus velit. Pellentesque venenatis rhoncus nisl. Vestibulum vitae
dui. Mauris sagittis tortor a enim. Curabitur lacus dui, consequat sit
amet, iaculis nec, scelerisque id, diam. Etiam nisi augue, suscipit
vitae, malesuada in, pretium vitae, quam. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum egestas mi eu est pharetra sagittis. Aliquam erat volutpat.
In lectus nisi, sagittis at, congue quis, congue et, tellus. Maecenas
eget pede sit amet metus fringilla fermentum. Suspendisse potenti.
Aliquam leo libero, euismod a, vestibulum ac, posuere quis, urna. Donec
molestie.
</p>
</div>
<img class="line" src="Clean_and_Brite-images/line.jpg" width="250" height="20" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
tincidunt enim in nibh. Morbi vel mauris at arcu varius pellentesque.
Pellentesque ut sem. Suspendisse et nunc cursus risus consequat
pellentesque. Proin lacus sem, ultrices eu, gravida eget, fringilla ac,
leo. Aliquam orci velit, pharetra sit amet, adipiscing at, feugiat a,
magna. Sed venenatis. Sed dignissim pellentesque nibh. Cras fermentum,
magna porttitor mollis aliquet, risus orci mollis magna, vitae
ultricies eros neque id metus. Sed adipiscing, leo sed viverra
venenatis, enim elit volutpat enim, eget blandit erat purus in augue.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras
consectetuer, risus vitae aliquet ullamcorper, neque elit fermentum
ante, ac rutrum tellus leo eget nibh. In leo leo, sagittis in,
ultricies vel, consectetuer a, erat. In egestas erat.
</p>
<div id="floatlist">
<span id="floatspan">My favorite links</span>
<ul>
<li><a href="#">this should be your cool link</a></li>
<li><a href="#">this should be your cool link</a></li>
<li><a href="#">this should be your cool link</a></li>
<li><a href="#">this should be your cool link</a></li>
<li><a href="#">this should be your cool link</a></li>
<li><a href="#">this should be your cool link</a></li>
</ul>
</div>
<p>Sed sed tellus. Cras a nisl vitae dui mattis sagittis. Phasellus
ornare lacinia eros. Aenean risus elit, pellentesque sit amet, suscipit
ac, iaculis eget, erat. Sed <a href="#">lorem</a> augue, ullamcorper sed, faucibus id,
convallis malesuada, erat. Quisque dictum tellus eget tortor. Sed sed
lectus. Donec dignissim. Phasellus augue dolor, consectetuer in,
imperdiet non, lobortis id, dolor. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque
eget elit. Maecenas vitae est. Fusce in mi. Cras laoreet tempor enim.
Cras leo sem, tempus fermentum, tempor in, condimentum euismod, velit.
Nullam sed turpis vel quam semper molestie. Donec id libero. Aenean et
tortor eu libero feugiat scelerisque.
</p>
<div id="spacer"></div>
<div id="footer">website created by <a href="http://www.jmstudio.nl" title="Author's homepage">JMstudio.nl</a></div>
</div>
</body>
</html>
Related examples in the same category