minty
<!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" xml:lang="en" lang="en">
<head>
<title>Minty</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type='text/css'>
* { margin: 0; padding: 0; }
body {
margin: 0px; padding: 0px;
color: #333;
background: #e5e5e5 url(minty-images/bg.png) repeat-x;
}
a, a:visited {
text-decoration: none;
color: #595959;
}
#content a, #content a:visited {
text-decoration: none;
border-bottom: 1px dotted #595959;
color: #595959;
}
#content a:hover {
text-decoration: underline;
}
#wrapper {
width: 100%;
margin: 0; padding: 0;
}
#container {
width: 980px;
margin: 0px auto;
}
#header-{
font-size: 50px;
font-weight: bold;
font-variant: small-caps;
color: #99c23a;
margin: 5px 0px 0px 0px;
}
#subheader-{
font-size: 16px;
font-style: italic;
font-weight: lighter;
color: #b8e06d;
margin: 5px 0px 12px 0px;
padding-left: 10px;
}
#nav {
color: #595959;
position: absolute;
top: 100px;
height: 29px;
display: block;
float: left;
margin: 0px auto;
}
#nav ul {
font: bold 13px 'Trebuchet MS', Arial, Sans-serif;
list-style: none;
margin: 0px;
}
#nav li {
float: left;
margin: 0px; padding: 0px;
}
#nav li a {
display: block;
float: left;
color: #595959;
text-decoration: none;
padding: 4px 10px 6px 10px;
margin: 0px 0px 20px 0px;
}
#nav li a:hover {
background: #b8e06d;
}
#nav li a.current {
color: #000000;
text-decoration: none;
background: #b8e06d;
}
#maincontainer {
clear: none;
}
#sidenav {
width: 200px;
background: #b8e06d;
border: 1px solid #E1E1E1;
float: left;
margin: 50px 0px 5px 0px;
}
#sidenav p {
padding: 5px 10px 15px 10px;
clear: both;
}
#sidenav ul.menu {
list-style: none;
text-align: left;
margin: 0px;
padding: 0;
text-decoration: none;
display: block;
font-family: 'Trebuchet MS', Arial, Sans-serif;
}
#sidenav ul.menu li{
border-bottom: 1px solid #E1E1E1;
padding: 0px;
margin: 0px;
float: left;
}
#sidenav ul.menu li.title {
background: #595959;
color: #b8e06d;
padding: 3px 5px 3px 10px;
width: 185px;
float: left;
font-weight: bold;
}
#sidenav ul.menu a {
width: 186px;
border-bottom: none;
float: left;
padding: 2px 5px 2px 9px;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
}
#sidenav ul.menu a:hover {
width: 186px;
background: #E1E1E1;
}
#sidenav a {
color: #777777;
text-decoration: none;
border-bottom: 1px dotted #000000;
}
#sidenav a:hover {
color: #000000;
border-bottom: 1px solid #000000;
}
#content {
width: 750px;
float: right;
clear: none;
margin: 50px 0px 5px 0px;
}
#content h2 {
width: 100%;
border-bottom: 2px solid #595959;
color: #595959;
font-size: 24px;
margin-bottom: 10px;
}
#content p {
padding: 0px 10px 20px 10px;
}
#footer {
float: left;
clear: both;
width: 100%;
text-align: center;
border-top: 3px solid #b8e06d;
background: #595959;
color: #b8e06d;
padding: 5px 0px 5px 0px;
}
/* FORM ELEMENTS */
form {
margin: 10px;
padding: 0 5px;
border: 1px solid #595959;
background-color: #b8e06d;
width: 426px;
}
label {
display: block;
font-weight: bold;
margin: 5px 0;
color: #595959;
}
input {
padding: 2px;
border: 1px solid #595959;
color: #777;
}
textarea {
width: 400px;
padding: 2px;
border: 1px solid #595959;
height: 100px;
display: block;
color: #777;
}
input.button {
margin: 0;
font: bolder 12px Arial, Sans-serif;
padding: 1px;
background: #595959;
color: #b8e06d;
}
/* search */
form.search {
background: transparent;
border: none;
margin: 0; padding: 0;
}
form.search input.textbox {
margin: 0;
width: 115px;
border: 1px solid #595959;
background: #FFF;
color: #333;
vertical-align: top;
}
form.search input.button {
width: 55px;
vertical-align: top;
color: #b8e06d;
background: #595959;
border: 1px solid #595959;
}
blockquote {
margin: 20px;
padding: 0 15px;
background: #595959;
border-left: 3px solid #b8e06d;
font-weight: bold;
color: #b8e06d;
}
.code {
margin: 20px;
padding: 5px 15px;
font: lighter 11px Verdana;
line-height: 14px;
background: #e1e1e1;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">Minty</div>
<div id="subheader">Providing A Long Lasting Freshness...</div>
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/" class="current">home</a></li>
<li><a href="http://www.free-css.com/">Articles</a></li>
<li><a href="http://www.free-css.com/">Archives</a></li>
<li><a href="http://www.free-css.com/">Pages</a></li>
<li><a href="http://www.free-css.com/">Categories</a></li>
<li><a href="http://www.free-css.com/">Documentation</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Email</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
</div>
<div id="maincontainer">
<div id="sidenav">
<ul class="menu">
<li class="title">Other Sites</li>
<li><a href="http://www.free-css.com/">Digg</a></li>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">sNews</a></li>
<li><a href="http://www.free-css.com/">Wordpress</a></li>
</ul>
<p>Integer semper molestie est. Duis scelerisque rhoncus magna. Aliquam erat volutpat. Nunc dignissim, massa at sodales euismod, <a href="http://www.free-css.com/">lorem turpis</a> accumsan ipsum, sit amet malesuada pede purus id lectus.</p>
<form method="post" class="search" action="#">
<p>
<input type="text" name="search_query" class="textbox" />
<input type="submit" name="search" class="button" value="Search" />
</p>
</form>
</div>
</div>
<div id="content">
<h2>Generic Blog Design</h2>
<p>This is my first submission to <a href="http://www.free-css.com/">The Open Design Community</a>. Feel free to use it however you like. The only thing I ask is that you leave a link to my site http://summitr.com/ somewhere on your site. I don't really care where it is. You can add it in the footer, a links section on the sidebar, or on a links page. This Design is probably best used for a personal blog. I don't think the colors really lend themselves to a business site. I plan on porting this to Wordpress at sometime in the future. Oh yeah, this Design is Valid XHTML 1.0 Strict and CSS.</p>
<p>Morbi vel turpis eget diam gravida laoreet. Integer varius, est egestas mollis suscipit, felis enim sagittis lectus, vitae luctus lectus urna a urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus posuere. Nullam mauris. Ut augue justo, laoreet non, suscipit ac, commodo quis, leo. Cras vestibulum, risus non bibendum consequat, lorem turpis lacinia purus, ut adipiscing nibh nibh sagittis sapien. Integer et ante eget erat suscipit viverra. Aliquam imperdiet tempus mauris. Quisque odio libero, luctus vel, vulputate nec, scelerisque eu, nunc. Etiam lorem tellus, bibendum vitae, mattis sit amet, congue et, metus.</p>
<h2>How About A Form?</h2>
<form action="#">
<p>
<label>Name</label>
<input name="dname" value="Your Name" type="text" size="30" />
<label>Email</label>
<input name="demail" value="Your Email" type="text" size="30" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" />
</p>
</form>
<h2>Maybe a Blockquote or a Code Box?</h2>
<blockquote>
<p>Morbi vel turpis eget diam gravida laoreet. Integer varius, est egestas mollis suscipit, felis enim sagittis lectus, vitae luctus lectus urna a urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus posuere. Nullam mauris. Ut augue justo, laoreet non, suscipit ac, commodo quis, leo. Cras vestibulum, risus non bibendum consequat, lorem turpis lacinia purus, ut adipiscing nibh nibh sagittis sapien. Integer et ante eget erat suscipit viverra. Aliquam imperdiet tempus mauris. Quisque odio libero, luctus vel, vulputate nec, scelerisque eu, nunc. Etiam lorem tellus, bibendum vitae, mattis sit amet, congue et, metus.</p>
</blockquote>
<div class="code">blockquote {<br />
margin: 20px;<br />
padding: 0 15px;<br />
background: #595959;<br />
border-left: 3px solid #b8e06d;<br />
font-weight: bold;<br />
color: #b8e06d;<br />
}</div>
<p>Sed eleifend nulla ac lectus. Donec id lorem nec mauris dictum ultrices. Donec id nulla. Cras magna. Nullam leo justo, condimentum a, lacinia vitae, dignissim eget, arcu. Etiam molestie. Suspendisse potenti. Proin laoreet ante sit amet mi. Phasellus diam mauris, congue sit amet, vestibulum sit amet, porttitor viverra, est. Vestibulum sodales, magna at egestas adipiscing, libero sem dapibus turpis, blandit consequat odio pede quis lacus. Donec consequat aliquet magna. Sed interdum, felis eu elementum dictum, eros pede bibendum massa, at condimentum odio elit non felis. Maecenas arcu pede, accumsan venenatis, ornare id, mattis in, odio. Donec sed sem ac sem vulputate iaculis. Praesent quis massa sit amet velit elementum vestibulum.</p>
<p>Donec mollis gravida metus. Cras faucibus aliquet purus. Cras tortor diam, dictum nec, mollis vitae, consectetuer ut, mauris. Vestibulum vel ante. Phasellus sollicitudin bibendum orci. Nulla eu turpis ac justo iaculis convallis. Morbi molestie ullamcorper velit. Integer eu pede. Cras ultricies, lectus a lacinia malesuada, metus elit cursus dui, vitae rhoncus arcu velit non quam. Aenean sit amet libero.</p>
<p>Mauris venenatis, arcu in hendrerit cursus, felis tortor porta sapien, ac hendrerit elit diam sed purus. Nullam eu enim. Praesent magna. Integer a felis a quam pulvinar lobortis. Proin porttitor dolor ac mauris. Morbi sapien lorem, gravida ac, fermentum in, pellentesque ut, eros. Etiam bibendum nisi sit amet turpis. Maecenas sit amet massa. Vivamus massa justo, vulputate tempor, scelerisque vel, sollicitudin eu, orci. Vivamus facilisis.</p>
<p>Proin dapibus sem eu magna. Etiam non lorem. Nulla scelerisque nisl a nisl. Maecenas in ante. Integer mollis, eros ac auctor ultricies, purus erat blandit nisi, id mattis eros ante id odio. Vivamus eleifend auctor velit. Donec nisi neque, eleifend vitae, tempor id, venenatis ac, eros. Ut id nisl vel est viverra pulvinar. Etiam nulla. Vestibulum quis lacus. In aliquet ipsum vel libero. Curabitur eget velit.</p>
</div>
</div>
<div id="footer">Copyright 2007 Summitr Designs</div>
</div>
</body>
</html>
Related examples in the same category