moviehunter
<!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>MovieHunter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
margin:0;
padding:0;
outline:0;
}
body {
font-size:12px;
line-height:1.3;
font-family:Arial, Helvetica, Sans-Serif;
color:#ccc;
background:url('images/body-bg.gif');
}
a {
color:#e7b038;
text-decoration:underline;
cursor:pointer;
}
a:hover {
text-decoration:none;
}
a img {
border:0;
}
input, textarea, select {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
textarea {
overflow:auto;
}
.cl {
display:block;
height:0;
font-size:0;
line-height:0;
text-indent:-4000px;
clear:both;
}
.notext {
font-size:0;
line-height:0;
text-indent:-4000px;
}
.left, .alignleft {
float:left;
display:inline;
}
.right, .alignright {
float:right;
display:inline;
}
.text-right {
text-align:right;
}
h2 {
font-size:10px;
color:#f2a223;
font-weight:bold;
}
h3 {
font-size:14px;
color:#fff;
font-weight:bold;
}
h4 {
font-size:14px;
color:#f3b12b;
font-weight:bold;
}
#shell {
width:980px;
margin:0 auto;
}
#header {
position:relative;
}
h1#logo {
position:absolute;
top:37px;
left:0;
}
h1#logo a {
float:left;
width:239px;
height:49px;
background:url('images/logo.gif') no-repeat 0 0;
font-size:0;
line-height:0;
text-indent:-4000px;
}
.social {
float:right;
width:160px;
padding-top:11px;
}
.social span {
float:left;
display:inline;
font-size:10px;
color:#9f9f9f;
line-height:16px;
padding-right:5px;
}
.social ul {
list-style:none;
}
.social ul li {
float:left;
display:inline;
width:16px;
padding-right:2px;
}
.social ul li a {
float:left;
display:inline;
width:16px;
height:16px;
background:url('images/social.gif') no-repeat 0 0;
font-size:0;
line-height:0;
text-indent:-4000px;
}
.social ul li a.facebook {
background-position:-18px 0;
}
.social ul li a.vimeo {
background-position:-36px 0;
}
.social ul li a.rss {
background-position:-54px 0;
}
#navigation {
float:right;
clear:right;
padding-top:28px;
padding-bottom:47px;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
float:left;
display:inline;
padding-left:29px;
}
#navigation ul li a {
font-size:14px;
font-weight:bold;
color:#fff;
text-decoration:none;
}
#navigation ul li a.active, #navigation ul li a:hover {
color:#d91d2a;
}
#sub-navigation {
display:block;
clear:right;
border-top:1px dashed #666;
border-bottom:1px dashed #666;
padding:8px 0;
}
#sub-navigation ul {
list-style:none;
}
#sub-navigation ul li {
float:left;
display:inline;
padding-right:23px;
}
#sub-navigation ul li a {
font-size:14px;
font-weight:bold;
color:#fff;
line-height:24px;
text-decoration:none;
}
#sub-navigation ul li a:hover {
text-decoration:underline;
}
#search {
width:346px;
margin:0 0 0 auto;
}
#search label {
float:left;
display:inline;
font-size:14px;
font-weight:bold;
color:#fff;
line-height:24px;
padding-right:6px;
}
#search .search-field {
width:238px;
border:1px solid #413e3e;
background:#000;
color:#787878;
padding:2px 0 2px 2px;
}
#search .search-button {
font-size:14px;
font-weight:bold;
border:0;
background:none;
color:#fff;
cursor:pointer;
}
#main {
border-bottom:1px dashed #413e3e;
}
#content {
}
.box {
width:980px;
border-bottom:1px dashed #413e3e;
padding-bottom:21px;
}
.box .head {
width:980px;
padding-top:14px;
padding-bottom:11px;
}
.box .head h2 {
float:left;
display:inline;
}
.box .movie {
width:152px;
float:left;
padding-right:12px;
}
.movie-image {
float:left;
width:152px;
height:214px;
position:relative;
}
.movie-image img {
width:152px;
height:214px;
}
.movie-image a {
float:left;
display:inline;
width:152px;
height:214px;
position:relative;
z-index:2;
}
.play {
position:absolute;
top:0;
left:0;
width:152px;
height:214px;
background:url('images/image-hover.png');
display:block;
z-index:5;
cursor:pointer;
display:none;
}
.movie span.name {
font-weight:bold;
color:#fff;
font-size:14px;
text-align:center;
padding-top:160px;
display:block;
}
.box .last {
padding:0;
}
.rating {
float:left;
width:152px;
padding-top:8px;
}
.rating p {
float:left;
font-size:10px;
color:#fff;
font-weight:bold;
}
.rating .stars {
float:left;
width:60px;
height:11px;
background:url('images/stars.gif') no-repeat 0 0;
margin-left:2px;
}
.rating .stars-in {
width:48px;
display:inline;
background:url('images/stars.gif') no-repeat 0 bottom;
position:absolute;
height:11px;
font-size:0;
line-height:0;
text-indent:-4000px;
}
.comments {
background:url('images/comments.gif') no-repeat 0 center;
padding-left:12px;
float:right;
}
#news {
width:460px;
float:left;
}
#news .head {
width:460px;
padding-top:11px;
padding-bottom:14px;
}
#news h3, #coming h3 {
float:left;
}
#coming {
width:490px;
float:left;
padding-left:30px;
}
#coming .head {
width:490px;
padding-top:11px;
padding-bottom:14px;
}
#coming .head strong {
color:#ff361a;
}
#coming .content {
min-height:130px;
height:auto !important;
height:130px;
padding-bottom:20px;
}
#coming .content h4 {
padding-bottom:3px;
}
.content {
padding-bottom:28px;
}
.content .date {
font-size:10px;
color:#fff;
}
.content img {
float:left;
width:68px;
padding-right:8px;
}
.content p {
font-size:13px;
color:#fff;
line-height:16px;
}
.content a {
font-size:11px;
}
#footer {
padding:15px 0 0 0;
font-size:10px;
}
#footer, #footer a {
color:#9c9c9c;
text-decoration:none;
}
#footer a:hover {
text-decoration:none;
}
#footer p {
margin:0;
padding:0 0 11px 0;
line-height:normal;
white-space:nowrap;
}
#footer .lf {
float:left;
}
#footer .rf {
float:right;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
<!--[if IE 6]><link rel="stylesheet" href="moviehunter-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="shell">
<div id="header">
<h1 id="logo"><a href="#">MovieHunter</a></h1>
<div class="social"> <span>FOLLOW US ON:</span>
<ul>
<li><a class="twitter" href="#">twitter</a></li>
<li><a class="facebook" href="#">facebook</a></li>
<li><a class="vimeo" href="#">vimeo</a></li>
<li><a class="rss" href="#">rss</a></li>
</ul>
</div>
<div id="navigation">
<ul>
<li><a class="active" href="#">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">IN THEATERS</a></li>
<li><a href="#">COMING SOON</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ADVERTISE</a></li>
</ul>
</div>
<div id="sub-navigation">
<ul>
<li><a href="#">SHOW ALL</a></li>
<li><a href="#">LATEST TRAILERS</a></li>
<li><a href="#">TOP RATED</a></li>
<li><a href="#">MOST COMMENTED</a></li>
</ul>
<div id="search">
<form action="#" method="get" accept-charset="utf-8">
<label for="search-field">SEARCH</label>
<input type="text" name="search field" value="Enter search here" id="search-field" class="blink search-field" />
<input type="submit" value="GO!" class="search-button" />
</form>
</div>
</div>
</div>
<div id="main">
<div id="content">
<div class="box">
<div class="head">
<h2>LATEST TRAILERS</h2>
<p class="text-right"><a href="#">See all</a></p>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">X-MAN</span></span> <a href="#"><img src="moviehunter-css/images/movie1.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">SPIDER MAN 2</span></span> <a href="#"><img src="moviehunter-css/images/movie2.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">SPIDER MAN 3</span></span> <a href="#"><img src="moviehunter-css/images/movie3.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">VALKYRIE</span></span> <a href="#"><img src="moviehunter-css/images/movie4.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">GLADIATOR</span></span> <a href="#"><img src="moviehunter-css/images/movie5.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie last">
<div class="movie-image"> <span class="play"><span class="name">ICE AGE</span></span> <a href="#"><img src="moviehunter-css/images/movie6.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="cl"> </div>
</div>
<div class="box">
<div class="head">
<h2>TOP RATED</h2>
<p class="text-right"><a href="#">See all</a></p>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">TRANSFORMERS</span></span> <a href="#"><img src="moviehunter-css/images/movie7.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">MAGNETO</span></span> <a href="#"><img src="moviehunter-css/images/movie8.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">KUNG FU PANDA</span></span> <a href="#"><img src="moviehunter-css/images/movie9.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">EAGLE EYE</span></span> <a href="#"><img src="moviehunter-css/images/movie10.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">NARNIA</span></span> <a href="#"><img src="moviehunter-css/images/movie11.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie last">
<div class="movie-image"> <span class="play"><span class="name">ANGELS & DEMONS</span></span> <a href="#"><img src="moviehunter-css/images/movie12.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="cl"> </div>
</div>
<div class="box">
<div class="head">
<h2>MOST COMMENTED</h2>
<p class="text-right"><a href="#">See all</a></p>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">HOUSE</span></span> <a href="#"><img src="moviehunter-css/images/movie13.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">VACANCY</span></span> <a href="#"><img src="moviehunter-css/images/movie14.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">MIRRORS</span></span> <a href="#"><img src="moviehunter-css/images/movie15.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">THE KINGDOM</span></span> <a href="#"><img src="moviehunter-css/images/movie16.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie">
<div class="movie-image"> <span class="play"><span class="name">MOTIVES</span></span> <a href="#"><img src="moviehunter-css/images/movie17.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="movie last">
<div class="movie-image"> <span class="play"><span class="name">THE PRESTIGE</span></span> <a href="#"><img src="moviehunter-css/images/movie18.jpg" alt="" /></a> </div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in"> </div>
</div>
<span class="comments">12</span> </div>
</div>
<div class="cl"> </div>
</div>
</div>
<div id="news">
<div class="head">
<h3>NEWS</h3>
<p class="text-right"><a href="#">See all</a></p>
</div>
<div class="content">
<p class="date">12.04.09</p>
<h4>Disney's A Christmas Carol</h4>
<p>"Disney's A Christmas Carol," a multi-sensory thrill ride re-envisioned by Academy Award®-winning filmmaker Robert Zemeckis, captures... </p>
<a href="#">Read more</a> </div>
<div class="content">
<p class="date">11.04.09</p>
<h4>Where the Wild Things Are</h4>
<p>Innovative director Spike Jonze collaborates with celebrated author Maurice Sendak to bring one of the most beloved books of all time to the big screen in "Where the Wild Things Are,"...</p>
<a href="#">Read more</a> </div>
<div class="content">
<p class="date">10.04.09</p>
<h4>The Box</h4>
<p>Norma and Arthur Lewis are a suburban couple with a young child who receive an anonymous gift bearing fatal and irrevocable consequences.</p>
<a href="#">Read more</a> </div>
</div>
<div id="coming">
<div class="head">
<h3>COMING SOON<strong>!</strong></h3>
<p class="text-right"><a href="#">See all</a></p>
</div>
<div class="content">
<h4>The Princess and the Frog </h4>
<a href="#"><img src="moviehunter-css/images/coming-soon1.jpg" alt="" /></a>
<p>Walt Disney Animation Studios presents the musical "The Princess and the Frog," an animated comedy set in the great city of New Orleans...</p>
<a href="#">Read more</a> </div>
<div class="cl"> </div>
<div class="content">
<h4>The Princess and the Frog </h4>
<a href="#"><img src="moviehunter-css/images/coming-soon2.jpg" alt="" /></a>
<p>Walt Disney Animation Studios presents the musical "The Princess and the Frog," an animated comedy set in the great city of New Orleans...</p>
<a href="#">Read more</a> </div>
</div>
<div class="cl"> </div>
</div>
<div id="footer">
<p class="lf">Copyright © 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://chocotemplates.com/">ChocoTemplates.com</a></p>
<div style="clear:both;"></div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category