html5-passion
<!DOCTYPE html>
<html lang="en-GB">
<head>
<!-- website template design by download website templates - http://www.downloadwebsitetemplates.co.uk -->
<title>Passion HTML5 Website Template created by Download Website Templates</title>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta charset="utf-8" />
<style type='text/css'>
@import url("reset.css");
body
{
background: #EEE url("html5-passion-images/bg.png") repeat-x;
color: #333;
font-family: "Istok Web", Arial, Helvetica, sans-serif;
font-size: 13px;
}
a { color: #F03; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
/* Main Styles */
#container
{
margin: 0 auto;
width: 900px;
}
#headercont
{
width: 900px;
height: 360px;
}
#headercont #header
{
width: 900px;
height: 100px;
}
#headercont #header #logocont
{
float: left;
width: 400px;
height: 72px;
padding: 28px 0 0 0;
}
#headercont #header #logocont h1 a
{
font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
font-size: 42px;
text-transform: lowercase;
font-weight: normal;
letter-spacing: -1px;
color: #FFF;
}
#headercont #header #logocont h1 a span
{
color: #F03;
}
#headercont #header nav
{
float: left;
width: 500px;
height: 30px;
padding: 36px 0 0 0;
}
#headercont #header nav ul
{
float: right;
}
#headercont #header nav ul li
{
display: inline;
}
#headercont #header nav ul li a
{
float: left;
line-height: 35px;
color: #999;
padding: 0 18px;
margin: 0 0 0 12px;
text-decoration: none;
font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
}
#headercont #header nav ul li.active a
{
color: #FFF;
}
#headercont #header nav ul li a:hover
{
color: #F03;
}
#gallerycont
{
width: 900px;
}
/* Start Easy Slider */
#slider ul
{
position: relative;
}
#slider ul li
{
position: relative;
width: 900px;
height: 230px;
overflow: hidden;
}
p#controls
{
position: relative;
}
p#controls #prevBtn, p#controls #nextBtn
{
position: absolute;
display: block;
left: -36px;
top: -160px;
width: 36px;
height: 77px;
margin: 0;
overflow: hidden;
text-indent: -8000px;
}
p#controls #nextBtn
{
left: 906px;
}
p#controls #prevBtn a
{
display: block;
width: 36px;
height: 77px;
background: url("html5-passion-images/prev.png") no-repeat top left;
}
p#controls #prevBtn a:hover
{
background: url("html5-passion-images/prev.png") no-repeat bottom left;
}
p#controls #nextBtn a
{
display: block;
width: 36px;
height: 77px;
background: url("html5-passion-images/next.png") no-repeat top right;
}
p#controls #nextBtn a:hover
{
background: url("html5-passion-images/next.png") no-repeat bottom right;
}
/* End Easy Slider */
#maincont
{
width: 900px;
padding: 0;
}
#maincont #main
{
margin: 0 auto;
width: 900px;
padding: 30px 0 10px 0;
line-height: 22px;
background: url("html5-passion-images/bg-maincont.png") repeat-y;
}
#maincont #main p { margin: 0 0 20px 0; }
#maincont #main h1, #maincont #main h2, #maincont #main h3, #maincont #main h4, #maincont #main h5 { margin: 0 0 20px 0; font-weight: normal; letter-spacing: -1px; text-transform: lowercase; font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif; }
#maincont #main h1 { font-size: 34px; }
#maincont #main h2 { font-size: 32px; }
#maincont #main h3 { font-size: 30px; }
#maincont #main h4 { font-size: 30px; }
#maincont #main h5 { font-size: 28px; }
#maincont #main h1 span, #maincont #main h2 span, #maincont #main h3 span { color: #F03; }
#maincont #main ul { margin: 0 0 20px 35px; list-style-type: square; }
#maincont #main ul li { padding: 0 0 0 2px; }
#maincont #main ol { margin: 0 0 20px 35px; list-style-type: decimal; }
#maincont #main ol li { padding: 0 0 0 2px; }
#maincont #main blockquote { background: #DDD; border-left: 3px solid #F03; padding: 15px; margin: 0 0 20px 0; font-style: italic; line-height: 18px; }
#maincont #main #mainleft
{
float: left;
width: 620px;
padding: 0 30px 0 0;
}
#maincont #main #mainright
{
float: left;
width: 220px;
padding: 0 0 0 30px;
}
#footercont
{
width: 100%;
margin: 15px 0 0 0;
background: #111;
}
#footercont #footer
{
margin: 0 auto;
width: 860px;
padding: 25px 20px;
font-size: 11px;
text-align: right;
background: #111;
color: #999;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Istok+Web&v2" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&v2" rel="stylesheet" type="text/css" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="container" class="clearfix">
<header id="headercont" class="clearfix">
<section id="header">
<article id="logocont">
<h1><a title="" href="">Passion Website <span>Template</span></a></h1>
</article>
<nav>
<ul>
<li class="active"><a title="" href="">Home</a></li>
<li><a title="" href="">About Us</a></li>
<li><a title="" href="">Our Services</a></li>
<li><a title="" href="">Contact Us</a></li>
</ul>
</nav>
</section>
<section id="gallerycont">
<div id="slider">
<ul>
<li><a title="" href=""><img src="html5-passion-images/1.jpg" alt="" /></a></li>
<li><a title="" href=""><img src="html5-passion-images/2.jpg" alt="" /></a></li>
<li><a title="" href=""><img src="html5-passion-images/3.jpg" alt="" /></a></li>
</ul>
</div>
</section>
</header>
<section id="maincont" class="clearfix">
<section id="main" class="clearfix">
<section id="mainleft">
<article>
<header>
<h1>Lorem Ipsum <span>Dolor sit</span> Amet</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pellentesque, turpis a gravida porta, nibh libero feugiat augue, vel interdum erat lectus nec lorem. Phasellus vel odio felis, a venenatis tellus. Nullam sit amet ligula vitae tellus laoreet accumsan eu nec odio. Sed tincidunt congue euismod. Pellentesque sollicitudin erat massa. <a title="" href="../">Quisque lacinia</a>, metus in pretium lobortis, ipsum leo semper mauris, at gravida est nisl sit amet metus. Pellentesque quis massa eget odio lobortis pharetra. Sed faucibus sapien et ligula vulputate eu iaculis dui adipiscing. Etiam a quam lacus. Etiam urna sapien, porttitor at rhoncus sed, tristique sed sapien. Nam felis nulla, sodales a tincidunt ac, fermentum eu nisi.</p>
<ul>
<li>This is an unordered list - Item 1</li>
<li>This is an unordered list - Item 2</li>
<li>This is an unordered list - Item 3</li>
<li>This is an unordered list - Item 4</li>
</ul>
</article>
<article>
<header>
<h2>Vivamus urna libero, <span>blandit nec</span> eleifend at</h2>
</header>
<p>Vivamus urna libero, blandit nec eleifend at, porta id ante. Proin vitae turpis lacus. Sed ultrices vulputate dictum. Cras porttitor nibh sed eros suscipit quis pellentesque urna feugiat. Fusce interdum mattis ullamcorper. Aliquam non nibh arcu. Donec mollis, libero eget tempor facilisis, libero erat viverra lorem, et porta neque elit ornare arcu. Sed a ipsum diam. Ut pellentesque egestas lacus, non ultrices dui molestie non. Vivamus venenatis pharetra massa vitae tincidunt. Nulla quis lorem lacus, quis sagittis urna.</p>
<ol>
<li>This is an ordered list - Item 1</li>
<li>This is an ordered list - Item 2</li>
<li>This is an ordered list - Item 3</li>
<li>This is an ordered list - Item 4</li>
</ol>
<p>Aliquam rhoncus, massa eget congue accumsan, turpis ante vestibulum ligula, sed auctor ligula quam at quam. Integer fringilla, diam vitae egestas elementum, erat tellus lacinia neque, posuere eleifend turpis quam quis mi. Cras bibendum varius lacus, a varius quam lacinia non. Duis ac purus id dolor aliquam interdum. Maecenas sit amet neque lectus. Nullam non mi non sapien dignissim dapibus at ac turpis. Sed nec luctus nunc. In id felis vitae massa adipiscing lacinia. Aenean placerat massa sit amet tortor porttitor adipiscing. Donec iaculis nisi fringilla mi pretium at sodales tellus suscipit. Maecenas ac sollicitudin urna. Suspendisse sed purus a libero fermentum rhoncus. Morbi diam orci, volutpat sed cursus vel, ultrices eu dolor. Nullam et magna non ante sagittis euismod sed at erat.</p>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pellentesque,</blockquote>
</article>
</section>
<section id="mainright">
<article>
<header>
<h3>Sed a <span>ipsum diam</span></h3>
</header>
<p>Vivamus urna libero, blandit nec eleifend at, porta id ante. Proin vitae turpis lacus. Sed ultrices vulputate dictum. Cras porttitor nibh sed eros suscipit quis pellentesque urna feugiat. Fusce interdum mattis ullamcorper. Aliquam non nibh arcu. Donec mollis, libero eget tempor facilisis, libero erat viverra lorem, et porta neque elit ornare arcu.</p>
<p>Sed a ipsum diam. Ut pellentesque egestas lacus, non ultrices dui molestie non.</p>
</article>
</section>
</section>
</section>
</div>
<footer id="footercont">
<div id="footer">
<p>Template Design by <a title="free website templates" href="http://www.downloadwebsitetemplates.co.uk" rel="external">Free Website Templates</a></p>
</div>
</footer>
</body>
</html>
Related examples in the same category