Simple CSS3 Layout

Header + Text + Footer

by goodfriend

HTML

<div id="celek">
    <header>
        <div class="hornipad"><h1>ultricies</h1> adipiscing felis quis pharetra. Phasellus viverra diam et mi aliquam nec blandit nunc egestas.</div>
    </header>
    <div id="stred">
        <div class="stredpad">
             <h2>Lorem Ipsum</h2>

            <p>Mauris eget sodales eros. Nam mauris vel posuere ultricies, dui risus pretium elit, at aliquam nulla metus id massa. Duis laoreet fringilla laoreet. Quisque feugiat semper libero, id auctor felis eleifend nec. Donec adipiscing massa eu est facilisis fermentum. Mauris ac justo eget neque accumsan interdum in vitae arcu. Fusce ultricies adipiscing felis quis pharetra. Phasellus viverra diam et mi aliquam nec blandit nunc egestas. Vestibulum tincidunt faucibus dui, a dignissim ipsum gravida eget. Maecenas nec dolor non urna facilisis luctus. Ut ante velit, aliquet in blandit sit amet, vulputate eget urna. Maecenas diam tortor, iaculis quis mattis posuere, so fermentum,dales a nunc. Phasellus vehicula libero sed velit dapibus bibendum tristique mauris convallis. Integer gravida est eu mi semper id porta odio scelerisque.</p>
            <section>
            <article>
                Phasellus viverra diam et mi aliquam nec blandit nunc egestas. Vestibulum tincidunt faucibus dui, a dignissim ipsum gravida eget. Maecenas nec dolor non urna facilisis luctus. Ut ante velit, aliq
            </article>
            </section>
        </div>
    </div>
    <footer>
        <div class="footerpad">ce ultricies adipiscing felis quis pharetra. Phasellus viverra diam et mi aliquam nec blandit nunc egestas. Vestibulum tincidunt faucibus dui, a dignissim ipsum gravida eget. Maecenas nec dolor non urna facilisis luctus. Ut ante velit, aliquet in blandit sit amet, vulputate eget urna. Maecenas diam tortor, iaculis quis mattis posuere, sodales</div>
    </footer>
</div>

CSS

/* CSS Document */
 html, body {
    margin:0;
    padding:0;
    height:100%;
}
body {
    background-color: #9b9b9b;
    text-align:center;
}
body, td {
    font-size: 10pt;
    letter-spacing: 1px;
    color: #000;
    font-family: Georgia, "Century Gothic", Trajan Pro, "New York CE", utopia, serif
}
a:link, a:active, a:visited {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}
a:hover {
    color: #5b5b5b;
    letter-spacing: 1px;
}
.act:link, .act:active, .act:visited, .act:hover {
    color: #f5f384;
}
#celek {
    min-height:100%;
    width:100%;
    position:relative;
    text-align:center;
}

header {
    z-index: 1;
    -webkit-box-shadow:  1px 1px 10px 3px rgba(5, 5, 5, 0.5);
        
        box-shadow:  1px 1px 10px 3px rgba(5, 5, 5, 0.5);
    
    background: #ebe9f9; /* Old browsers */
background: -moz-linear-gradient(top,  #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebe9f9), color-stop(50%,#d8d0ef), color-stop(51%,#cec7ec), color-stop(100%,#c1bfea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ebe9f9 0%,#d8d0ef 50%,#cec7ec 51%,#c1bfea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=0 ); /* IE6-9 */

    display: block;
    width: 100%;
    height: 152px;
    text-align:justify;
    position:relative;
}
.hornipad {
    padding: 15px;
    font-weight: bold;
    font-variant: small-caps;
    text-transform: lowercase;
    font-size: 11pt;
    color: #000;

}

.hornipad h1{
        text-shadow:...