Christmas-2008 : Holiday « Templates « HTML / CSS






Christmas-2008

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Christmas-2009</title>
<style type='text/css'>
* {margin: 0; padding: 0;}

body {margin: 20px 0; font: 90% Verdana, sans-serif; color: #fff; background-color: #0D881E;}
a, a:visited { text-decoration: underline; color: #F72B28; }
a:hover, a:active { text-decoration: none; color: #CC3333; }

#container {width: 760px; margin: 0 auto; background: #fff url(Christmas-2008-images/container.png) repeat-y; color: #333;}

#header {width: 760px; height:120px; background: transparent url(Christmas-2008-images/header.png) no-repeat; margin: 0 auto;}
#header h1 {width: 760px; height: auto; background: transparent;  text-align: center; color: #0D881E; font-size: 1.8em; padding: 30px 10px 10px 10px; }
#header h3 { text-align: center; width: 760px; font-size: 0.95em; font-style: italic; }

#main { float:left; padding: 0px 10px; width: 530px; font-size: 0.95em; }
#main h1 { font-size: 1.4em; color: #0D881E; padding-bottom: 10px; padding-left: 5px;}
#main h2 { font-size: 1.1em; color: #0D881E; padding-bottom: 10px; padding-left: 5px;}
#main p {padding-bottom: 10px; padding-left: 5px;}
blockquote { margin: 10px 10px; padding: 10px; background: #FFCCCC; color: #333; border-top: 1px solid #0D881E; border-bottom: 1px solid #0D881E; font-size: 0.85em; }

#right {float:left; padding: 0px 10px; width: 180px; font-size: 0.85em;}
#right h2 { font-size: 1.2em; color: #0D881E; padding-bottom: 10px; }
#nav {width : 180px; margin : 0 0 10px 0;}
ul#menu {margin-left : 0; padding-left : 0; list-style-type : none;}
#menu a {display : block; padding : 3px; width : 169px; margin-bottom : 1px; background : #0D881E; color : #fff; border-left: 2px solid #F72B28; font-weight: normal !important;}
#menu a:link, #menu a:visited {color : #fff; background : #0D881E; text-decoration : none; }
#menu a:hover, #menu a:active { background : #F72B28; color : #333; border-left: 2px solid #0D881E;}
#current { background : #F72B28 !important; color : #333 !important; border-left: 2px solid #0D881E !important;} 

#footer { clear:both; width: 760px; height: 120px; font-size: 0.75em; margin: 0 auto; background: transparent url(Christmas-2008-images/footer.png) no-repeat; text-align: center; }
#footer p { padding: 50px 10px 10px 10px; }

img {float: left; margin: 5px; padding: 2px; border: 1px solid #F72B28;}

</style>


</head>
<body>
<div id="container">
<div id="header">
<h1>Christmas 2009</h1>
<h3>May You Share Beautiful Memories This Holiday Season</h3>
</div>

<div id="main">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat semper dolor. Vivamus rutrum arcu vel turpis. Donec elit. <a href="#">Integer volutpat tellus</a> consequat quam auctor congue.</p>
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat semper dolor. Vivamus rutrum arcu vel turpis. Donec elit. Integer volutpat tellus consequat quam auctor congue.</p></blockquote>
<h2>Photos</h2>
<p>Let it snow....<img src="Christmas-2008-images/snow.jpg" alt="Merry Xmas" /><img src="Christmas-2008-images/snow.jpg" alt="Merry Xmas" /></p>
</div>

<div id="right">
<h2>Navigate Our Site</h2>
<div id="nav">
<ul id="menu">
<li><a href="#" id="current">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>
<h2>News</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat semper dolor. Vivamus rutrum arcu vel turpis. Donec elit. Integer volutpat tellus consequat quam auctor congue. <a href="#">Read More &raquo;</a></p>
</div>
<div id="footer"><p>Copyright&copy;2009 &nbsp; &nbsp; XHTML template by <a href="http://karenblundell.com">Karen Blundell</a> &nbsp; &nbsp; download from <a href="http://css4free.com/" title="find free CSS templates">CSS for Free</a></p></div>
</div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.metamorph_helloween
2.christmas
3.metamorph_diving
4.metamorph_summertime
5.metamorph_valentine
6.metamorph_happyness
7.happy-holidays
8.metamorph_partytime
9.metamorph_peacefull
10.feel-the-music
11.partytime
12.Romantic
13.thegathering
14.theharvest
15.timetorest
16.treasure-hunters
17.vacation
18.happyeaster
19.holiday 2
20.holidayseason
21.harvest
22.harvestfield
23.high5
24.hotspring