First Trip to Singapore

Hello it's been so long, almost two years i didn't write blog anymore and three weeks ago i'm joined a short conversation about fifteen minutes that inspire me to write blog again. So, start from now i'll implement the quote from that conversation. "DO THINGS, TELL PEOPLE"

In this page i'm not going to write about that conversation but i am going to write about my first trip to Singapore . Two weeks ago, i went to Singapore with nine people from Mozilla Community Indonesia . My departure from Soetta CGK is about 8.45pm WIB with Air France then touch down at SIN about 11pm local time. The real reason i went to Singapore is for attend Mozilla Leadership Summit, one of three Global Gathering for The Participation Leaders

 

"6pm - Soekarno Hatta Airport, Jakarta (Indonesia Bacth 1)" 

 

"ready for take off"

 

"arrived at Changi Airport, Singapore"

From Changi Airport, We went to the Hostel by Shuttle Bus . We stay for eight hours at Five Stones Hostel on Beach Road, after that we must go to Park Royal Hotel at Kitchener Road so we decided to walked to Bugis MRT Station and stop at Farrer Park MRT Station , the hotel is near from Farrer Park Station so we just need to walk about five minutes. We check in, and by the way, the receptionist that organize our data document is handsome eh haha :)) *(his name is Keneth) nevermind.

  

"I took this picture from shuttle bus" 

 

"I love the hostel's atmosphere" 

 

  

"In front of the Five Stone Hostel"  

 "went to Bugis MRT Station after check out - looks like we have been eliminated from an audition"

 

"By the way, the photo location is near from Five Stone Hostel. The Mural looks good right ? It's Hajji Lane " 

 "Finally, Check In Hotel"

Done for check in and the event start about 6pm local time, so we hangout as a tourist . The first destination is China Town. In there we looking for lunch and souvenir , we also went to Lomography and Tin Tin Shop and the important things is take a photo :p

 

"Buddha Tooth Relic Temple"

"Construction Near China Town"

 "TINTIN Shop"

Move from China Town, we went to Merlion (The Statue of Mermaid Lion) . Unfortunately the rain falls down so we are seeking shelter . About 30 minutes, the rain is stop and we are so happy cause we can take a photo and Merlion as a background, we also meet Iona and Michael Kohler there.

 

"Near Clark Quey MRT Station" 

 

"Cloudy Clark Quey"

 

"My umbrella is used by Kelimutu for save the camera from rain :'D , and i'm used my bag to save my self from rain hahaha"

"Photo Group w/ Iona and Michael Kohler *after rain"

After that we walked to Esplanade MRT for went to Garden By The Bay especially Flowers Dome and  Cloud Forest . For me, Garden By The Bay is really awesome, at Flower Dome i  can see many kind of flower all over the world and at Cloud Forest i can see the waterfall and also Lost World .
I found the unique Raflesia Flower from Lego, it's cute :D .

 

"tired face :p - brother Nuri took this picture @ Esplanade MRT Station" 

 "3 years ago, Eriska-my friend give me a postcard that show the Garden Rhapsody @ Garden By The Bay and this year i was there"

 "Marina Bay Sands"

 

"Flower Dome"

 

"Standing near of the waterfall @cloud forest - the lost world"

Then after being around and taking pictures, we decided to go back to the hotel because we must attend the Welcome Dinner of Mozilla Leadership Summit. 

Although it only has a short time, at least we visit the places that became icons of Singapore . Hope soon i can visit Singapore again ;)

By the way, sorry for my grammar and also i'm not a good writer :p


Next writing about Mozilla Leadership Summit, see you

Continue lendo

HTML5 Web Storage

Web Storage

Taukah kamu? HTML5 Web Storage merupakan tekhnologi yang lebih baik di bandingkan dengan cookies. Dengan HTML5, halaman web dapat menyimpan data secara lokal dalam browser pengguna.

Sebelumnya, hal ini dilakukan dengan cookies. Namun, Penyimpanan Web lebih aman dan lebih cepat. Data tidak disertakan dengan setiap permintaan server, tetapi digunakan hanya ketika meminta. Hal ini juga memungkinkan untuk menyimpan data dalam jumlah besar, tanpa mempengaruhi kinerja website.

Data disimpan dalam pasangan nama / nilai, dan halaman web hanya dapat mengakses data yang tersimpan dengan sendirinya.

Tidak seperti cookie, batas penyimpanan yang jauh lebih besar (setidaknya 5MB) dan informasi tidak pernah ditransfer ke server.

HTML5 Web Storage menyediakan dua objek baru untuk menyimpan data pada klien:

• window.localStorage - menyimpan data tanpa tanggal kedaluwarsa 
• code.sessionStorage - menyimpan data untuk satu sesi (data hilang  ketika tab ditutup)

Sebelum menggunakan penyimpanan web, periksa dukungan browser untuk localStorage dan sessionStorage:

if(typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
} 

LocalStorage ObjectObyek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.

contoh :

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Selengkapnya :

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
  {
  localStorage.lastname="Smith";
  document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>

</body>
</html>

Penjelasan Contoh:

• Buat pasangan kunci/nilai localStorage dengan kunci = “lastname” dan nilai = “Smith” 
• Mengambil nilai dari kunci “nama belakang” dan masukkan ke elemen dengan id = “hasil” 

Tip: Pasangan kunci/nilai selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan.

Obyek sessionStorage
Obyek sessionStorage sama dengan objek localStorage, kecuali bahwa ia menyimpan data hanya untuk satu sesi. Data akan dihapus bila pengguna menutup jendela browser.
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol, dalam sesi saat ini:

if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  }
else
  {
  sessionStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

Selengkapnya :

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (sessionStorage.clickcount)
    {
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }
  else
    {
    sessionStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>

Continue lendo

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>