new-year : Design 4 « Templates « HTML / CSS






new-year

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>New Year Template</title>
<style type='text/css'>
body {
  background-image: url(new-year-images/bg.png);
  background-repeat: repeat-x;
  background-color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #666666;
}
a {
  color: #0099FF;
}

#wrap #left a {
  text-decoration: none;
  color: #000000;
}
#wrap #left li {
  margin-bottom: 3px;
  display: block;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #0099FF;
}
#wrap #left ul {
  margin: 0px;
  padding: 5px;
  list-style-type: none;
}
#wrap #left .posts {
  background-color: #E8F2F9;
}
.menuhead {
  font-size: 14px;
  font-weight: bold;
  color: #0099FF;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  text-transform: uppercase;
}


#wrap {
  width: 755px;
  margin-right: auto;
  margin-left: auto;
}
#logo {
  background-image: url(new-year-images/logobg.png);
  height: 35px;
  width: 249px;
  display: block;
  margin-top: 18px;
  font-family: "Century Gothic", Arial, Verdana;
  font-size: 35px;
  font-weight: bold;
  color: #0099CC;
  text-align: center;
  padding-top: 43px;
  float: left;
  background-position: center bottom;
  padding-bottom: 5px;
}
#wrap #header h1 {
  display: block;
  background-image: url(new-year-images/balloon_07.png);
  background-repeat: repeat-x;
  margin-top: 18px;
  float: left;
  width: 465px;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFCC00;
  font-weight: normal;
  padding-top: 58px;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 0px;
  padding-bottom: 5px;
}
#wrap #right p {
  line-height: 18px;
}

#wrap #header #logo span {
  color: #FF9900;
}
.spacer {
  margin: 0px;
  padding: 0px;
  clear: both;
  font-size: 2px;
}
#wrap #left {
  width: 249px;
  float: left;
}
#wrap #left .categories {
  background-color: #FEFEE9;
}

#wrap #right {
  float: left;
  padding: 10px;
  width: 475px;
  background-color: #FFFFFF;
  background-image: url(new-year-images/contentbg.png);
  background-repeat: repeat-x;
  margin-left: 5px;
}
#wrap #left a:visited,active {

  text-decoration: none;
  color: #000000;
}
#wrap #left a:hover {
  text-decoration: none;
  color: #0099FF;
  background-color: #FEF1C0;
}
#wrap #right h1 {
  font-size: 25px;
  color: #0066CC;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin: 0px;
  padding: 0px;
  font-weight: normal;
}
#wrap #right .date {
  display: block;
  margin: 0px;
  padding: 0px;
  color: #666666;
  font-family: Georgia, "Times New Roman", Times, serif;
}
#wrap #footer {
  background-image: url(new-year-images/balloon_07.png);
  background-repeat: repeat-x;
  padding: 10px;
  height: 25px;
}
#wrap #right blockquote {
  margin: 15px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 15px;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: #FFCC66;
}
a:visited,active {
  color: #0099FF;
}
a:hover {
  color: #000000;
  text-decoration: none;
}

</style>


