Modern_Theme
<!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 : Modern Theme
Description: A two-column, fixed-width design with red and dark blue color scheme. Great for corporate and personal websites.
Version : 1.0
Released : 06-11-2010
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Modern Theme by Best Web Host</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Best Web Host
http://www.100webhosting.com
Released for free under a Creative Commons Attribution 3.0 License
*/
*{
margin: 0em;
padding: 0em;
}
h1,h2 {
}
a {
color: #a43726;
}
a:hover {
color: #a46126;
text-decoration: none;
}
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 11pt;
background: #fff;
color: #665555;
}
#outer {
margin: 0em auto 1em auto;
width: 100%;
background-color: #fff;
}
#header {
padding: 1.5em 2em 1.5em 4em;
background: #2E2017 url('Modern_Theme-images/header.jpg') top left repeat-x;
}
#header h1 {
font-size: 2.2em;
}
#header h1, #header h2 {
display: block;
width: 778px;
margin: 0em auto;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header h2 {
color: #bbaa77;
font-size: 1.1em;
}
#menu {
padding: 1em 2em 1em 0em;
background: #F1DFC9 url('Modern_Theme-images/menu.gif') top left repeat-x;
font-size: 0.9em;
height: 27px;
}
#menu ul {
display: block;
width: 778px;
margin: 0em auto;
list-style: none;
padding-left: 2.5em;
}
#menu li {
display: inline;
}
#menu li a {
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
padding: 0.25em 0.75em 0.25em 0.75em;
}
#menu li a:hover {
background: #342117 url('Modern_Theme-images/hover.gif') top left repeat-x;
color: #fffdc6;
}
#content {
width: 778px;
margin: 0em auto;
}
#content p {
margin-bottom: 1.5em;
text-align: justify;
}
#content h2,h3,h4,h5,h6 {
color: #353e49;
margin-bottom: 1em;
}
#content ul {
margin-bottom: 1.5em;
padding-left: 1em;
}
#content blockquote {
padding-left: 1em;
margin-bottom: 1.5em;
border-left: solid 7px #b8c2cd;
}
#content blockquote p {
margin-bottom: 0em;
}
#mainContentContainer {
float: left;
margin-left: -17em;
width: 100%;
}
#mainContent {
margin: 0em 0em 0em 16.5em;
padding: 1.5em;
}
#mainContent h2, #mainContent h3 {
padding-bottom: 0.25em;
margin-bottom: 1.25em;
display: block; background: url(Modern_Theme-images/title-bottom.gif) repeat-x bottom;
}
#mainContent h2 {
font-size: 1.7em;
}
#mainContent h3 {
font-size: 1.2em;
}
#sidebar {
float: right;
width: 14em;
padding: 1.5em 2em 1.5em 2em;
font-size: 0.9em;
}
#sidebar h3 {
background: #ffffff url('Modern_Theme-images/sidebar-header.gif') top left no-repeat;
height: 34px;
color: #fff;
padding: 0.5em 0.5em 0em 1.0em;
position: relative;
left: -0.8em;
margin-right: -1.6em;
font-size: 1.1em;
}
#footer {
padding: 1.5em 2em 1.5em 2em;
text-align: center;
width: 778px;
margin: 0em auto;
border-top: solid 1px #efeecc;
font-size: 0.9em;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1><a href="#">Modern Theme</a></h1>
<h2>by Best Web Host</h2>
</div>
<div id="menu">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="mainContentContainer">
<div id="mainContent">
<h2>Welcome to My New Website!</h2>
<p>This is <strong>Modern Theme</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 <a href="http://www.100webhosting.com">Best Web Host</a> - 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>
<li><a href="#">GoDaddy 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 magna. Nulla adipiscing justo eu erat.</p>
<p>Phasellus elementum nibh vel odio. Proin orci nulla, viverra tempus, pharetra ut, varius nec, justo. Donec euismod molestie erat.</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>
<div id="sidebar">
<h3>About Us</h3>
<p>We provide corporate and government agencies with top customer support, dedicated and customised solutions coupled with up-to-date technologies.</p>
<h3>Our Services</h3>
<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>
<h3>Latest Clients</h3>
<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>
<h3>Featured Articles</h3>
<ul>
<li><a href="#">Alesuada suspendisse lorem</a></li>
<li><a href="#">Donec maecenas arcu luctus enim</a></li>
<li><a href="#">Eu ipsam sodales mi</a></li>
<li><a href="#">Lorem quam justo nisl</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<!-- Please leave the link to http://www.100webhosting.com intact -->
<p>Copyright © 2010 Yourwebsite.com. Template Design by <a href="http://www.100webhosting.com/">Best Web Host</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category