moviehunter : Movie « Templates « HTML / CSS

HTML / CSS » Templates » Movie 
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');
}
{
  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: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 bottom;
  position:absolute;
  height:11px;
  font-size:0;
  line-height:0;
  text-indent:-4000px;
}
.comments {
  background:url('images/comments.gif') no-repeat 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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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>&quot;Disney's A Christmas Carol,&quot; a multi-sensory thrill ride re-envisioned by Academy Award&reg;-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 &quot;Where the Wild Things Are,&quot;...</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 &quot;The Princess and the Frog,&quot; an animated comedy set in the great city of New Orleans...</p>
        <a href="#">Read more</a> </div>
      <div class="cl">&nbsp;</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 &quot;The Princess and the Frog,&quot; an animated comedy set in the great city of New Orleans...</p>
        <a href="#">Read more</a> </div>
    </div>
    <div class="cl">&nbsp;</div>
  </div>
  <div id="footer">
    <p class="lf">Copyright &copy; 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
1.moviecompany
2.moviesofmydreams
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.