Elegant_Style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Alicia A Jasmine
http://www.100webhosting.com
Released for free under a Creative Commons Attribution 3.0 License
Name : Elegant Style
Description: A three-column, fixed-width design with elegant color scheme. Main menu at the top. Sub menu navigation at the right.
Version : 1.0
Released : 04 December 2010
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Elegant Style by Best Web Host</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Alicia A Jasmine
http://www.100webhosting.com
Released for free under a Creative Commons Attribution 3.0 License
*/
body {
margin: 11px 0 0 0;
padding: 0;
background: #ffffff url(Elegant_Style-images/header.gif) repeat-x;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif, Arial, Helvetica, sans-serif;
font-size: 11pt;
text-align: justify;
color: #666666;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
color: #000000;
}
p, ul, ol, blockquote {
margin-top: 0;
}
a {
color: #976d25;
text-decoration: underline;
}
a:hover {
color: #574320;
text-decoration: underline;
}
/* Header */
#header {
width: 720px;
height: 161px;
margin: 0 auto;
background: url(Elegant_Style-images/img2.jpg) no-repeat;
}
#header * {
text-decoration: none;
text-align: center;
color: #000000;
}
#header h1 {
padding-top: 40px;
font-size: 3em;
}
#header h2 {
font-size: 1.0em;
}
/* Menu */
#menu {
width: 960px;
height: 55px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
}
#menu a {
width: 147px;
height: 21px;
background: #342117 url('Elegant_Style-images/menu.gif') top left repeat-x;
display: block;
float: left;
margin-right: 2px;
text-align: center;
padding: 7px 1px 0 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
#menu li a:hover {
background: #342117 url('Elegant_Style-images/hover.gif') top left repeat-x;
color: #fffdc6;
}
/* Content */
#content {
width: 960px;
margin: 0 auto;
}
#colOne {
float: left;
width: 200px;
}
#colTwo {
float: left;
width: 450px;
padding: 0 50px;
}
#colThree {
float: left;
width: 210px;
}
/* Content Elements */
#content h1 {
font-size: 1.4em;
padding-bottom: 15px;
}
#content h2 {
background: #ffffff url('Elegant_Style-images/sidebar-header.gif') top left no-repeat;
height: 34px;
color: #fff;
padding: 0.5em 0.5em 0em 1.0em;
position: relative;
margin-right: -1.6em;
font-size: 1.1em;
}
#content h3 {
text-transform: uppercase;
letter-spacing: normal;
font-size: 12pt;
color: #555555;
padding-top: 15px;
}
#colOne h3 {
text-transform: uppercase;
font-size: 12pt;
color: #9b0c34;
padding-top: 15px;
}
#colOne h4 {
letter-spacing: normal;
font-size: 10px;
color: #45728c;
}
#colThree p, ul {
font-size: 10pt;
padding-bottom: 15px;
}
#content ul {
margin-left: 0;
padding-left: 0;
list-style: square inside;
}
#content blockquote {
padding-left: 1em;
margin-bottom: 1.5em;
border-left: solid 7px #b8c2cd;
}
#content blockquote p {
margin-bottom: 0em;
}
/* Footer */
#footer {
height: 70px;
padding: 15px 0 0 0;
background: url(Elegant_Style-images/footer.gif) repeat-x;
color: #fff;
}
#footer p {
text-align: center;
font-size: 10pt;
padding-top: 10px;
}
#footer a {
color: #e8e0d9;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="#">ELEGANT STYLE</a></h1>
<h2>by Best Web Host</h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Products</a></li>
<li><a href="#" title="">Services</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="colOne">
<h2>Latest News</h2>
<img src="Elegant_Style-images/picture.jpg" alt="Picture" />
<h3>Suscipit et</h3>
<h4>02 December 2010</h4>
<p>Phasellus elementum nibh vel odio. Proin orci nulla. <a href="#">More…</a></p>
<h3>Aendis tents</h3>
<h4>15 November 2010</h4>
<p>Pharetra ut, varius nec, justo. Donec euismod molestie erat. <a href="#">More…</a></p>
<h3>Nunc pellent</h3>
<h4>25 October 2010</h4>
<p>Quisque elementum convallis purus. Suspendisse lorem ipsum dolorem potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="#">More…</a></p>
</div>
<div id="colTwo">
<h1>Welcome to My Website!</h1>
<p>This is <strong>Elegant Style</strong>, a standards-compliant CSS template designed by <a href="http://www.100webhosting.com/">Best Web Host</a>. This web template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, so you are free to use it for your website (even use it commercially) provided you keep the links in the footer intact. Other than that, you can customize it freely.</p>
<p>If you plan to get a web hosting plan, make sure you check out <strong>Best Web Host</strong> - an independent web hosting reviews, ratings and comparison resource.</p>
<h3>Some Repliable Web Hosts</h3>
<ul>
<li><a href="#">iPage web hosting</a></li>
<li><a href="#">BlueHost web hosting</a></li>
<li><a href="#">HostGator web hosting</a></li>
</ul>
<h3>Lorem ipsum sed aliquam</h3>
<blockquote>
<p>Etiam vehicula, augue eu ultricies dictum, orci nisi suscipit sem, nec sollicitudin neque est ac massa. Phasellus elementum nibh vel odio. Proin orci nulla, viverra tempus, pharetra ut, varius nec, justo. Donec euismod molestie erat. Nulla lobortis bibendum.</p>
</blockquote>
<p>Etiam vehicula, augue eu ultricies dictum, orci nisi suscipit sem, nec sollicitudin neque est ac massa. Phasellus elementum nibh vel odio.</p>
</div>
<div id="colThree">
<h2>About Us</h2>
<p>We provide corporate and government agencies with top customer support, dedicated and customised solutions coupled with up-to-date technologies.</p>
<h2>Our Services</h2>
<ul>
<li><a href="#">Starter Web Hosting</a></li>
<li><a href="#">Business Web Hosting</a></li>
<li><a href="#">VPS Servers</a></li>
<li><a href="#">Dedicated Servers</a></li>
<li><a href="#">Templated Web Design</a></li>
<li><a href="#">Custom Web Design</a></li>
</ul>
<h2>Latest Clients</h2>
<ul>
<li><a href="#">Top 100 Web Hosting</a></li>
<li><a href="#">Free Web Templates</a></li>
<li><a href="#">WordPress Themes</a></li>
<li><a href="#">Company Name</a></li>
<li><a href="#">Another Company Name</a></li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<!-- Please leave the link to http://www.100webhosting.com intact. Thank you very much. -->
<p>Copyright © 2010 Elegant Style. Designed by <a href="http://www.100webhosting.com/" title="Best Web Host"><strong>Best Web Host</strong></a></p>
</div>
</body>
</html>
Related examples in the same category