online-edu : Design 6 « Templates « HTML / CSS






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 &copy; 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

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.onlinemoviestore
46.oodles
47.openyourwindows
48.opposed
49.optimal-touch
50.orchidaceae
51.ordinaire
52.ormeggiare
53.ornamental
54.ornate
55.OrngBlu
56.oswd_blozilla
57.our-work
58.ourhouse
59.outdoorv1.0
60.outliers
61.outoftheblue
62.outtabox
63.oxidation
64.package
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination