winter-olympics
<!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" xml:lang="en" lang="en">
<head>
<title>Winter Olympics | About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* TAGS */
* {margin:0;padding:0}
html {min-width:944px}
body {background:#fff;font-family:Tahoma, Arial, helvetica, sans-serif;font-size:100%;line-height:1em;color:#5e5e5e;min-width:944px;padding-bottom:20px}
object {vertical-align:top;outline:none}
input, textarea, select {font-family:Tahoma, Arial, helvetica, sans-serif;font-size:1em;vertical-align:middle;font-weight:normal}
fieldset {border:0}
p {margin:0;padding:0}
img {border:0;vertical-align:top;text-align:left}
/* GLOBAL */
#header, #content, #footer {font-size:0.75em;width:944px;margin:0 auto}
.col-1, .col-2, .col-3 {float:left}
/* ALIGMENT */
.fleft {float:left}
.fright {float:right}
.clear {clear:both}
.alignright {text-align:right}
.aligncenter {text-align:center}
.wrapper {width:100%;overflow:hidden}
.container {width:100%}
/* FORMS */
#form .form {height:20px;width:100%;overflow:hidden}
#form label, #form input {float:left}
#form input {width:15px;height:15px;margin-right:9px}
#form .button {padding-top:20px;text-align:center}
#form .button a {display:inline-block;cursor:pointer;background:url(winter-olympics-images/link-tail.gif) repeat-x left top;text-decoration:none;color:#fff}
#form .button a span {color:#092972;display:block;margin:-17px 0 0 -1px}
#form .button a em {display:inline-block;background:url(winter-olympics-images/link-left.gif) no-repeat left top}
#form .button a b {display:inline-block;padding:6px 28px 7px 28px;font-style:normal;background:url(winter-olympics-images/link-right.gif) no-repeat right top}
#form .button a:hover span {margin:-17px 0 0 -1px;text-decoration:underline;color:#092972}
/* */
#contacts-form {clear:right;width:100%;overflow:hidden}
#contacts-form fieldset {border:none;float:left}
#contacts-form .field {width:100%;overflow:hidden}
#contacts-form label {float:left;width:97px;font-weight:bold;color:#092972;line-height:22px}
#contacts-form input {width:225px;float:left;padding:1px 0 1px 3px;background:url(winter-olympics-images/png-bg.png) left top;border:1px solid #d9d9d9;color:#000}
#contacts-form textarea {width:496px;float:left;height:443px;padding:1px 0 1px 3px;border:1px solid #d9d9d9;color:#000;overflow:auto}
#contacts-form a {color:#092972}
#contacts-form .alignright {padding-top:15px}
/* LISTS */
ul, ol {list-style:none}
.banner-list {position:absolute;left:0;top:150px;width:346px}
.banner-list ul li {width:100%;overflow:hidden;vertical-align:top;background:url(winter-olympics-images/banner-tail.gif) repeat-x left top #e1efff}
.banner-list ul li a {color:#363636;text-decoration:none;height:109px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:22px 7px}
.banner-list ul li a span {display:block;padding:16px 26px 0 132px;height:1%}
.banner-list ul li a strong {display:block;font-weight:normal;font-size:25px;line-height:1.2em;text-transform:uppercase;color:#092972;padding-bottom:6px}
.banner-list ul li a:hover {background-position: 240px 7px}
.banner-list ul li a:hover span {padding-left:26px;padding-right:132px}
/* style1 */
.banner-list ul li.style1 a {height:113px}
.banner-list ul li.style1 a {background-image:url(winter-olympics-images/icon1.gif)}
/* style2 */
.banner-list ul li.style2 a {background-image:url(winter-olympics-images/icon2.gif)}
/* style3 */
.banner-list ul li.style3 a {background-image:url(winter-olympics-images/icon3.gif)}
/* */
.site-nav {position:absolute;right:0;top:0}
.site-nav ul li {float:left;font-size:16px;line-height:1.2em;text-transform:uppercase;padding-left:1px}
.site-nav ul li a {color:#092972;display:block;text-align:center;text-decoration:none;width:119px;height:150px;border-bottom:5px solid #e4edff;background-color:#f1f5ff;background-repeat:no-repeat;background-position:center 28px}
.site-nav ul li a span {display:block;padding-top:105px}
.site-nav ul li a:hover, .site-nav ul li a.act {color:#479c23;font-size:20px}
.site-nav ul li a:hover span, .site-nav ul li a.act span {padding-top:107px}
/* style1 */
.site-nav ul li.style1 a {width:118px;background-image:url(winter-olympics-images/m1.gif)}
.site-nav ul li.style1 a:hover, .site-nav ul li.style1 a.act {background-image:url(winter-olympics-images/m1-act.gif)}
/* style2 */
.site-nav ul li.style2 a {background-image:url(winter-olympics-images/m2.gif)}
.site-nav ul li.style2 a:hover, .site-nav ul li.style2 a.act {background-image:url(winter-olympics-images/m2-act.gif)}
/* style3 */
.site-nav ul li.style3 a {background-image:url(winter-olympics-images/m3.gif)}
.site-nav ul li.style3 a:hover, .site-nav ul li.style3 a.act {background-image:url(winter-olympics-images/m3-act.gif)}
/* style4 */
.site-nav ul li.style4 a {background-image:url(winter-olympics-images/m4.gif)}
.site-nav ul li.style4 a:hover, .site-nav ul li.style4 a.act {background-image:url(winter-olympics-images/m4-act.gif)}
/* style5 */
.site-nav ul li.style5 a {background-image:url(winter-olympics-images/m5.gif)}
.site-nav ul li.style5 a:hover, .site-nav ul li.style5 a.act {background-image:url(winter-olympics-images/m5-act.gif)}
/* */
.list {padding-bottom:27px}
.list li {padding-bottom:17px}
.list li b {display:block;padding-bottom:3px}
.list li a {color:#092972;text-decoration:none}
.list li a:hover {text-decoration:underline}
/* */
.list1 li {background:url(winter-olympics-images/icon4.gif) no-repeat left top;padding:0 0 0 86px;min-height:70px;height:auto!important;height:70px;margin-top:24px}
.list1 li b {display:block;padding-bottom:6px}
.list1 li b a {color:#092972;text-decoration:none}
.list1 li b a:hover {text-decoration:underline}
/* */
.list2 {margin-top:-29px}
.list2 li {width:100%;overflow:hidden;vertical-align:top;padding-top:29px}
.list2 li span {display:block;float:left;border:1px solid #b5b5b5;margin-right:15px}
.list2 li b {display:block;padding-bottom:6px}
.list2 li b a {color:#092972;text-decoration:none}
.list2 li b a:hover {text-decoration:underline}
/* */
.list3 {margin-top:-21px}
.list3 li {width:100%;overflow:hidden;vertical-align:top;padding-top:21px}
.list3 li em {display:block;font-style:normal;border:1px solid #fff}
.list3 li span {display:block;float:left;border:1px solid #b5b5b5;margin-right:15px}
.list3 li b {display:block;padding-bottom:6px}
.list3 li b a {color:#092972;text-decoration:none}
.list3 li b a:hover {text-decoration:underline}
/* */
.list4 {padding-bottom:15px;margin:0}
.list4 li {font-weight:bold;padding:0 0 1px 8px;background:url(winter-olympics-images/marker.gif) no-repeat left 6px}
.list4 li a {color:#092972}
.list4 li ul {padding:1px 0 0 0;margin-bottom:-1px}
/* OTHER */
p {margin-bottom:17px}
.p0 {margin-bottom:0}
/* TXT, LINKS, LINES, TITLES */
a {color:#479c23;outline:none}
a:hover {text-decoration:none}
h2 {font-size:30px;line-height:1.5em;color:#092972;text-transform:uppercase;margin:-10px 0 10px 0}
h3 {font-size:20px;line-height:1.2em;text-transform:uppercase;color:#092972;margin-bottom:20px}
h4 {font-size:1em;color:#092972;margin-bottom:25px}
/* BOXES */
.box {background:#fff;width:100%}
.box .border-top {background:url(winter-olympics-images/border-top.gif) repeat-x left top}
.box .left-top-corner {background:url(winter-olympics-images/left-top-corner.gif) no-repeat left top}
.box .right-top-corner {background:url(winter-olympics-images/right-top-corner.gif) no-repeat right top}
.box .inner {padding:25px 28px 0 29px}
/* */
.box1 {width:100%;background:#f5f5f5}
.box1 .inner {padding:26px 30px 28px 29px}
/* HEADER */
#header {height:481px;border-bottom:5px solid #f5f8ff;background:url(winter-olympics-images/header-bg.jpg) no-repeat right bottom;position:relative}
#header .logo {position:absolute;left:6px;top:26px}
/* CONTENT */
#content {padding:35px 0 30px 0}
#content .col-1 {width:296px;margin-right:50px}
#content .col-2 {width:598px}
#content .indent {padding-bottom:10px}
#content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}
/* FOOTER */
#footer {height:88px;background:#f5f8ff;color:#000}
#footer .indent {padding:37px 102px 0 30px}
#footer img {position:relative;top:-4px}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
</head>
<body id="page2">
<div id="main">
<!-- HEADER -->
<div id="header">
<div class="logo"><a href="#"><img src="winter-olympics-images/logo.gif" alt="" /></a></div>
<div class="banner-list">
<ul>
<li class="style1"><a href="#"><span><strong>Ice Sports</strong>Sed ut perspiciatis unde omniiste natus error voluptatem.</span></a></li>
<li class="style2"><a href="#"><span><strong>Snowboarding</strong>Accusantium doloremque laudantium, totamrem.</span></a></li>
<li class="style3"><a href="#"><span><strong>Nordic Events</strong>Eaque ipsa quae ab illo inventore veritatis et quasi architecto.</span></a></li>
</ul>
</div>
<div class="site-nav">
<ul>
<li class="style1"><a href="index.html"><span>Home</span></a></li>
<li class="style2"><a href="about-us.html" class="act"><span>About Us</span></a></li>
<li class="style3"><a href="articles.html"><span>Articles</span></a></li>
<li class="style4"><a href="contact-us.html"><span>ContactS</span></a></li>
<li class="style5"><a href="sitemap.html"><span>Site Map</span></a></li>
</ul>
</div>
</div>
<!-- CONTENT -->
<div id="content">
<div class="inner_copy">More <a href="#">Website Templates</a> @ Templates.com!</div>
<div class="wrapper">
<div class="col-1">
<div class="box">
<div class="border-top">
<div class="left-top-corner">
<div class="right-top-corner">
<div class="inner">
<h3>Latest News:</h3>
<ul class="list">
<li><b><a href="#">February 15, 2010</a></b>Sed ut perspiciatis unde omnis iste natus dolorque laudantium aperiam.</li>
<li><b><a href="#">February 07, 2010</a></b>Eaque ipsa quae ab illo inventore veritatis explicabo emo enim.</li>
<li><b><a href="#">January 31, 2010</a></b>Gpsam voluptatem quia voluptas sit ed quia consequuntur magni dolores eos qui.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="border-top">
<div class="left-top-corner">
<div class="right-top-corner">
<div class="inner">
<h3>Poll:</h3>
<h4>Lorem ipsum dolor sit amet, consecte- tur adipisicing elit?</h4>
<form action="#" method="post" id="form">
<div class="form">
<input type="radio" name="name1" checked="checked" />
<label>Sed do eiusmod tempor incididunt</label>
</div>
<div class="form">
<input type="radio" name="name1" />
<label>Utlabore et dolore magna aliqua</label>
</div>
<div class="form">
<input type="radio" name="name1" />
<label>Enim ad minim veniam</label>
</div>
<div class="form">
<input type="radio" name="name1" />
<label>Quis nostrud exercitation ullamco</label>
</div>
<div class="form">
<input type="radio" name="name1" />
<label>Laboris nisi ut aliquip ex ea commodo</label>
</div>
<div class="button"><a href="#"><em><b>Vote<span>Vote</span></b></em></a></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-2">
<div class="indent">
<h2>About Your Website</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
</div>
<div class="box1">
<div class="inner">
<h3>About Your Team:</h3>
<ul class="list2">
<li><span><img src="winter-olympics-images/2page-img1.jpg" alt="" /></span><b><a href="#">Team Member One</a></b>He is supposed to be the most important member of your team. Ususally this is the person who started the website. Maybe it is worth to write why he made such a desicion, what inspired him and what are his plans for the future.</li>
<li><span><img src="winter-olympics-images/2page-img2.jpg" alt="" /></span><b><a href="#">Another Team Member</a></b>We are completly lost on what he's responsible for but we hope that you know it ;) We also hope that you will tell it to the rest of the world including us by placing some real text here.</li>
<li><span><img src="winter-olympics-images/2page-img3.jpg" alt="" /></span><b><a href="#">The Last Team Member</a></b>We are completly lost on what he's responsible for but we hope that you know it ;) We also hope that you will tell it to the rest of the world including us by placing some real text here.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div id="footer">
<div class="indent">
<div class="fleft">Copyright - Type in Your Name Here</div>
<div class="fright">Designed by: <a href="http://www.templates.com"><img alt="" src="winter-olympics-images/templates-logo.gif" /></a> Your Provider of Website Templates</div>
</div>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
Related examples in the same category