online_education
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Online Education</title>
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#fff; color:#582902; font:14px/16px Arial, Helvetica, sans-serif;}
div, p, ul, form, input, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
/*----MAIN PANEL----*/
#mainPan{width:778px; position:relative; margin:0 auto;}
/*----Left Panel----*/
#leftPan{width:155px; float:left; background:#FFFCF4; color:#582902; border-bottom:1px solid #E3DDCD; border-left:1px solid #E3DDCD; border-right:1px solid #E3DDCD; padding:48px 0 0;}
#leftPan ul.one{width:127px; height:177px; margin:0 0 22px 14px;}
#leftPan ul.one li{width:127px; height:21px; border-bottom:1px solid #E3DDCD;}
#leftPan ul.one li a{width:93px; height:21px; display:block; background:url(online_education-images/arrow1.gif) 23px 8px no-repeat #FFFCF4; color:#40361B; font:11px/22px Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; padding:0 0 0 34px;}
#leftPan ul.one li a:hover{background:url(online_education-images/arrow2.gif) 23px 8px no-repeat #CC0000; color:#fff; text-decoration:none; padding:0 0 0 34px;}
#leftPan ul.one li.home{width:93px; height:21px; background:url(online_education-images/arrow2.gif) 23px 8px no-repeat #CC0000; color:#fff; text-decoration:none; font:11px/22px Arial, Helvetica, sans-serif; text-transform:uppercase; padding:0 0 0 34px;}
#leftPan ul.one li.contact{width:127px; height:21px; border-bottom:none;}
#fastformPan{width:127px; height:141px; background:#E3DDCD; color:#574A22; margin:0 14px 11px;}
#fastformPan form.formone{width:127px; height:141px;}
#fastformPan form.formone h2{width:117px; height:23px; background:#574A22; color:#fff; font:20px/22px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 10px;}
#fastformPan form.formone select{width:104px; height:18px; background:#fff; color:#000; font:11px/18px Verdana, Arial, Helvetica, sans-serif; font-weight:normal; margin:7px 0 0 10px;}
#submitPan{width:61px; height:20px; position:absolute; top:360px; left:70px;}
#fastformPan form input{width:61px; height:20px; display:block; background:url(online_education-images/button.gif) 0 0 no-repeat #E3DDCD; color:#fff; border:none; font:11px/20px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-transform:uppercase;}
#fastformPan form label{width:40px; height:10px; display:block; float:left; background:#E3DDCD; color:#574A22; font:10px/10px Verdana, Arial, Helvetica, sans-serif; margin:10px 0 0; padding:0 0 0 5px;}
#fastformPan form input.check{width:12px; height:12px; float:left; margin:10px 0 0; background:none;}
#leftPan h3{ height:20px; background:#FFFCF4; color:#574A22; font:20px/22px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 25px;}
#leftPan ul.two{width:127px; height:113px; margin:23px 0 22px 14px;}
#leftPan ul.two li{width:127px; height:18px;}
#leftPan ul.two li a{width:105px; height:18px; display:block; background:url(online_education-images/arrow3.gif) 12px 6px no-repeat #FFFCF4; color:#582902; font-size:13px; text-decoration:underline; padding:0 0 0 22px;}
#leftPan ul.two li a:hover{background:url(online_education-images/arrow1.gif) 12px 6px no-repeat #FFFCF4; color:#574A22; font-size:13px; text-decoration:underline;}
#secondformPan{width:127px; height:95px; background:#E3DDCD; color:#574A22; margin:0 14px 30px;}
#secondformPan form.formtwo{width:127px; height:95px;}
#secondformPan form.formtwo h2{width:117px; height:23px; background:#574A22; color:#fff; font:20px/22px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 10px;}
#secondformPan form.formtwo .input{width:61px; height:20px; background:url(online_education-images/button.gif) 0 0 no-repeat #E3DDCD; color:#fff; border:none; font:11px/20px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-transform:uppercase; margin:10px 0 0 56px;}
#secondformPan input{width:104px; height:18px; display:block; background:#fff; color:#000; font:11px/18px Verdana, Arial, Helvetica, sans-serif; margin:8px 0 0 10px;}
/*----/Left Panel----*/
/*----Right Panel----*/
#rightPan{width:621px; float:left;}
/*---Top Panel----*/
#topPan{width:565px; height:96px; padding:0 0 0 56px;}
#topPan img.logo{width:213px; height:30px; margin:41px 0 5px;}
#topPan p{width:210px; height:18px; border:1px solid #D1C7A7; background:#fff; color:#010000; text-align:center; font-size:14px;}
#topPan ul{width:168px; position:absolute; top:51px; right:127px;}
#topPan ul li{width:55px; height:38px; border-right:1px solid #E3DDCD; float:left;}
#topPan ul li.pen{width:55px; height:38px; background:url(online_education-images/icon1-normal.gif) 0 0 no-repeat;}
#topPan ul li.pen a{width:55px; height:38px; display:block; background:url(online_education-images/icon1-normal.gif) 0 0 no-repeat; text-indent:-20000px;}
#topPan ul li.pen a:hover{width:55px; height:38px; background:url(online_education-images/icon1-hover.gif) 0 0 no-repeat; text-indent:-20000px;}
#topPan ul li.book{width:55px; height:38px; background:url(online_education-images/icon2-normal.gif) 0 0 no-repeat;}
#topPan ul li.book a{width:55px; height:38px; display:block; background:url(online_education-images/icon1-norma2.gif) 0 0 no-repeat; text-indent:-20000px;}
#topPan ul li.book a:hover{width:55px; height:38px; background:url(online_education-images/icon2-hover.gif) 0 0 no-repeat; text-indent:-20000px;}
#topPan ul li.calculator{width:55px; height:38px; background:url(online_education-images/icon3-normal.gif) 0 0 no-repeat; border:none;}
#topPan ul li.calculator a{width:55px; height:38px; display:block; background:url(online_education-images/icon3-norma2.gif) 0 0 no-repeat; text-indent:-20000px;}
#topPan ul li.calculator a:hover{width:55px; height:38px; background:url(online_education-images/icon3-hover.gif) 0 0 no-repeat; text-indent:-20000px;}
/*---/Top Panel----*/
/*---Body Panel----*/
#bodyPan{width:525px; padding:14px 40px 0 56px;}
#bodyPan h2{height:25px; background:#fff; color:#40361B; font:30px/18px "Trebuchet MS",Arial, Helvetica, sans-serif;}
#bodyPan p.contant1{background:url(online_education-images/image1.gif) 0 8px no-repeat; padding:6px 0 0 98px;}
#bodyPan p.contant2{background:url(online_education-images/image2.gif) 0 15px no-repeat; padding:12px 0 0 98px;}
#bodyPan p.contant3{background:url(online_education-images/image3.gif) 0 15px no-repeat; padding:12px 0 0 98px;}
#bodyPan p.more{background:url(online_education-images/more-line.gif) 0 90% repeat-x;}
#bodyPan p.more a{background:#fff; color:#CC0000; font:13px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; margin:0 0 0 375px;}
#bodyPan p.more a:hover{background:#E3DDCD; color:#CC0000; text-decoration:none;}
/*---Body Lower Panel----*/
#bodylowerPan{width:525px; padding:11px 0 0; position:relative; margin:0 auto;}
#bodylowerLeftPan{width:291px; padding:0 40px 0 0; float:left;}
#bodylowerLeftPan p{padding:15px 0;}
#bodylowerLeftPan h3{height:30px; background:#fff; color:#40361B; font:30px/30px "Trebuchet MS",Arial, Helvetica, sans-serif;}
#bodylowerLeftPan ul.list{width:290px;}
#bodylowerLeftPan ul.list li{width:290px; height:20px;}
#bodylowerLeftPan ul.list li a{height:20px; background:url(online_education-images/bullet1.gif) 0 3px no-repeat #fff; color:#000; line-height:20px; text-decoration:underline; padding:0 0 0 20px;}
#bodylowerLeftPan ul.list li a:hover{background:url(online_education-images/bullet2.gif) 0 3px no-repeat #fff; color:#5E2401; line-height:20px; text-decoration:underline;}
#bodylowerLeftPan p.more{background:url(online_education-images/more-line.gif) 0 90% repeat-x; padding:0px;}
#bodylowerLeftPan p.more a{background:#fff; color:#CC0000; font:13px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; margin:0 0 0 193px;}
#bodylowerLeftPan p.more a:hover{background:#E3DDCD; color:#CC0000; text-decoration:none;}
#bodylowerRightPan{width:194px; float:left;}
#bodylowerRightPan h4{height:50px; background:#fff; color:#40361B; font:30px/30px "Trebuchet MS",Arial, Helvetica, sans-serif;}
#bodylowerRightPan ul{width:162px; height:144px; padding:16px 16px 0; background:#574A22; color:#fff;}
#bodylowerRightPan ul li{width:162px; height:27px; border-bottom:1px solid #887B53;}
#bodylowerRightPan ul li a{width:142px; height:27px; background:url(online_education-images/arrow4.gif) 8px 6px no-repeat #574A22; color:#fff; text-decoration:none; line-height:27px; padding:0 0 0 20px;}
#bodylowerRightPan ul li a:hover{background:url(online_education-images/arrow5.gif) 8px 6px no-repeat #574A22; color:#FCF0CD; text-decoration:none; padding:0 0 0 20px;}
#bodylowerRightPan ul li.lastlink{border:none;}
#bodylowerRightPan p.more{width:194px; height:38px; background:url(online_education-images/more-bg.jpg) 24px 0 no-repeat #574A22; color:#342B0D; padding:12px 0 0;}
#bodylowerRightPan p.more a{width:72px; background:#DED8C6; color:#342B0D; font-size:13px; font-weight:bold; margin:0 0 0 77px; text-decoration:none; }
#bodylowerRightPan p.more a:hover{text-decoration:none;}
/*---/Body Lower Panel----*/
/*----FOOTER PANEL----*/
#footermainPan{height:99px; background:url(online_education-images/footerbg.gif) 0 0 repeat-x #FFFCF4; color:#010101; clear:both; padding:53px 0 0;}
#footerPan{width:778px; position:relative; margin:0 auto; font-family:Arial, Helvetica, sans-serif;}
#footerPan ul{width:580px; height:20px; position:relative; margin:0 auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#574A22; background:#FFFCF4; text-decoration:none; font-size:12px;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan p.copyright{width:204px; position:relative; margin:0 auto; background:#FFFCF4; color:#010000; font-size:11px;}
#footerPan ul.templateworld{width:250px; background:#FFFCF4; color:#444; display:block; position:absolute; top:60px; left:300px; font-size:10px;}
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#FFFCF4; display:block; color:#444; text-decoration:none;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}
#footerPanhtml{width:60px; height:18px; display:block; position:absolute; top:40px; left:320px;}
#footerPanhtml a{width:58px; height:18px; display:block; background:#CC0000; color:#fff; line-height:18px; font-size:11px; font-weight:bold; text-align:center; text-decoration:none;}
#footerPanhtml a:hover{background:#574A22; color:#fff;}
#footerPancss{width:48px; height:18px; display:block; position:absolute; top:40px; left:380px;}
#footerPancss a{width:48px; height:18px; display:block; background:#574A22; color:#fff; line-height:18px; font-size:11px; font-weight:bold; text-decoration:none; text-transform:uppercase; text-align:center;}
#footerPancss a:hover{background:#CC0000; color:#fff;}
</style>
</head>
<body>
<div id="mainPan">
<div id="leftPan">
<ul class="one">
<li class="home">Home</li>
<li><a href="#">about us</a></li>
<li><a href="#">services</a></li>
<li><a href="#">univercity</a></li>
<li><a href="#">books</a></li>
<li><a href="#">discount</a></li>
<li><a href="#">realeses</a></li>
<li class="contact"><a href="#">contact</a></li>
</ul>
<div id="fastformPan">
<form action="" method="get" class="formone">
<h2>search</h2>
<select name="category" id="category"><option>CATAGORY</option></select>
<select name="author" id="author"> <option>AUTHOR</option></select>
<label>English</label>
<input name="search" type="radio" class="check" value="search" />
<label>French</label>
<input name="search" type="radio" class="check" value="French" />
<div id="submitPan">
<input type="submit" class="input" value="SEARCH" />
</div>
</form>
</div>
<h3>new books</h3>
<ul class="two">
<li><a href="#">Loremipsum sit</a></li>
<li><a href="#">Ametcon</a></li>
<li><a href="#">Adipiscing elit </a></li>
<li><a href="#">Morbifert urnadui </a></li>
<li><a href="#">Posuereac</a></li>
<li><a href="#">Convallis vitae</a></li>
</ul>
<div id="secondformPan">
<form action="" method="post" class="formtwo">
<h2>newsletter</h2>
<input name="" type="text" />
<input name="" type="submit" class="input" value="SUBMIT" />
</form>
</div>
</div>
<div id="rightPan">
<div id="topPan">
<a href="index.html"><img src="online_education-images/logo.gif" title="Online Education" alt="Online Education" width="213" height="30" border="0" class="logo"/></a>
<ul>
<li class="pen"><a href="#">pen</a></li>
<li class="book"><a href="#">book</a></li>
<li class="calculator"><a href="#">calculator</a></li>
</ul>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="bodyPan">
<h2>events</h2>
<p class="contant1">Online Education is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<p class="more"><a href="#">read more</a></p>
<p class="contant2">We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template. If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
<p class="more"><a href="#">read more</a></p>
<p class="contant3">We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template. If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
<p class="more"><a href="#">read more</a></p>
<div id="bodylowerPan">
<div id="bodylowerLeftPan">
<h3>future plans</h3>
<p>Online Education is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<ul class="list">
<li><a href="#">Lorem ipsum dolor sit amet,consectetuer</a></li>
<li><a href="#">adipiscing elit.Morbifert urna dui,posuere.</a></li>
<li><a href="#">convallis vitae,</a></li>
</ul>
<p class="more"><a href="#">view more</a></p>
</div>
<div id="bodylowerRightPan">
<h4>services links</h4>
<ul>
<li><a href="#">Lorem ipsum lorsit</a></li>
<li><a href="#">Amet, consectetuer</a></li>
<li><a href="#">Adipiscing elit.</a></li>
<li><a href="#">Morbifert urna dui,</a></li>
<li class="lastlink"><a href="#">Posuere acconvallis </a></li>
</ul>
<p class="more"><a href="#">know more</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="footermainPan">
<div id="footerPan">
<ul>
<li><a href="#">home</a>| </li>
<li><a href="#">about us</a>| </li>
<li><a href="#">services</a>| </li>
<li><a href="#">univercity</a>| </li>
<li><a href="#">books</a>| </li>
<li><a href="#">discount</a>| </li>
<li><a href="#">realeses</a>| </li>
<li><a href="#">contact</a> </li>
</ul>
<p class="copyright">online education. All right reserved.</p>
<ul class="templateworld">
<li>design by:</li>
<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
</ul>
<div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML</a></div>
<div id="footerPancss"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category