Kamis, 31 Juli 2014

HTML5 Webpage Layout Demo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5: Simple Website Layout Tutorial Using HTML 5</title>

    <style>
/*general style*/
    html, body { margin:0; padding:0;}
    header, hgroup, nav, section, article, aside, footer {display: block;}
    a {text-decoration:none; color:#000;}
    a:hover {text-decoration: underline;}
    hr {width: 380px}
    #wrapper {width: 600px; margin: 0 auto;}
/*header area*/
    header {height: 100px; background: #00C;}
    hgroup h1 {color: #FFF; padding: 22px 0 0 20px;}
/*nav area*/
    nav {width: 400px; height: 20px; background:#C66; margin-left: 200px;}
    nav ul {margin: 0 0 0 -10px;}
    nav li {float: left; list-style-type:none; padding: 0 10px;}
/*section area*/
    section {width:400px; background: #CCC; margin-top: -20px;}
    hgroup h2 {color: #000; padding: 10px 0 0 10px;}
    article {width:400px; background: #CCC;}
    article p {padding: 10px;}
/*aside area*/
    aside {width:200px; height: 605px; background: #666; float:right; margin-top: -1px;}
    hgroup h3 {color: #fff; padding: 10px 0 0 10px;}
    aside article {width:200px; background: #666; color:#FFF}
/*footer area*/
    footer {height: 40px; background: #09F; margin-top: -16px;}
    footer p {padding: 10px 0 0 10px;}
    </style>

</head>

    <body>
        <div id="wrapper">
      
            <header>
                <hgroup>
                    <h1>Test Site</h1>
                </hgroup>
              
                <nav>
                    <ul>
                        <li><a href="">item 1</a></li>
                        <li><a href="">item 2</a></li>
                        <li><a href="">item 3</a></li>
                        <li><a href="">item 4</a></li>
                        <li><a href="">item 5</a></li>
                        <li><a href="">item 6</a></li>
                    </ul>
                </nav>
            </header>
          
            <aside>
                <article>
                    <hgroup>
                        <h3>&lt;aside&gt;</h3>
                    </hgroup>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur turpis nunc, rhoncus non
                            mollis eget, gravida sed sem. Nam fringilla odio quis dolor tincidunt semper. Lorem ipsum
                            dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ipsum molestie vehicula
                            gravida, nulla nisi aliquet lectus, sit amet ultrices nibh mi nec magna. Cras ut ipsum sapien,
                            fringilla blandit mauris. Cras ut tortor massa, non elementum augue. Phasellus nisi mauris,
                            pellentesque quis tincidunt quis, tincidunt vitae quam. Proin felis lacus, tempor ac consectetur...
                        </p>
                </article>
            </aside>
          
            <section>
              
                <article>
                    <hgroup>
                        <h2>Article 1</h2>
                    </hgroup>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur turpis nunc, rhoncus non
                            mollis eget, gravida sed sem. Nam fringilla odio quis dolor tincidunt semper. Lorem ipsum
                            dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ipsum molestie vehicula
                            gravida, nulla nisi aliquet lectus, sit amet ultrices nibh mi nec magna. Cras ut ipsum sapien,
                            fringilla blandit mauris. Cras ut tortor massa, non elementum augue. Phasellus nisi mauris,
                            pellentesque quis tincidunt quis, tincidunt vitae quam. Proin felis lacus, tempor ac consectetur...
                        </p>
                </article>
                <hr/>
                <article>
                    <hgroup>
                        <h2>Article 2</h2>
                    </hgroup>
                        <p>
                            Etiam consectetur suscipit augue a faucibus. Pellentesque sit amet condimentum tortor. Suspendisse
                            laoreet, augue eget tincidunt vestibulum, augue neque luctus mi, in volutpat orci arcu eget dolor.
                            Integer quis mi ante. Suspendisse risus arcu, tincidunt et facilisis ut, iaculis at urna. Donec
                            nulla ipsum, lacinia sit amet venenatis at, facilisis eget metus. Quisque vitae metus velit. Morbi
                            porttitor accumsan neque sed aliquam. Sed urna quam, semper in egestas vel, egestas ut sem. Integer
                            ante orci, viverra sit amet faucibus vitae, rutrum at odio. Mauris adipiscing vulputate lorem, ac
                            mattis magna mattis imperdiet. Sed accumsan vulputate erat tempor dignissim. Donec at eros nisi.
                        </p>
                </article>
          
            </section>
  
          
            <footer>
                <p>Test Site &copy;</p>
            </footer>
          
        </div><!--End Wrapper-->
  
    </body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5: Simple Website Layout Tutorial Using HTML 5</title>
 
    <style>
/*general style*/
    html, body { margin:0; padding:0;}
    header, hgroup, nav, section, article, aside, footer {display: block;}
    a {text-decoration:none; color:#000;}
    a:hover {text-decoration: underline;}
    hr {width: 380px}
    #wrapper {width: 600px; margin: 0 auto;}
/*header area*/
    header {height: 100px; background: #00C;}
    hgroup h1 {color: #FFF; padding: 22px 0 0 20px;}
/*nav area*/
    nav {width: 400px; height: 20px; background:#C66; margin-left: 200px;}
    nav ul {margin: 0 0 0 -10px;}
    nav li {float: left; list-style-type:none; padding: 0 10px;}
/*section area*/
    section {width:400px; background: #CCC; margin-top: -20px;}
    hgroup h2 {color: #000; padding: 10px 0 0 10px;}
    article {width:400px; background: #CCC;}
    article p {padding: 10px;}
/*aside area*/
    aside {width:200px; height: 605px; background: #666; float:right; margin-top: -1px;}
    hgroup h3 {color: #fff; padding: 10px 0 0 10px;}
    aside article {width:200px; background: #666; color:#FFF}
/*footer area*/
    footer {height: 40px; background: #09F; margin-top: -16px;}
    footer p {padding: 10px 0 0 10px;}
    </style>
 
</head>
 
    <body>
        <div id="wrapper">
        
            <header>
                <hgroup>
                    <h1>Test Site</h1>
                </hgroup>
                
                <nav>
                    <ul>
                        <li><a href="">item 1</a></li>
                        <li><a href="">item 2</a></li>
                        <li><a href="">item 3</a></li>
                        <li><a href="">item 4</a></li>
                        <li><a href="">item 5</a></li>
                        <li><a href="">item 6</a></li>
                    </ul>
                </nav>
            </header>
            
            <aside>
                <article>
                    <hgroup>
                        <h3>&lt;aside&gt;</h3>
                    </hgroup>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur turpis nunc, rhoncus non
                            mollis eget, gravida sed sem. Nam fringilla odio quis dolor tincidunt semper. Lorem ipsum
                            dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ipsum molestie vehicula
                            gravida, nulla nisi aliquet lectus, sit amet ultrices nibh mi nec magna. Cras ut ipsum sapien,
                            fringilla blandit mauris. Cras ut tortor massa, non elementum augue. Phasellus nisi mauris,
                            pellentesque quis tincidunt quis, tincidunt vitae quam. Proin felis lacus, tempor ac consectetur...
                        </p>
                </article>
            </aside>
            
            <section>
                
                <article>
                    <hgroup>
                        <h2>Article 1</h2>
                    </hgroup>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur turpis nunc, rhoncus non
                            mollis eget, gravida sed sem. Nam fringilla odio quis dolor tincidunt semper. Lorem ipsum
                            dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ipsum molestie vehicula
                            gravida, nulla nisi aliquet lectus, sit amet ultrices nibh mi nec magna. Cras ut ipsum sapien,
                            fringilla blandit mauris. Cras ut tortor massa, non elementum augue. Phasellus nisi mauris,
                            pellentesque quis tincidunt quis, tincidunt vitae quam. Proin felis lacus, tempor ac consectetur...
                        </p>
                </article>
                <hr/>
                <article>
                    <hgroup>
                        <h2>Article 2</h2>
                    </hgroup>
                        <p>
                            Etiam consectetur suscipit augue a faucibus. Pellentesque sit amet condimentum tortor. Suspendisse
                            laoreet, augue eget tincidunt vestibulum, augue neque luctus mi, in volutpat orci arcu eget dolor.
                            Integer quis mi ante. Suspendisse risus arcu, tincidunt et facilisis ut, iaculis at urna. Donec
                            nulla ipsum, lacinia sit amet venenatis at, facilisis eget metus. Quisque vitae metus velit. Morbi
                            porttitor accumsan neque sed aliquam. Sed urna quam, semper in egestas vel, egestas ut sem. Integer
                            ante orci, viverra sit amet faucibus vitae, rutrum at odio. Mauris adipiscing vulputate lorem, ac
                            mattis magna mattis imperdiet. Sed accumsan vulputate erat tempor dignissim. Donec at eros nisi.
                        </p>
                </article>
            
            </section>
    
            
            <footer>
                <p>Test Site &copy;</p>
            </footer>
            
        </div><!--End Wrapper-->
    
    </body>
</html>
- See more at: http://www.jonwelshdesigns.co/html/html-demo/html5-layout-2/#sthash.FMAhlWb8.dpuf
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5: Simple Website Layout Tutorial Using HTML 5</title>
 
    <style>
/*general style*/
    html, body { margin:0; padding:0;}
    header, hgroup, nav, section, article, aside, footer {display: block;}
    a {text-decoration:none; color:#000;}
    a:hover {text-decoration: underline;}
    hr {width: 380px}
    #wrapper {width: 600px; margin: 0 auto;}
/*header area*/
    header {height: 100px; background: #00C;}
    hgroup h1 {color: #FFF; padding: 22px 0 0 20px;}
/*nav area*/
    nav {width: 400px; height: 20px; background:#C66; margin-left: 200px;}
    nav ul {margin: 0 0 0 -10px;}
    nav li {float: left; list-style-type:none; padding: 0 10px;}
/*section area*/
    section {width:400px; background: #CCC; margin-top: -20px;}
    hgroup h2 {color: #000; padding: 10px 0 0 10px;}
    article {width:400px; background: #CCC;}
    article p {padding: 10px;}
/*aside area*/
    aside {width:200px; height: 605px; background: #666; float:right; margin-top: -1px;}
    hgroup h3 {color: #fff; padding: 10px 0 0 10px;}
    aside article {width:200px; background: #666; color:#FFF}
/*footer area*/
    footer {height: 40px; background: #09F; margin-top: -16px;}
    footer p {padding: 10px 0 0 10px;}
    </style>
 
</head>
 
    <body>
        <div id="wrapper">
        
            <header>
                <hgroup>
                    <h1>Test Site</h1>
                </hgroup>
                
                <nav>
                    <ul>
                        <li><a href="">item 1</a></li>
                        <li><a href="">item 2</a></li>
                        <li><a href="">item 3</a></li>
                        <li><a href="">item 4</a></li>
                        <li><a href="">item 5</a></li>
                        <li><a href="">item 6</a></li>
                    </ul>
                </nav>
            </header>
            
            <aside>
                <article>
                    <hgroup>
                        <h3>&lt;aside&gt;</h3>
                    </hgroup>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur turpis nunc, rhoncus non
                            mollis eget, gravida sed sem. Nam fringilla odio quis dolor tincidunt semper. Lorem ipsum
                            dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ipsum molestie vehicula
                            gravida, nulla nisi aliquet lectus, sit amet ultrices nibh mi nec magna. Cras ut ipsum sapien,
                            fringilla blandit mauris. Cras ut tortor massa, non elementum augue. Phasellus nisi mauris,
                            pellentesque quis tincidunt quis, tincidunt vitae quam. Proin felis lacus, tempor ac consectetur...
                        </p>
                </article>
            </aside>
            
            <section>
                
                <article>
                    <hgroup>
                        <h2>Article 1</h2>
                    </hgroup>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur turpis nunc, rhoncus non
                            mollis eget, gravida sed sem. Nam fringilla odio quis dolor tincidunt semper. Lorem ipsum
                            dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ipsum molestie vehicula
                            gravida, nulla nisi aliquet lectus, sit amet ultrices nibh mi nec magna. Cras ut ipsum sapien,
                            fringilla blandit mauris. Cras ut tortor massa, non elementum augue. Phasellus nisi mauris,
                            pellentesque quis tincidunt quis, tincidunt vitae quam. Proin felis lacus, tempor ac consectetur...
                        </p>
                </article>
                <hr/>
                <article>
                    <hgroup>
                        <h2>Article 2</h2>
                    </hgroup>
                        <p>
                            Etiam consectetur suscipit augue a faucibus. Pellentesque sit amet condimentum tortor. Suspendisse
                            laoreet, augue eget tincidunt vestibulum, augue neque luctus mi, in volutpat orci arcu eget dolor.
                            Integer quis mi ante. Suspendisse risus arcu, tincidunt et facilisis ut, iaculis at urna. Donec
                            nulla ipsum, lacinia sit amet venenatis at, facilisis eget metus. Quisque vitae metus velit. Morbi
                            porttitor accumsan neque sed aliquam. Sed urna quam, semper in egestas vel, egestas ut sem. Integer
                            ante orci, viverra sit amet faucibus vitae, rutrum at odio. Mauris adipiscing vulputate lorem, ac
                            mattis magna mattis imperdiet. Sed accumsan vulputate erat tempor dignissim. Donec at eros nisi.
                        </p>
                </article>
            
            </section>
    
            
            <footer>
                <p>Test Site &copy;</p>
            </footer>
            
        </div><!--End Wrapper-->
    
    </body>
</html>
- See more at: http://www.jonwelshdesigns.co/html/html-demo/html5-layout-2/#sthash.FMAhlWb8.dpuf<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5: Simple Website Layout Tutorial Using HTML 5</title>

    <style>
/*general style*/
    html, body { margin:0; padding:0;}
    header, hgroup, nav, section, article, aside, footer {display: block;}
    a {text-decoration:none; color:#000;}
    a:hover {text-decoration: underline;}
    hr {width: 380px}
    #wrapper {width: 600px; margin: 0 auto;}
/*header area*/
    header {height: 100px; background: #00C;}
    hgroup h1 {color: #FFF; padding: 22px 0 0 20px;}
/*nav area*/
    nav {width: 400px; height: 20px; background:#C66; margin-left: 200px;}
    nav ul {margin: 0 0 0 -10px;}
    nav li {float: left; list-style-type:none; padding: 0 10px;}
/*section area*/
    section {width:400px; background: #CCC; margin-top: -20px;}
    hgroup h2 {color: #000; padding: 10px 0 0 10px;}
    article {width:400px; background: #CCC;}
    article p {padding: 10px;}
/*aside area*/
    aside {width:200px; height: 605px; background: #666; float:right; margin-top: -1px;}
    hgroup h3 {color: #fff; padding: 10px 0 0 10px;}
    aside article {width:200px; background: #666; color:#FFF}
/*footer area*/
    footer {height: 40px; background: #09F; margin-top: -16px;}
    footer p {padding: 10px 0 0 10px;}
    </style>

</head>

    <body>
        <div id="wrapper">
      
            <header>
                <hgroup>
                    <h1>Test Site</h1>
                </hgroup>
              
                <nav>
                    <ul>
                        <li><a href="">item 1</a></li>
                        <li><a href="">item 2</a></li>
                        <li><a href="">item 3</a></li>
                        <li><a href="">item 4</a></li>
                        <li><a href="">item 5</a></li>
                        <li><a href="">item 6</a></li>
                    </ul>
                </nav>
            </header>
          
            <aside>
                <article>
                    <hgroup>
                        <h3>&lt;aside&gt;</h3>
                    </hgroup>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur turpis nunc, rhoncus non
                            mollis eget, gravida sed sem. Nam fringilla odio quis dolor tincidunt semper. Lorem ipsum
                            dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ipsum molestie vehicula
                            gravida, nulla nisi aliquet lectus, sit amet ultrices nibh mi nec magna. Cras ut ipsum sapien,
                            fringilla blandit mauris. Cras ut tortor massa, non elementum augue. Phasellus nisi mauris,
                            pellentesque quis tincidunt quis, tincidunt vitae quam. Proin felis lacus, tempor ac consectetur...
                        </p>
                </article>
            </aside>
          
            <section>
              
                <article>
                    <hgroup>
                        <h2>Article 1</h2>
                    </hgroup>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur turpis nunc, rhoncus non
                            mollis eget, gravida sed sem. Nam fringilla odio quis dolor tincidunt semper. Lorem ipsum
                            dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ipsum molestie vehicula
                            gravida, nulla nisi aliquet lectus, sit amet ultrices nibh mi nec magna. Cras ut ipsum sapien,
                            fringilla blandit mauris. Cras ut tortor massa, non elementum augue. Phasellus nisi mauris,
                            pellentesque quis tincidunt quis, tincidunt vitae quam. Proin felis lacus, tempor ac consectetur...
                        </p>
                </article>
                <hr/>
                <article>
                    <hgroup>
                        <h2>Article 2</h2>
                    </hgroup>
                        <p>
                            Etiam consectetur suscipit augue a faucibus. Pellentesque sit amet condimentum tortor. Suspendisse
                            laoreet, augue eget tincidunt vestibulum, augue neque luctus mi, in volutpat orci arcu eget dolor.
                            Integer quis mi ante. Suspendisse risus arcu, tincidunt et facilisis ut, iaculis at urna. Donec
                            nulla ipsum, lacinia sit amet venenatis at, facilisis eget metus. Quisque vitae metus velit. Morbi
                            porttitor accumsan neque sed aliquam. Sed urna quam, semper in egestas vel, egestas ut sem. Integer
                            ante orci, viverra sit amet faucibus vitae, rutrum at odio. Mauris adipiscing vulputate lorem, ac
                            mattis magna mattis imperdiet. Sed accumsan vulputate erat tempor dignissim. Donec at eros nisi.
                        </p>
                </article>
          
            </section>
  
          
            <footer>
                <p>Test Site &copy;</p>
            </footer>
          
        </div><!--End Wrapper-->
  
    </body>
</html>
HTML5: Simple Website Layout Tutorial Using HTML 5

Test Site

Article 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur turpis nunc, rhoncus non mollis eget, gravida sed sem. Nam fringilla odio quis dolor tincidunt semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ipsum molestie vehicula gravida, nulla nisi aliquet lectus, sit amet ultrices nibh mi nec magna. Cras ut ipsum sapien, fringilla blandit mauris. Cras ut tortor massa, non elementum augue. Phasellus nisi mauris, pellentesque quis tincidunt quis, tincidunt vitae quam. Proin felis lacus, tempor ac consectetur...

Article 2

Etiam consectetur suscipit augue a faucibus. Pellentesque sit amet condimentum tortor. Suspendisse laoreet, augue eget tincidunt vestibulum, augue neque luctus mi, in volutpat orci arcu eget dolor. Integer quis mi ante. Suspendisse risus arcu, tincidunt et facilisis ut, iaculis at urna. Donec nulla ipsum, lacinia sit amet venenatis at, facilisis eget metus. Quisque vitae metus velit. Morbi porttitor accumsan neque sed aliquam. Sed urna quam, semper in egestas vel, egestas ut sem. Integer ante orci, viverra sit amet faucibus vitae, rutrum at odio. Mauris adipiscing vulputate lorem, ac mattis magna mattis imperdiet. Sed accumsan vulputate erat tempor dignissim. Donec at eros nisi.

Test Site ©

Diposting oleh Unknown di 23.11
Label: ,

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 

Deryan E.M. Copyright © 2011 | Template design by O Pregador | Powered by Blogger Templates