Jumat, 01 Agustus 2014

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
Diposting oleh Unknown di 00.48 0 komentar
Label: ,

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 ©

Continue lendo
Diposting oleh Unknown di 23.11 0 komentar
Label: ,
Langganan: Postingan (Atom)
 

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