students-site
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student's Site | About Us</title>
<meta charset="utf-8">
<style type='text/css'>
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#454545;
}
html {
min-width:940px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
width:940px;
overflow:hidden;
font-size:.875em;
padding-bottom:176px;
}
header {
background:url(students-site-images/header-bg.jpg) no-repeat center top;
min-width:940px;
}
header .container {
height:194px;
position:relative;
padding:0;
}
section#content {
float:left;
width:691px;
}
aside {
width:219px;
float:left;
margin-right:30px;
padding:5px 0 0 0;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(students-site-images/tail-middle.jpg) repeat-y center 194px;
min-width:940px;
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
fieldset {
border:0;
}
.categories {
padding-bottom:37px;
}
.categories li {
font-weight:bold;
font-size:.857em;
padding-bottom:8px;
margin-bottom:6px;
background:url(students-site-images/divider1.gif) repeat-x left bottom;
}
.categories li.last {
background:none;
padding:0;
margin:0;
}
.categories li span {
display:block;
padding-left:15px;
height:1%;
background:url(students-site-images/marker.gif) no-repeat left 5px;
}
.categories li a {
text-decoration:none;
color:#008cc4;
}
.categories li a:hover {
color:#ff7b01;
}
.news {
margin-top:-25px;
}
.news li {
padding-top:25px;
line-height:1.429em;
}
.news li strong {
font-size:.857em;
color:#454545;
display:block;
padding-bottom:3px;
}
.news li a {
color:#008cc4;
text-decoration:none;
font-weight:bold;
}
.articles {
margin-top:-18px;
}
.articles li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.429em;
padding-top:18px;
}
.articles li img {
float:left;
margin-right:22px;
}
.sitemap {
padding-bottom:15px;
}
.sitemap li {
padding:0 0 5px 16px;
background:url(students-site-images/marker1.gif) no-repeat left 5px;
}
.sitemap li ul {
padding-top:5px;
margin-bottom:-5px;
}
.list {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.list li {
float:left;
width:175px;
margin-right:53px;
}
.list li.last {
margin:0;
}
.list li span {
display:block;
text-align:center;
}
.list li h4 {
padding-top:20px;
}
.list li p {
margin:0;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
line-height:1.429em;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:16px;
line-height:1.429em;
}
.p0 {
margin:0;
}
.address {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.address address {
font-style:normal;
line-height:1.429em;
float:left;
width:248px;
}
.address address strong {
color:#008cc4;
width:94px !important;
width:91px;
float:left;
}
.address .extra-wrap {
float:left;
width:385px;
}
.address p {
margin:0;
}
#banner {
width:691px;
height:299px;
background:url(students-site-images/banner-bg.jpg) no-repeat left top;
}
#banner h2 {
color:#fff;
font-size:42px;
text-transform:none;
line-height:1.2em;
padding:75px 0 0 55px;
margin:0;
}
#banner h2 span {
display:block;
margin-top:-12px;
color:#fff;
}
#banner h2 span span {
font-size:30px;
margin-top:-8px;
}
a {
color:#ff7b01;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
text-indent:-9999px;
}
h1 a {
width:473px;
height:63px;
position:absolute;
left:0;
top:104px;
background:url(students-site-images/logo.jpg) no-repeat left top;
}
h2 {
font-size:24px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:20px;
}
h2 span {
color:#8d8d8d;
}
h3 {
font-size:20px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:15px;
}
h4 {
font-size:1em;
color:#008cc4;
margin-bottom:5px;
}
h4 a {
color:#008cc4;
text-decoration:none;
}
h4 a:hover {
color:#ff7b01;
}
.txt1 {
color:#008cc4;
font-weight:bold;
}
.link {
position:absolute;
right:0;
top:159px;
}
header .nav-bg {
background:no-repeat center top;
}
header nav {
position:absolute;
left:0;
top:3px;
}
header nav ul li {
float:left;
font-size:16px;
line-height:1.2em;
text-transform:uppercase;
padding-right:1px;
background:url(students-site-images/divider.gif) repeat-y right top;
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a {
color:#454545;
text-decoration:none;
display:block;
float:left;
text-align:center;
padding:18px 0 20px 0;
background-repeat:no-repeat;
background-position:left top;
}
header nav ul li.current a, header nav ul li a:hover {
color:#008cc4;
}
header nav ul li a.m1 {
width:186px;
}
header nav ul li.current a.m1 {
background-image:url(students-site-images/m1-act.jpg);
}
header nav ul li a.m2 {
width:179px;
}
header nav ul li.current a.m2 {
background-image:url(students-site-images/m2-act.jpg);
}
header nav ul li a.m3 {
width:208px;
}
header nav ul li.current a.m3 {
background-image:url(students-site-images/m3-act.jpg);
}
header nav ul li a.m4 {
width:196px;
}
header nav ul li.current a.m4 {
background-image:url(students-site-images/m4-act.jpg);
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a.m5 {
width:167px;
}
header nav ul li.current a.m5 {
background-image:url(students-site-images/m5-act.jpg);
}
#content .inside {
padding:22px 20px 0 29px;
}
#content .inner_copy, #content .inner_copy a {
border:0;
float:right;
background:#000;
color:#ff7b01;
width:100%;
line-height:10px;
font-size:10px;
margin:-50% 0 0 0;
padding:0;
}
#search-form .rowElem {
height:28px;
position:absolute;
right:0;
top:113px;
}
#search-form input {
width:205px;
background:#fff;
padding:4px 5px 4px 5px;
border:1px solid #d0d0d0;
border-right:0;
color:#454545;
line-height:1.2em;
float:left;
height:18px;
}
#search-form a {
text-transform:uppercase;
color:#fff;
text-decoration:none;
float:left;
background-color:#0087c1;
padding:6px 11px 0 11px;
height:22px;
}
#search-form a:hover {
background-color:#47b6e5;
}
#newsletter-form {
padding-bottom:45px;
}
#newsletter-form fieldset {
background:url(students-site-images/newsletter-bg.gif) no-repeat left top;
width:219px;
height:131px;
overflow:hidden;
}
#newsletter-form .rowElem {
padding:13px 19px 0 17px;
}
#newsletter-form input {
border:1px solid #0086b5;
background:#fff;
color:#8e8e8e;
font-size:.857em;
padding:2px 5px 2px 5px;
width:171px;
margin-bottom:13px;
}
#newsletter-form h2 {
color:#fff;
margin-bottom:13px;
}
#newsletter-form a.fleft {
color:#fff;
position:relative;
top:3px;
}
#newsletter-form a.fright {
display:block;
color:#fff;
border:1px solid #26b6e8;
text-decoration:none;
background-color:#006caa;
padding:2px 11px 3px 11px;
}
#newsletter-form a.fright:hover {
border-color:#fff;
}
#contacts-form {
clear:right;
width:100%;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
height:30px;
}
#contacts-form .field.extra {
height:268px;
}
#contacts-form label {
float:left;
width:123px;
font-weight:bold;
color:#008cc4;
}
#contacts-form input {
width:277px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
}
#contacts-form textarea {
width:503px;
height:252px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
overflow:auto;
}
footer {
background:url(students-site-images/footer-bg.png) no-repeat center top;
margin-top:-120px;
min-width:940px;
}
footer .footerlink {
margin:0 auto;
width:940px;
height:60px;
padding-top:60px;
color:#454545;
font-size:.785em;
line-height:1.429em;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#454545;
}
.footerlink a {
color:#454545;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#454545;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
</style>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>
<![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body id="page2">
<!-- START PAGE SOURCE -->
<div class="wrap">
<header>
<div class="container">
<h1><a href="#">Student's site</a></h1>
<nav>
<ul>
<li><a href="index.html" class="m1">Home Page</a></li>
<li class="current"><a href="about-us.html" class="m2">About Us</a></li>
<li><a href="articles.html" class="m3">Our Articles</a></li>
<li><a href="contact-us.html" class="m4">Contact Us</a></li>
<li class="last"><a href="sitemap.html" class="m5">Sitemap</a></li>
</ul>
</nav>
<form action="#" id="search-form">
<fieldset>
<div class="rowElem">
<input type="text">
<a href="#">Search</a></div>
</fieldset>
</form>
</div>
</header>
<div class="container">
<aside>
<h3>Categories</h3>
<ul class="categories">
<li><span><a href="#">Programs</a></span></li>
<li><span><a href="#">Student Info</a></span></li>
<li><span><a href="#">Teachers</a></span></li>
<li><span><a href="#">Descriptions</a></span></li>
<li><span><a href="#">Administrators</a></span></li>
<li><span><a href="#">Basic Information</a></span></li>
<li><span><a href="#">Vacancies</a></span></li>
<li class="last"><span><a href="#">Calendar</a></span></li>
</ul>
<form action="#" id="newsletter-form">
<fieldset>
<div class="rowElem">
<h2>Newsletter</h2>
<input type="email" value="Enter Your Email Here" onFocus="if(this.value=='Enter Your Email Here'){this.value=''}" onBlur="if(this.value==''){this.value='Enter Your Email Here'}" >
<div class="clear"><a href="#" class="fleft">Unsubscribe</a><a href="#" class="fright">Submit</a></div>
</div>
</fieldset>
</form>
<h2>Fresh <span>News</span></h2>
<ul class="news">
<li><strong>June 30, 2010</strong>
<h4><a href="#">Sed ut perspiciatis unde</a></h4>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque. </li>
<li><strong>June 14, 2010</strong>
<h4><a href="#">Neque porro quisquam est</a></h4>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit consequuntur magni. </li>
<li><strong>May 29, 2010</strong>
<h4><a href="#">Minima veniam, quis nostrum</a></h4>
Uis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae. </li>
</ul>
</aside>
<section id="content">
<div id="banner">
<h2>Professional <span>Online Education <span>Since 1992</span></span></h2>
</div>
<div class="inside">
<h2>About <span>team</span></h2>
<ul class="list">
<li><img src="students-site-images/2page-img1.jpg">
<h4>Team Member One</h4>
<p>Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu.</p>
</li>
<li><img src="students-site-images/2page-img2.jpg">
<h4>Another Team Member </h4>
<p>Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu.</p>
</li>
<li class="last"><img src="students-site-images/2page-img3.jpg">
<h4>Another Team Member </h4>
<p>Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu.</p>
</li>
</ul>
<h2>About <span>Website</span></h2>
<div class="img-box"><img src="students-site-images/2page-img4.jpg"><span class="txt1">Nemo enim ipsam voluptatem</span> quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore aliquam. </div>
<p class="p0"><span class="txt1">Quis autem vel eum</span> iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptasaut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est nulla pariatur. 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.</p>
</div>
</section>
</div>
</div>
<footer>
<div class="footerlink">
<p class="lf">Copyright © 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.templatemonster.com/">TemplateMonster</a></p>
<div style="clear:both;"></div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category