calliope
<!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>Calliope</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*Template: Calliope
Author: Towfiq I.
website: www.towfiqi.com
*/
body {margin: 0px;padding: 0px;border: 0px;font-family:Arial, Helvetica, sans-serif;background:#E6E6E6;color:#666;}
/*Fonts*/
a { font-size:12px; color:#666;}
a:link{color:#999999; text-decoration:none;}
a:visited{color:#999999; text-decoration:none;}
h1 { font-size:20px; font-weight:bold; color:#333;}
h2 { font-size:24px; font-weight:bold; color:#222; margin:0px;}
h3 {font-size:14px; font-weight:bold; color:#333;}
/*Fonts END*/
#header {background:#222222;height:100px;border-bottom:solid 1px #333333;}
#toprow {height:372px;border-top:solid 1px #1d1d1d;background: #FFFFFF url(calliope-images/bg.gif) repeat-x;}
#toprowsub {height:70px;border-bottom:solid 1px #ccc;background: #FFFFFF url(calliope-images/bg2.gif) repeat-x;}
#toprowsub h2{padding:15px 30px;}
#midrow {width:960px;margin:0 auto;}
#bottomrow {width:960px;margin:0 auto;}
/*LOGO*/
#logo{padding-top:25px;width:207px;float:left;}
#logo a{background:url(calliope-images/logo.gif) no-repeat;display:block;width:207px;height:53px;text-indent:-10000px;}
/*LOGO END*/
/*Menu Begin*/
#menu{float:right;margin-top:30px;}
#menu ul li{ display:inline; list-style-type:none;}
#menu ul li a{padding:5px 0px; font-size:14px; text-decoration:none; margin:0px 10px; font-weight:bold;}
#menu ul li a span{font-size:14px; text-decoration:none; padding:0px 10px; color:#999999;}
#menu ul li a.active{background:url(calliope-images/menur.gif) no-repeat right;}
#menu ul li a.active span{background:url(calliope-images/menul.gif) no-repeat left; padding:5px 10px;color:#333;}
#menu ul li a:hover{background:url(calliope-images/menur.gif) no-repeat right; font-weight:bold;}
#menu ul li a:hover span{background:url(calliope-images/menul.gif) no-repeat left; padding:5px 10px;color:#333;}
/*Menu End*/
.center{width:960px;margin:0 auto;}
/*SlideShow Begin*/
#cu3er-container {margin-top:60px;padding-left:0px;padding-right:0px;width:960px;}
#cubershadow{width:960px;height:372px;background:url(calliope-images/shadow.jpg) no-repeat bottom;}
/*SlideShow End*/
/*Homepage Boxs*/
#container {float:left;}
.box {margin-top:20px;padding-top:10px;width:310px;height:auto;float:left;background:url(calliope-images/border.jpg) no-repeat bottom right;}
.box h1{padding-left:10px;}
.box p {margin:0px;width:200px;padding:15px 5px 10px 5px;float:left;}
.last{background:none;}
a.plan{float:left;display:block;width:83px;height:101px;background:url(calliope-images/plan.jpg) no-repeat 0px -101px;text-indent:-1000px;}
a.plan:hover{ background-position: 0px 1px;}
a.whyus{margin-top:10px;float:left;display:block;width:83px;height:87px;background:url(calliope-images/whyus.jpg) no-repeat 0px 0px;text-indent:-1000px;}
a.whyus:hover{ background-position: 0px -88px;}
a.support{margin-top:14px;float:left;display:block;width:83px;height:72px;background:url(calliope-images/support.jpg) no-repeat 0px 0px;text-indent:-1000px;}
a.support:hover{ background-position: 0px -70px;}
a.button{background:url(calliope-images/buttonr.gif) no-repeat right; padding:3px 0px; margin-left:2px; color:#CCCCCC; text-decoration:none; }
.button span{background:url(calliope-images/buttonl.gif) no-repeat left; padding:3px 5px;}
/*Homepage Boxs END*/
/*Subpage Boxs*/
#box2holder{padding: 20px 30px;}
.box2{width:450px; float:left; padding:20px 0px;}
.box2 img{ border: solid 5px #F2F2F2; float:left;}
.box2 h3{margin:0px; padding:0px 5px; float:left;}
.box2 p{width:220px; float:left;padding:5px 5px; margin:0px;}
/*Subpage Boxs END*/
/*Footer*/
#footer {background:#222222;float:left;width:100%;height:50px;border-top:solid 1px #333333;}
.foot{width:960px;margin:0 auto; padding:10px 0px; font-size:12px;}
.foot a:link{color:#999;text-decoration:none;}
/*Footer END*/
.textbox{float:left;padding:50px 0px;width:700px;}
.textbox2{padding:10px 30px; background:url(calliope-images/textbox2bg.gif) repeat-x;}
.feed{width:auto; float:left;}
.feed img{ border: solid 0px; margin-top:120px; padding:0px 7px;}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--Header Begin-->
<div id="header">
<div class="center">
<div id="logo"><a href="#">Calliope</a></div>
<!--Menu Begin-->
<div id="menu">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a class="active" href="about.html"><span>About</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<!--Menu END-->
</div>
</div>
<!--Header END-->
<!--SubPage Toprow Begin-->
<div id="toprowsub">
<div class="center">
<h2>About Us</h2>
</div>
</div>
<!--Toprow END-->
<!--SubPage MiddleRow Begin-->
<div id="midrow">
<div class="center">
<div class="textbox2">
<p><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget consequat odio. Proin sapien erat, venenatis ut mollis vel, pulvinar in eros. Cras vel felis massa, a vulputate leo. Donec posuere, orci in congue faucibus, erat metus feugiat augue, congue ultricies orci nulla in velit. Morbi pulvinar, justo nec suscipit bibendum, nisl est cursus orci, non sagittis ipsum enim sed orci. Sed imperdiet tristique condimentum. Proin eget ipsum odio, in adipiscing leo. In hac habitasse platea dictumst. Maecenas id dui non nisl lobortis porta sed sed mi. Nunc molestie tempor semper. Aenean non eros risus. Maecenas tincidunt vehicula lectus, id posuere orci consequat eget. Nam dictum ante vitae turpis interdum accumsan. Nullam est libero, porttitor vitae venenatis et, commodo viverra turpis. Ut aliquam facilisis dignissim.</a></p>
<p><a>Praesent ac enim id nunc sodales imperdiet eu eu nisi. Vestibulum gravida tortor quis dui lobortis sodales ac sit amet sem. Cras dolor est, consectetur quis ultrices ut, pharetra non justo. Maecenas et nunc eu lacus cursus tempus nec eget mauris. Maecenas a sapien vitae mauris vehicula placerat eu ac mauris. Nunc sed ipsum nisl, nec interdum felis. Phasellus volutpat rutrum leo non bibendum. Nam rhoncus, nunc laoreet rhoncus sollicitudin, neque leo malesuada nunc, nec malesuada nisi arcu ut elit. Praesent suscipit, risus eu sollicitudin pharetra, lacus nibh cursus mi, sit amet tempor diam purus ut nibh. Nam et nunc nisi, adipiscing sagittis nisi. Aliquam erat volutpat. Aliquam a elit ac ligula aliquet pellentesque. Maecenas vitae nisl at elit commodo dapibus. Etiam malesuada leo at magna eleifend aliquam.</a></p>
Nulla ut dolor urna. Aliquam faucibus adipiscing dolor vitae blandit. Quisque enim nisl, feugiat ut cursus sed, commodo sed diam. Proin sodales vestibulum nulla
<p><a>vel pulvinar. Nunc ullamcorper dapibus volutpat. Ut eleifend consectetur lobortis. Nullam sapien tellus, posuere id ullamcorper id, auctor vel dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque lacinia justo in elit interdum porta. Curabitur sed libero nisl, in ultrices ipsum. Vestibulum odio nibh, molestie ac dignissim a, sodales eget nulla. Nunc tincidunt magna nisl. Vestibulum venenatis, felis sed euismod malesuada, odio massa euismod urna, sed iaculis justo urna et ligula. Ut aliquam ultrices enim vitae consectetur. Nullam varius sagittis ipsum at vulputate. Maecenas sem purus, accumsan facilisis posuere vitae, pellentesque vitae metus. Aliquam dictum sollicitudin erat, eget viverra ipsum luctus euismod. Cras interdum viverra odio, id rutrum elit consequat sit amet.</a></p>
</div>
</div>
</div>
<!--MiddleRow END-->
<!--SubPage BottomRow Begin-->
<div id="bottomrow">
<div id="box2holder">
<h1>Our Team</h1>
<div class="box2"> <img alt="" src="calliope-images/sampleimg.gif" width="190" height="120" />
<h3>Mr.Lorem Ipsum</h3>
<p><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget consequat odio. Proin sapien erat, venenatis ut mollis vel, pulvinar in eros.</a></p>
</div>
<div class="box2"> <img alt="" src="calliope-images/sampleimg.gif" width="190" height="120" />
<h3>Mr.Lorem Ipsum</h3>
<p><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget consequat odio. Proin sapien erat, venenatis ut mollis vel, pulvinar in eros.</a></p>
</div>
<div class="box2"> <img alt="" src="calliope-images/sampleimg.gif" width="190" height="120" />
<h3>Mr.Lorem Ipsum</h3>
<p><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget consequat odio. Proin sapien erat, venenatis ut mollis vel, pulvinar in eros. </a></p>
</div>
<div class="box2"> <img alt="" src="calliope-images/sampleimg.gif" width="190" height="120" />
<h3>Mr.Lorem Ipsum</h3>
<p><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget consequat odio. Proin sapien erat, venenatis ut mollis vel, pulvinar in eros. </a></p>
</div>
</div>
</div>
<!--BottomRow END-->
<!--Footer Begin-->
<div id="footer">
<div class="foot"> <span>Calliope</span> by <a href="http://www.towfiqi.com">Towfiq I.</a> is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License.</a> </div>
</div>
<!--Footer END-->
</body>
</html>
Related examples in the same category