online-edu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Education</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.7em;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #707b84;
background: #3e464d;
}
a:link, a:visited { color: #0066CC; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #008400; text-decoration: underline; }
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.float_l {
float: left;
}
.float_r {
float: right;
}
.divider {
background: url(online-edu-images/divider.jpg) repeat-x bottom;
}
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }
.button_01 a {
display: block;
width: 70px;
height: 22px;
padding: 5px 2px 0 30px;
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
background: url(online-edu-images/button_01.png) no-repeat;
}
.button_01 a:hover {
color: #ffffff;
background: url(online-edu-images/button_01_hover.png) no-repeat;
}
h2 {
margin: 0 0 5px 0;
padding: 10px 0;
font-size: 24px;
font-weight: normal;
color: #106fb8;
}
h3 {
margin: 0 ;
padding: 2px 0;
font-size: 13px;
font-weight: bold;
color: #3e464d;
}
#wrapper {
width: 980px;
margin: 0 auto;
}
/* header */
#header_wrapper {
width: 100%;
background: #fff;
}
#header {
clear: both;
width: 960px;
height: 200px;
margin: 0 auto;
padding: 0 10px;
background: url(online-edu-images/header.jpg) no-repeat;
}
#header p {
clear: both;
padding-left: 50px;
width: 500px;
font-size: 18px;
font-style: italic;
line-height: 26px;
}
#header #site_title {
float: left;
padding-top: 10px;
margin-left: 50px;
margin-bottom: 10px;
width: 280px;
height: 100px;
text-align: center;
overflow: hidden;
}
#site_title h1 {
margin: 0px;
padding: 15px 0 0 0;
}
#site_title h1 a {
font-size: 30px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title h1 a span {
display: block;
margin-top: 10px;
margin-left: 5px;
font-size: 14px;
color: #999;
font-weight: normal;
letter-spacing: 2px;
}
/* end of header */
/* menu */
#menu_wrapper {
width: 100%;
height: 90px;
margin: 0 auto;
background: url(online-edu-images/menu.jpg) repeat-x;
}
#menu {
width: 920px;
height: 90px;
margin: 0 auto;
padding: 0 30px;
}
#menu ul {
float: left;
margin: 0px;
padding: 0px;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu ul li a {
position: relative;
float: left;
width: 152px;
display: block;
height: 40px;
padding: 50px 0 0 0;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #333333;
font-weight: bold;
outline: none;
}
#menu li a:hover, #menu li .current {
color: #008400;
background: url(online-edu-images/menu_hover.jpg) bottom no-repeat;
}
/* end of menu */
/* content */
#content_wrapper {
width: 920px;
padding: 30px;
margin: 0 auto;
}
#sidebar {
float: left;
width: 270px;
}
.sidebar_box {
padding: 20px 30px;
background: #fff;
}
.sidebar_box_bottom {
width: 270px;
height: 15px;
margin-bottom: 30px;
background: url(online-edu-images/sidebar_section_bottom.jpg)
}
.news_box {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px dashed #8a9ba8;
color: #ffffff;
}
.news_box .post_info {
font-size: 11px;
color: #666666;
}
.news_box .post_info a {
color: #157ad2;
font-weight: normal;
}
.news_box a{
color: #000000;
font-weight: normal;
}
.news_box span {
color: #157ad2;
}
.sidebar_box label {
display: block;
margin-bottom: 10px;
}
.sidebar_box #input_field {
height: 20px;
width: 200px;
padding: 0 5px;
margin-bottom: 10px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
}
.sidebar_box #submit_btn {
float: right;
height: 30px;
width: 80px;
margin: 0px;
padding: 3px 0 15px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
}
#content {
float:right;
width: 590px;
}
.content_box {
clear: both;
width: 530px;
padding: 20px 30px;
background: #fff;
}
.content_box_bottom {
width: 590px;
height: 36px;
margin-bottom: 20px;
background: url(online-edu-images/content_bottom.jpg) no-repeat;
}
.content_box .image_fl {
float: left;
margin: 3px 15px 0 0;
}
.content_box .section_w250 {
width: 250px;
}
.list_01 {
margin: 0 0 0 20px;
padding: 0;
list-style: decimal-leading-zero;
}
.list_01 li {
color: #008400;
margin-bottom: 7px;
}
/* end of content */
/* footer */
#footer_wrapper {
width: 100%;
margin: 0 auto;
background: #fff url(online-edu-images/footer_top.jpg) top repeat-x;
}
#footer {
width: 920px;
margin: 0 auto;
padding: 30px;
text-align: center;
color: #7c7471;
}
#footer a {
color: #333333;
}
#footer .footer_menu {
margin: 0 0 10px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #333333;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
</style>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div id="site_title">
<h1><a href="#"> <img src="online-edu-images/logo.png" alt="" /> <span>free css templates</span> </a></h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet, ipsum bibendum pretium volutpat, diam magna facilisis ante.</p>
</div>
<!-- end of header -->
</div>
<!-- end of menu_wrapper -->
<div id="menu_wrapper">
<div id="menu">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Flash Files</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end of menu -->
</div>
<div id="content_wrapper">
<div id="sidebar">
<div class="sidebar_box">
<h2>Announcements</h2>
<div class="news_box"> <a href="#">Fusce sit amet nunc lectus, at pretium augue. Pellentesque tortor felis.</a>
<p class="post_info">Posted by <a href="#">Admin</a> on <span>April 30, 2048</span></p>
</div>
<div class="news_box"> <a href="#">Integer imperdiet, justo ut venenatis vehicula, magna mi placerat felis.</a>
<p class="post_info">Posted by <a href="#">Admin</a> on <span>April 22, 2048</span></p>
</div>
<div class="news_box"> <a href="#">Sed justo dolor, convallis at, vestibulum vitae, elementum eu, pede.</a>
<p class="post_info">Posted by <a href="#">Admin</a> on <span>April 14, 2048</span></p>
</div>
</div>
<div class="sidebar_box_bottom"></div>
<div class="sidebar_box">
<h2>Newsletter</h2>
<form action="#" method="get">
<label>Please enter your email address to subscribe our newsletter.</label>
<input type="text" value="" name="username" size="10" id="input_field" />
<input type="submit" name="login" value="Subscribe" alt="login" id="submit_btn" />
</form>
<div class="cleaner"></div>
</div>
<div class="sidebar_box_bottom"></div>
</div>
<!-- end of sidebar -->
<div id="content">
<div class="content_box">
<h2>Welcome to Education</h2>
<p> Free CSS Templates are provided by <a href="#">TemplateMo.com</a> for everyone. You may download, edit and apply this template for your websites. Credit goes to <a href="#">Public Domain Pictures</a> for photos used in this template. Nam ut libero at lacus feugiat tincidunt vitae sed ipsum.</p>
<div class="cleaner_h20"></div>
<div class="image_fl"> <img src="online-edu-images/images01.jpg" alt="" /> </div>
<div class="section_w250 float_r">
<ul class="list_01">
<li>Praesent condimentum magna ut </li>
<li>Nunc luctus eros eu enim gravida ut </li>
<li>Phasellus nec ante eget felis </li>
<li>Morbi pellentesque tellus adipiscing </li>
<li>Nunc accumsan sagittis sem, ut </li>
<li>Nunc luctus eros eu enim gravida ut </li>
<li>Phasellus nec ante eget felis </li>
</ul>
</div>
<div class="cleaner"></div>
</div>
<div class="content_box_bottom"></div>
<div class="content_box">
<h2>Testimonial</h2>
<div class="section_w250 float_l">
<h3>Praesent sollicitudin</h3>
<p>Nullam faucibus volutpat sapien sit amet tristique. Suspendisse venenatis, urna nec rhoncus suscipit, turpis turpis auctor nisi.</p>
</div>
<div class="section_w250 float_r">
<h3>Quisque blandit</h3>
<p>Morbi blandit ipsum sed purus vestibulum bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec nibh sed tellus.</p>
</div>
<div class="cleaner"></div>
</div>
<div class="content_box_bottom"></div>
</div>
<!-- end of content -->
<div class="cleaner"></div>
</div>
<div id="footer_wrapper">
<div id="footer">
<ul class="footer_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Flash Files</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Members</a></li>
<li class="last_menu"><a href="#">Contact Us</a></li>
</ul>
Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a></div>
</div>
</body>
</html>
Related examples in the same category