Corporate_Design
<!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 : Corporate Design
Description: A two-column, fixed-width design with brown color scheme. Great for corporate and personal websites.
Version : 1.0
Released : 18-09-2010
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Corporate Design by 100 Web Hosting</title>
<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: 0;
padding: 0;
background: #ffffff url(Corporate_Design-images/header_back.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #41302d;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #534616;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #97210c;
}
a:hover {
text-decoration: underline;
}
#wrapper {
width: 960px;
margin: 0 auto;
padding: 0;
}
/* Header */
#header {
width: 960px;
height: 108px;
margin: 0 auto;
}
/* Logo */
#logo {
float: left;
height: 62px;
margin: 0;
padding-top: 18px;
color: #FFFFFF;
}
#logo h1, #logo p {
margin: 0;
padding: 0;
}
#logo h1 {
float: left;
letter-spacing: -1px;
font-size: 2.8em;
}
#logo p {
margin: 0;
padding: 42px 0 0 0px;
font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #FFFFFF;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #ffffff;
}
/* Menu */
#menu {
width: 960px;
height: 35px;
margin: 0 auto;
padding: 0;
}
#menu ul {
margin: 0;
padding: 4px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
height: 35px;
}
#menu a {
display: block;
margin-right: 1px;
padding: 14px 30px 7px 30px;
background: url(Corporate_Design-images/bar.jpg) no-repeat right 18px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #754941;
text-decoration: none;
}
#menu .current_page_item a {
}
#menu a:hover {
text-decoration: underline;
}
/* Page */
#page {
width: 960px;
margin: 0 auto;
padding: 40px 0px 0px 0px;
}
#page-bgtop {
}
#page-bgbtm {
}
/* Content */
#content {
float: left;
width: 670px;
padding: 0;
}
.post {
margin-bottom: 25px;
padding: 0px;
background: #FFFFFF;
}
.post-bgtop {
}
.post-bgbtm {
}
.post .title {
height: 35px;
margin-bottom: 10px;
padding: 12px 0 0 20px;
background: #e0c6c1;
border: 1px solid #b4a09d;
letter-spacing: -.5px;
color: #FFFFFF;
}
.post .title a {
color: #48390E;
border: none;
}
.post .meta {
padding-bottom: 5px;
padding-left: 20px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: italic;
}
.post .meta a {
}
.post .entry {
padding: 0px 20px 20px 20px;
padding-bottom: 20px;
text-align: justify;
}
.links {
display: block;
width: 100px;
height: 20px;
margin-top: 20px;
text-align: center;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
}
/* Sidebar */
#sidebar {
float: right;
width: 240px;
padding: 0px;
color: #41302d;
}
#sidebar ul {
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#about {
margin-bottom: 30px;
padding: 0px 20px 20px 20px;
background: #f7e9e7;
border-left: 1px solid #513631;
border-right: 1px solid #513631;
border-bottom: 1px solid #513631;
}
#sidebar li ul {
margin-bottom: 30px;
padding: 0px 20px 20px 20px;
background: #f2ecea;
border-left: 1px solid #e1b4ab;
border-right: 1px solid #e1b4ab;
border-bottom: 1px solid #e1b4ab;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dashed #D1D1D1;
padding-left: 3px;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar h2 {
height: 38px;
padding: 12px 0 0 20px;
background: #724945;
border: 1px solid #513631;
letter-spacing: -.5px;
color: #ffffff;
}
#sidebar p {
margin: 0 0px;
padding: 0px 20px 20px 20px;
text-align: justify;
}
#sidebar a {
color: #7d2516;
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
width: 960px;
height: 64px;
margin: 0 auto;
background: url(Corporate_Design-images/footer.jpg) no-repeat left top;
padding: 0px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
}
#footer p {
margin: 0;
padding-top: 18px;
line-height: normal;
font-size: 12px;
text-align: center;
}
#footer p span {
font-size: 10px;
}
#footer a {
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="#">Corporate Design</a></h1>
<p>design by 100 Web Hosting</p>
</div>
</div>
<!-- end #header -->
<div id="menu">
<ul>
<li class="current_page_item"><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>
<!-- end #menu -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Corporate Design</a></h2>
<div class="entry">
<img src="Corporate_Design-images/corporate-design.jpg" alt="Corporate Design" />
<br /><br />
<p>This is <strong>Corporate Design</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 <a href="http://www.100webhosting.com">100 Web Hosting</a> - an independent web hosting reviews, ratings and comparison resource.</p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
<div class="entry">
<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>
<div style="clear: both;"> </div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul id="about">
<li>
<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>
</li>
</ul>
<ul>
<li>
<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>
</li>
<li>
<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>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
</div>
</div>
<!-- end #page -->
</div>
<div id="footer">
<!-- Please leave the link to http://www.100webhosting.com intact -->
<p>
Copyright © 2010. All rights reserved. Designed by <a href="http://www.100webhosting.com/"><strong>100 Web Hosting</strong></a><br />
<span>Best viewed in Mozilla Firefox and Internet Explorer 8 and above.</span>
</p>
</div>
<!-- end #footer -->
</body>
</html>
Related examples in the same category