moviesofmydreams
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Movies of My Dreams</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Template003 - collin grasley 2006
*/
/* ----------------The Style Council------------------------------------------------------------- */
body {
padding: 2px 0 0 0;
margin: 0;
font: .7em Arial, Verdana, Helvetica, sans-serif;
line-height: 1.7em;
background: #9FA9B3 url(moviesofmydreams-images/bg2.jpg) repeat-x;
color: #454545;
}
a {
color: #5d7ca1;
font-weight:bold;
background: inherit;
}
a:hover {
color: #fff;
background: inherit;
text-decoration:underline;
}
p {
margin: 0 0 5px 0;
}
h1 {
margin: 0;
padding: 0 0 8px 0;
font: normal 1.8em "Trebuchet MS", Sans-Serif;
color: #d3d3d3;
}
h2 {
margin: 0;
padding: 0 0 8px 0;
font: bold 1.4em "Trebuchet MS", Sans-Serif;
color: #acacac;
}
#header h1 {
font:bold 2.2em Arial, Verdana, Helvetica, sans-serif;
color:#d3d3d3;
padding: 22px 0 0 22px;
margin: 0;
}
ul {
margin: 0 0 0 25px;
padding: 0;
list-style: square;
}
img {
border: 0;
}
acronym {
cursor: help;
}
.highlight {
color: #820304;
font-weight: bolder;
}
/* --------------The goods---------------------------------------------------------------- */
#content {
margin: 0 auto;
width: 960px;
background: #2a2a2a;
border: 4px solid #2a2a2a;
}
#header {
height: 80px;
padding:0;
margin:0 0 1px 0;
background: #2a2a2a;
}
#pic {
height: 225px;
margin: 0 0 1px 0;
background: url(moviesofmydreams-images/bigimage.jpg);
}
#thumbgallery {
clear:both;
padding:0 0 0 9px;
margin: 0 0 2px 0;
background:inherit;
}
.thumbs img{
position:relative;
padding:0;
margin:10px 2px 2px 2px;
border:2px solid #d3d3d3;
background:inherit;
}
.thumbs img:hover{
border:2px solid #5d7ca1;
}
/* Top Menu-------------------------------------------------------------- */
.headermenu {
margin: 5px 5px 0 0;
padding: 0;
float: right;
list-style-type: none;
list-style-image: none;
width: 570px;
}
.headermenu ul {
margin: 0;
padding: 0;
float: right;
list-style-type: none;
list-style-image: none;
}
.headermenu li {
float: left;
padding-left: 1px;
width: 110px;
}
.headermenu li a {
color: #5d7ca1;
font-weight: bold;
text-transform:uppercase;
display: block;
height: 15px;
line-height: 10px;
padding: 40px 0 6px 6px;
text-align: left;
font-size: 1.0em;
font-family: Arial, Verdana, Helvetica, sans-serif;
background:none;
border-top: 4px solid #5d7ca1;
text-decoration: none;
}
.headermenu li a:hover {
color: #fff;
font-weight: bold;
display: block;
background:none;
border-top: 4px solid #fff;
text-decoration: none;
}
/* -------------Main Menu-------------------------------------------------------------- */
#menu{
width: 960px;
padding: 4px 0 ;
margin: 0 0 6px 0;
float: left;
background: url(moviesofmydreams-images/menubg.jpg) no-repeat;
}
#menu li{
list-style: none;
display: inline;
margin: 0;
}
#menu li a{
text-decoration: none;
padding: 6px 10px;
margin: 1px 1px 0 4px;
background:inherit;
font-weight: bold;
color: #5d7ca1;
}
#menu li a:hover{
background: inherit;
color: #fff;
}
/*---------Left Side Content-----------------------------------------------------------*/
#leftside {
float: right;
width: 635px;
margin: 0 0 10px 0;
}
.leftdata {
margin: 0px 0 15px 0;
border: 1px solid #d3d3d3;
min-height: 220px;
background:#2a2a2a;
color: #acacac;
padding: 15px 15px 5px 10px;
}
#middle {
float: left;
width: 960px;
margin: 0 0 10px 0;
}
.middledata {
border: 1px solid #acacac;
margin: 0px 0 15px 0;
min-height: 220px;
background:#2a2a2a;
color: #acacac;
padding: 15px 15px 5px 10px;
}
.middlesubdata {
clear: both;
margin:0px 0 20px 0;
padding: 5px 20px;
border: 1px solid #d3d3d3;
background: #2a2a2a;
color: #acacac;
}
.thumb {
margin: 0 12px 10px 0;
width: 200px;
height: 160px;
float: left;
clear: left;
border: 4px solid #acacac;
background: #eee;
color: #000;
}
.thumb:hover {
border:4px solid #5d7ca1;
}
.leftinfo {
background: #2a2a2a;
color: #acacac;
border: 1px solid #d3d3d3;
padding: 15px;
margin: 0 0 15px 0;
}
/* --------------------Right Side Content----------------------------------------------- */
#rightside {
float: left;
width: 310px;
margin: 0 0 10px 0;
}
.rightdata {
border: 1px solid #d3d3d3;
padding: 8px;
margin: 0 0 10px 0;
background:#2a2a2a;
color: #acacac;
}
.image {
float: left;
margin: 0 9px 3px 0;
border: 2px solid #acacac;
}
/*---------The footer Data-------------------------------------------------------------------*/
#footer {
clear: both;
color: #d3d3d3;
background: #2a2a2a;
padding: 10px 15px;
border-top: 1px solid #d3d3d3;
}
#footer .right {
float: right;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
<div class="headermenu">
<ul>
<li><a href="http://www.free-css.com/">01. Home</a></li>
<li><a href="http://www.free-css.com/">02. Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">03. Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">04. Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">01. Lorem Ipsum</a></li>
</ul>
</div>
<h1>Movies of My Dreams</h1>
</div>
<div id="pic"></div>
<ul id="menu">
<li><a href="singlecolumn.html">One Column Layout</a></li>
<li><a href="http://www.free-css.com/">lorem Ipsum Dolor</a></li>
<li><a href="http://www.free-css.com/">lorem Ipsum Dolor</a></li>
<li><a href="http://www.free-css.com/">lorem Ipsum Dolor</a></li>
<li><a href="http://www.free-css.com/">lorem Ipsum Dolor</a></li>
</ul>
<div id="thumbgallery">
<p class="thumbs"> <a href="http://www.free-css.com/"><img src="moviesofmydreams-images/gallerythumb.jpg" width="225" height="83" alt="" /></a> <a href="http://www.free-css.com/"><img src="moviesofmydreams-images/gallerythumb.jpg" width="225" height="83" alt="" /></a> <a href="http://www.free-css.com/"><img src="moviesofmydreams-images/gallerythumb.jpg" width="225" height="83" alt="" /></a> <a href="http://www.free-css.com/"><img src="moviesofmydreams-images/gallerythumb.jpg" width="225" height="83" alt="" /></a></p>
</div>
<div id="leftside">
<div class="leftdata">
<h2>LOREM IPSUM DOLOR </h2>
<img src="moviesofmydreams-images/thumb.jpg" alt="" width="200" height="160" class="thumb"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
<div class="leftinfo">
<p>We Offer: <br />
<a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a>, <a href="http://www.free-css.com/">consectetuer adipiscing elit</a>, <a href="http://www.free-css.com/">sed diam nonummy nibh</a> , <a href="http://www.free-css.com/">euismod tincidunt ut laoreet dolore</a>, <a href="http://www.free-css.com/">magna aliquam erat volutpat</a>. <a href="http://www.free-css.com/">Ut wisi enim ad minim veniam</a>, <a href="http://www.free-css.com/">quis nostrud exerci tatio</a></p>
</div>
<div class="leftdata">
<h2>LOREM IPSUM DOLOR </h2>
<img src="moviesofmydreams-images/thumb.jpg" alt="" width="200" height="160" class="thumb"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div id="rightside">
<div class="rightdata">
<p><img src="moviesofmydreams-images/smallthumb.jpg" alt="" width="80" height="80" class="" /><b>Lorem ipsum dolor sit </b><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat..</p>
</div>
<div class="rightdata">
<p><img src="moviesofmydreams-images/smallthumb.jpg" alt="" width="80" height="80" class="" /><b>Lorem ipsum dolor sit </b><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat..</p>
</div>
<div class="rightdata">
<p><img src="moviesofmydreams-images/smallthumb.jpg" alt="" width="80" height="80" class="" /><b>Lorem ipsum dolor sit </b><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="footer">
<p class="right">© 2006 Your Company</p>
<p> <a href="http://www.free-css.com/">Home</a> · <a href="singlecolumn.html">Single Column Layout</a> · <a href="http://www.free-css.com/">Lorem Ipsum</a> · <a href="mailto:collingrasley@gmail.com">coll23</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
</p>
</div>
</div>
</body>
</html>
Related examples in the same category