TheCorporation
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Corporation</title>
<style type='text/css'>
/* * * * browser equalization / don't mess with this * * * */
* { border: 0; margin: 0; padding: 0; }
/* * * * general * * * */
body {
background-color: #333;
color: #1f1f1f;
font: 0.65em Verdana, Arial, Helvetica, sans-serif;
margin-top: 5px;
text-align: center;
}
/* * * * links * * * */
a { color: #FF310D; font-weight: bold; text-decoration: none; }
a:hover { color: #ad1000; }
a img { border: 1px solid #ccc; margin: 5px; padding: 5px; }
a:hover img { border-color: #db8080 }
/* * * * standard * * * */
h1 {
color: #FF5353;
font-size: 340%;
font-weight: normal;
}
h2 {
background: url(TheCorporation-Images/h2_background.gif) right repeat-y;
border: 1px solid #ccc;
color: #666;
font-size: 220%;
font-weight: normal;
margin: 0.2em 0;
padding: 0.1em 0.2em;
}
.hidden { display: none; }
/* * * * wrap / header * * * */
#wrap {
background-color: #fff;
border: 1px solid #000;
margin: 0 auto;
text-align: left;
width: 700px;
}
#header {
background: url(TheCorporation-Images/Header.jpg) no-repeat;
color: #999;
font-style: italic;
margin: 20px 0 0 10px;
padding: 30px 0 80px 200px;
}
/* * * * top navigation * * * */
#navTop {
padding-right: 10px;
text-align: right;
}
#navTop li {
display: inline;
list-style: none;
}
#navTop li a {
background: #d9d9d9 url(TheCorporation-Images/corner.gif) top left no-repeat;
border-bottom: 2px solid #ccc;
color: #666;
font-weight: bold;
margin: 0.1em;
padding: 0.2em 2.7em;
text-decoration: none;
}
#navTop li a:hover {
border-bottom-color: #d36d70;
color: #333;
}
/* * * * content * * * */
#content {
margin: 5px;
padding: 5px;
}
#content div {
border: 1px solid #ccc;
padding: 10px;
width: 46%;
}
#content div p {
line-height: 1.8em;
}
#content div p img {
cursor: pointer;
margin-left: 10px;
}
/* * * left column * * * */
#column1 { float: left; }
/* * * right column * * */
#column2 { float: right; }
#column2 a img { margin-top: 30px; }
#column2 p span { color: #999; }
#column2 p span.date { font-weight: bold; }
/* * * * footer * * * */
#footer {
clear: both;
font-size: 0.9em;
line-height: 2.4em;
text-align: center;
}
</style>
<style type="text/css" media="all">
@import url(styles.css);
</style>
<!-- I used both stylesheet linking methods so the stylesheet is detected in older browsers as well as newer ones -->
</head>
<body>
<div id="wrap">
<!-- BEGINNING OF CONTAINER -->
<div id="header">
<h1>The Corporation</h1>
we might have a tag line or even a bit of text that can possibly go here
</div>
<div id="navTop">
<h2 class="hidden">Navigation:</h2> <!-- for accessibility purposes -->
<ul>
<li><a href="#" title="Our business"> business </a></li>
<li><a href="#" title="Our global strategy"> strategy </a></li>
<li><a href="#" title="The rules we play by"> beliefs </a></li>
<li><a href="#" title="Blingy Bling"> money </a></li>
<li><a href="#" title="Growth and sales"> statistics </a></li>
</ul>
</div>
<div id="content">
<div id="column1">
<h2> Two columns! </h2>
<p> This is a very simple two-column layout, that uses no tables whatsoever.
It uses <a href="http://validator.w3.org/check?uri=referer">valid
XHTML 1.0 Strict</a> and uses <a href="http://jigsaw.w3.org/css-validator/">valid Cascading Style Sheets</a>. The image rollover
effects work in all modern browsers, including IE, and I've tested the
template in IE, Firefox, K-Meleon, and Opera, works perfectly in all.</p>
<h2>Updated </h2>
<p> This template is updated as of December 16, 2005. I fixed a few minor bugs, made the layout much more flexible, made the font sizes liquid, made the navigation liquid, and modified the layout itself a bit. Most importantly, during this redesign I took accessibility issues to heart, so this page now works well in both no-CSS modes and with larger font sizes. It passed the WCAG AAA Accessibility test and complies with the US governemnt-issued Section 508 Acessibility guidelines. </p>
</div>
<div id="column2">
<h2> News </h2>
<p> <span class="date"> September 5, 2005 </span> <span>|</span> Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Aliquam ullamcorper eros
in felis. Curabitur quis nisl eu dui imperdiet consectetuer. </p>
<p> <span class="date"> August 19, 2005 </span> <span>|</span> Morbi arcu.
Cras sagittis risus nec augue. Sed eu nibh. Sed vitae enim ac tellus
suscipit commodo. </p>
<p> <span class="date"> August 12, 2005 </span> <span>|</span> Nullam quis
ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
vulputate. Donec quam ipsum, lacinia eget, commodo a, volutpat eget,
libero. </p>
<a href="#"> <img src="TheCorporation-Images/keyboard.jpg" alt="" /> </a>
<a href="#"> <img src="TheCorporation-Images/laptop.jpg" alt="" /> </a>
</div>
</div>
<div id="footer">
Design by <a href="http://www.bcdesignplace.com">Boris Cherny</a>. Graphics from <a href="http://www.sxc.hu">sxc.hu</a>.
</div>
<!-- END OF CONTAINER -->
</div>
</body>
</html>
Related examples in the same category