happyeaster : Holiday « Templates « HTML / CSS






happyeaster

   

<!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-AU">
<head>
<title>Happy Easter</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
* {
  padding: 0px;
  margin: 0px;
}

html {
  height: 100%;
}

body {
  /* color: #F7B866; */
  color: #6C5530;
  font-family: arial;
  height: 100%;
  background: #9BCFF3;
  overflow: visible;
}


/*         HEADER         */

.header {
  position: relative;
  text-align: center;
  width: 100%;
  height: 100px;
  margin: 0 0 10px 0;
  border-bottom: 5px solid #6C5530;
  color: #8DDDD6;
  background: url('happyeaster-images/header.png');
  padding-top: 40px;
}

.header h1 {
  font-family: serif;
  color: #6C5530;
  display: block;
  height: 40px;
  overflow: hidden;
  background: url('happyeaster-images/header2.gif') center bottom no-repeat;
}

.header .slogan {
  display: block;
  position: relative;
  bottom: -20px;
  width: 200px;
  height: 25px;
  background: url('happyeaster-images/slogan.gif') center center no-repeat;
  margin: 0 auto;
  color: #fff;
  padding-top: 15px;
  font-size: 12px;
  font-weight: bold;
}

/*        CONTENT WRAPPER        */

.wrapper {
  display: block;
  width: 50%;
  margin: 0 auto;
  padding-bottom: 0px;
  //padding-bottom: 0px;
  background: #226688;
  position: relative;
  min-height: 100%;
  background: #fff;
  border-left: 3px solid #1B5882;
  border-right: 3px solid #1B5882;
}

* html .wrapper {
  height: 100%;
}

/*      LEFT     */

.left {
  float: left;
  width: 95%;
  padding: 15px 5px;
  margin: 0 auto;
}

.entry {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 10px;
}

.entry h2 {
  text-transform: uppercase;
  text-decoration: underline;
  padding-bottom: 10px;
  color: #1B5882;
}

.entry p {
  text-align: justify;
  padding: 10px;
  line-height: 20px;
}

.entry img {
  float: left;
  margin: 5%;
  border: none;
}

.entry a img {
  border: none;
}

.entry .preview {
  display: block;
  width: 20%;
  margin: 2%;
  border: 1px solid #3C2819;
  padding: 5px;
}

.entry .preview a {
  border: none;
  text-decoration: none;
}

.entry .preview img {
  width: 175px;
  margin: 2px auto;
  border: none;
  float: none;
  display: block;
}

form textarea {
  widht: 100%;
  margin: 0 auto;
}


/*         RIGHT         */

.right {
  position: absolute;
  top: 140px;
  right: 9.5%;
  width: 15%;
  float: right;
  padding: 10px 2px;
  background: #1B5882;
  color: #8DDDD6;
}

.links {
  width: 80%;
  margin: 0 auto;
  font-weight: bold;
}

.right .links a {
  display: block;
  border-bottom: 1px solid #9BCFF3;
  width: 80%;
  padding: 10% 10%;
  text-decoration: none;
  color: #fff;
}

.right .links a:hover, .right .links a#active {
  background: #072235;
}

.right .links ul, .right .links li {
  list-style: none;
}


/*     FOOTER     */

.footer {
  font-weight: bold;
  color: #fff;
  display: block;
  height: 20px;
  clear: both;
  text-align: center;
  width: 100%;
  padding: 5px 0;
  background: #1B5882;
  position: relative;
  margin-top: -30px;
}

.footer a {
  color: #fff;
}

a {
  color: #1B5882;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

.clear {
  width: 100%;
  clear: both;
}

.small {
  font-size: small;
  float: right;
  margin-top: -10px;
  width: 100%;
}

</style>


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
</head>
<body>
<div class="wrapper">
  <div class="header">
    <h1>Happy Easter</h1>
    <div class="slogan">The Reason<br/>
      For The Season</div>
  </div>
  <div class="clear"></div>
  <div class="left">
    <div class="entry">
      <h2>Romans 6:8-11</h2>
      <p>Now if we be dead with Christ, we believe that we shall also live with him:</p>
      <p>Knowing that Christ being raised from the dead <a href="http://www.free-css.com/">dieth no more</a>; death hath no more dominion over him.</p>
      <p>For in that he died, he died unto sin once: but in that he liveth, he liveth unto God.</p>
      <p>Likewise reckon ye also yourselves to be dead indeed unto sin, but <a href="http://www.free-css.com/">alive unto God</a> through Jesus Christ our Lord.</p>
    </div>
    <div class="entry">
      <h2>Christ the Lord Is Risen Today</h2>
      <p>Christ the Lord is risen today, Alleluia! Earth and heaven in chorus say, Alleluia! Raise your joys and triumphs high, Alleluia! Sing, ye heavens, and earth reply, Alleluia!</p>
      <p> <a href="http://www.free-css.com/">Love's redeeming work is done</a>, Alleluia! Fought the fight, the battle won, Alleluia! Death in vain forbids him rise, Alleluia! Christ has opened paradise, Alleluia! </p>
      <p>Lives again our glorious King, Alleluia! Where, O death, is now thy sting? Alleluia! Once he died our <a href="http://www.free-css.com/">souls to save</a>, Alleluia! Where's thy victory, boasting grave? Alleluia! </p>
      <p><span class="small">by:Charles Wesley</span></p>
    </div>
    <div class="entry">
      <h2>Matthew 28:1-10</h2>
      <p>In the end of the sabbath, as it began to dawn toward the first day of the week, came Mary Magdalene and the other Mary to see the sepulchre.</p>
      <p>And, behold, there was a great earthquake: for the angel of the Lord descended from heaven, and came and rolled back the stone from the door, and sat upon it.</p>
      <p>His countenance was like lightning, and his raiment white as snow:</p>
      <p>And for fear of him the keepers did shake, and became as dead men.</p>
      <p>And the angel answered and said unto the women, Fear not ye: for I know that ye seek Jesus, which was crucified.</p>
      <p>He is not here: for he is risen, as he said. Come, see the place where the Lord lay.</p>
      <p>And go quickly, and tell his disciples that he is risen from the dead; and, behold, he goeth before you into Galilee; there shall ye see him: lo, I have told you.</p>
      <p>And they departed quickly from the sepulchre with fear and great joy; and did run to bring his disciples word.</p>
      <p>And as they went to tell his disciples, behold, Jesus met them, saying, All hail. And they came and held him by the feet, and worshipped him.</p>
      <p>Then said Jesus unto them, Be not afraid: go tell my brethren that they go into Galilee, and there shall they see me.</p>
      <p>[ <a href="http://www.free-css.com/">READ MORE</a>]</p>
    </div>
  </div>
  <div class="clear"></div>
</div>
<div class="right">
  <div class="links"> <a id="active" href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">The Reason</a> <a href="http://www.free-css.com/">Graystatic</a> <a href="http://www.free-css.com/">PW2</a> <a href="http://www.free-css.com/">ABC's</a> </div>
</div>
<div class="footer">
  <p>designed by <a href="http://graystatic.net">graystatic</a> |  &copy; 2007 </p>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

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