</head>
<body>
<div id="wrap">
  <div id="header"> <span id="logo">New<span>Year</span></span>
    <h1>Happy New year to you!</h1>
  </div>
  <div class="spacer">&nbsp;</div>
  <div id="left">
    <ul class="categories">
      <li class="menuhead">Categories</li>
      <li><a href="http://www.free-css.com/">Yesterday</a></li>
      <li><a href="http://www.free-css.com/">Tomorrow</a></li>
      <li><a href="http://www.free-css.com/">Hope</a></li>
      <li><a href="http://www.free-css.com/">Memories</a></li>
      <li><a href="http://www.free-css.com/">Dreams</a></li>
      <li><a href="http://www.free-css.com/">Aspirations</a></li>
      <li><a href="http://www.free-css.com/">Desire</a></li>
      <li><a href="http://www.free-css.com/">Love</a></li>
      <li><a href="http://www.free-css.com/">Innocense</a></li>
    </ul>
    <ul class="posts">
      <li class="menuhead">New year Resolutions</li>
      <li><a href="http://www.free-css.com/">Tomorrow</a></li>
      <li><a href="http://www.free-css.com/">Hope</a></li>
      <li><a href="http://www.free-css.com/">Memories</a></li>
      <li><a href="http://www.free-css.com/">Dreams</a></li>
      <li><a href="http://www.free-css.com/">Aspirations</a></li>
      <li><a href="http://www.free-css.com/">Desire</a></li>
      <li><a href="http://www.free-css.com/">Love</a></li>
      <li><a href="http://www.free-css.com/">Innocense</a></li>
    </ul>
  </div>
  <div id="right">
    <h1>Did I wish you happy new year ?</h1>
    <span class="date">I was quiet busy... Sorry I forgot</span>
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque  aliquam tempus sapien. Sed vel nisi. In hac habitasse platea dictumst.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per  inceptos hymenaeos. Nulla molestie. Etiam quam tellus, mattis eget,  mattis quis, posuere at, elit. Fusce interdum molestie nisi. Praesent  suscipit sem a nibh. Quisque vestibulum erat ut purus. Donec sodales  sapien nec nulla. Nam adipiscing sapien vitae risus. Aliquam id lorem  eget risus pharetra aliquet. Sed nec sem id arcu sagittis tincidunt.  Nullam eget nibh id nisl sollicitudin adipiscing. Nullam eu ante.  Phasellus risus est, feugiat sed, scelerisque ac, gravida eu, sem. In  sapien pede, molestie eu, rutrum ut, pharetra ut, pede. Aenean nulla  massa, congue malesuada, auctor sed, dictum sed, nisi. Integer ut enim. </p>
    <blockquote>
      <p>Duis sagittis euismod turpis. Vivamus egestas pede non urna. In  dapibus lorem scelerisque dui. Pellentesque vehicula laoreet dui.  Quisque ac risus. Donec sodales, sapien in egestas semper, erat dolor  ullamcorper urna, eget gravida quam urna sed dui. In dolor magna,  sagittis placerat, elementum id, elementum sed, eros. Sed placerat,  enim facilisis cursus adipiscing, felis libero congue orci, at pulvinar  enim diam a diam. Phasellus ultricies. Curabitur ornare iaculis purus.  Nam lacus risus, iaculis vel, tristique et, ultrices id, mauris.  Aliquam erat volutpat. </p>
    </blockquote>
    <p>Pellentesque facilisis vehicula tortor. Sed pretium faucibus augue.  Nullam eu erat id mi elementum eleifend. Curabitur adipiscing mauris  sit amet mauris. Cras pharetra elit eu enim. Mauris pharetra fermentum  nunc. Donec porttitor. Suspendisse sit amet felis. Maecenas sodales  pellentesque orci. Nullam eu tortor eget mauris sodales fermentum. Cum  sociis natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus. Nam viverra tellus eu sem. Pellentesque porta justo sit  amet sapien. Phasellus euismod erat. </p>
    <p>&nbsp;</p>
  </div>
  <div class="spacer"></div>
  <div id="footer"> &copy; Put your Copyright text here<br />
    Designed by <a href="http://ramblingsoul.com">Rambling Soul </a></div>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.bestwebdesign
29.beta
30.beyond
31.bigdeal
32.BigSpaceLove
33.bioessence
34.Biru_Manteb
35.bittersweet
36.Black
37.chamberlandsrestaurant
38.chara
39.characterized
40.charcoal
41.charitable-organization
42.chary
43.chasmogamous
44.chesspiece
45.chic
46.chicanery
47.chromz
48.churchsitev.2
49.citrus-island1-1
50.clementine
51.clicker
52.modernclassic
53.modernmagic
54.modernworld
55.A_Simple_Theme
56.minimalistica
57.miniseries
58.mint-idea
59.minty
60.mirax
61.miscellaneous
62.mistybud
63.mlpdesign02
64.mlpdesign03
65.mlpdesign04
66.mlpdesign08
67.model-4-me
68.model-portfolio
69.modelagency
70.modelportfolio
71.model_2
72.moderna
73.Modified
74.modulation
75.module-mag
76.mokofactory
77.monster
78.mork-horisont
79.mountainbreeze
80.mouse
81.mrtechie
82.multiflex2
83.multiple
84.multiplex
85.music
86.muzzle
87.MyCode
88.mydiary
89.myfamily
90.myhedspacefree08
91.mykindathing
92.myportfolio
93.mystic-garden
94.Mythology
95.myvalentine
96.naeve
97.natheless
98.nationalpark
99.neapolitan
100.neatness
101.nebuladog
102.nedweb
103.NelVoize
104.neoneon
105.neonix
106.neoplanet-01
107.neotech
108.netindustries
109.neuphoric
110.neutral
111.neutraldesk
112.neutralgreen
113.new kitchen design
114.new-fast-host
115.new-home
116.new-rise