Professional
<!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 : Professional
Description: A two-column, fixed-width design with blue color scheme. Great for corporate, professional and even personal websites.
Version : 1.0
Released : 29-01-2011
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Professional by 100 Web Hosting</title>
<meta name="description" content="" />
<meta name="keywords" 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
*/
* {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
body {
margin: 10px 0;
padding: 0;
background: #EFEFEF;
font-size: 13px;
color: #6B6B6B;
}
a {
color: #3467b4;
}
a:hover {
text-decoration: none;
}
img {
border: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000000;
}
h2 {
margin-bottom: 10px;
border-bottom: 1px solid #F4F4F4;
font-size: 26px;
}
h3 {
margin-bottom: 15px;
padding-bottom: 5px;
font-size: 16px;
border-bottom: 1px solid #F4F4F4;
}
p, ol, ul, blockquote {
line-height: 24px;
}
ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
#header {
width: 917px;
height: 115px;
margin: 0 auto;
background: url(Professional-images/topmiddle.gif) repeat-x;
}
#logo {
float: left;
height: 115px;
padding: 0 0 0 0;
background: url(Professional-images/topleft.gif) no-repeat;
}
#logo * {
text-decoration: none;
}
#logo h1 {
float: left;
padding: 50px 0 0 40px;
font-size: 36px;
}
#logo h1 a {
color: #000000;
}
#logo h1 span a {
font-weight: bold;
color: #33578d;
}
#logo h2 {
float: left;
padding: 72px 0 0 8px;
font-size: 12px;
border: none;
}
#logo h2 a {
color: #B4B4B4;
}
/* Menu */
#menu {
float: right;
height: 45px;
padding: 70px 22px 0 0;
background: url(Professional-images/topright.gif) no-repeat right top;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
padding: 0 15px 0 15px;
border-left: 1px solid #DBDBDB;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
color: #3B3B3B;
}
#menu a:hover {
background: #4c6488;
color: #ffffff;
text-decoration: none;
}
#menu .first a {
border: none;
}
#headershadow {
width: 877px;
height: 170px;
margin: 0 auto;
background: url(Professional-images/headershadow.gif) repeat-x left bottom;
border-right: 20px solid #FFFFFF;
border-left: 20px solid #FFFFFF;
}
/* Content */
#content {
width: 847px;
margin: 0 auto;
padding: 10px 35px 0 35px;
background: #FFFFFF url(Professional-images/bottom.gif) no-repeat left bottom;
}
#maincontent {
float: left;
width: 620px;
}
#sidebar {
float: right;
width: 185px;
padding: 5px 0 0 0;
}
/* Footer */
#footer {
}
#footer p {
text-align: center;
color: #777777;
}
#footer a {
color: #5D5D5D;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><span><a href="#">Professional</a></span></h1>
</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</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="headershadow"><a href="#"><img src="Professional-images/header-picture.jpg" alt="" width="877" height="150" /></a></div>
<div id="content">
<div id="maincontent">
<h2>Welcome to Professional</h2>
<p>This is <strong>Professional</strong>, a standards-compliant CSS template designed by <a href="http://www.100webhosting.com/">100 Web Hosting</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>100 Web Hosting</strong> - an independent web hosting reviews, ratings and comparison resource.</p>
<br />
<h2>Lorem ipsum sed aliquam</h2>
<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>
</div>
<div id="sidebar">
<p></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>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<!-- Please leave the link to http://www.100webhosting.com intact -->
<p>
© 2011 Sitename.com. Design by <a href="http://www.100webhosting.com/">100 Web Hosting</a>.
</p>
</div>
</body>
</html>
Related examples in the same category