Membuat Design Website Dengan Thema Wonderful Indonesia

Membuat Design Website Dengan Thema Wonderful Indonesia - Blogger Agus Tutorial

Kali ini saya ingin sharing artikel yang berjudul Membuat Design Website Dengan Thema Wonderful Indonesia. Pada artikel ini saya mendapat inspirasi design dari situs wonderful indonesia sendiri http://www.indonesia.travel , design ini terkesan sangat elegan dan bersih ketika masuk ke interface. Pada penggunaan jenis font saya menggunakan link online dari google font. Nah untuk codenya kamu bisa lihat dibawah ini :
Baca juga : Google Font Terbaik untuk Font Website dan Blog
  1. Buat dulu kode htmlnya seperti dibawah ini dan letakan pada text editor kamu :  
    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Welcome to Home Page</title>
     <link rel="stylesheet" href="style.css"/>
     <link href="https://fonts.googleapis.com/css?family=Coiny|Roboto" rel="stylesheet"/>
    </head>
    <body>
     <nav>
      <div class="logo"><img src="http://www.kemenpar.go.id/image/contenttransaction/3169.png" width="200" alt=""></div>
      <ul>
       <li><a href="">Home</a></li>
       <li><a href="">About</a></li>
       <li><a href="">Contact</a></li>
       <li><a href="">Gallery</a></li>
      </ul>
     </nav>
     <header>
      <h1><span>Indo</span>nesia</h1>
     </header>
     <div class="content-top">
      <div class="container">
       <div class="col-3">
        <div class="card">
         <img src="https://assets-a2.kompasiana.com/items/album/2017/12/16/bali-5a35170abde57510bf068dd2.jpg?t=o&v=760" alt="">
        <div class="card-body">
         <h3>Name The Place</h3>
         <a href="" class="btn btn-red">Read More</a>    
        </div>
        </div>
       </div>   
       <div class="col-3">
        <div class="card">
         <img src="https://cdns.klimg.com/dream.co.id/resized/630x440/news/2017/04/07/54561/hebat-daya-saing-pariwisata-indonesia-melejit-8-peringkat-170407r_3x2.jpg" alt="">
        <div class="card-body">
         <h3>Name The Place</h3>
         <a href="" class="btn btn-red">Read More</a>    
        </div>
        </div>
       </div>   
       <div class="col-3">
        <div class="card">
         <img src="http://www.ultimoparadiso.com/wp-content/uploads/2015/05/Potensi-Wisata-Alam-Gunung-Bromo-Jawa-Timur-.jpg" alt="">
        <div class="card-body">
         <h3>Name The Place</h3>
         <a href="" class="btn btn-red">Read More</a>     
        </div>
        </div>
       </div>    
       <div class="col-3">
        <div class="card">
         <img src="https://trubus.id/images/post/890-512-18-09-2017-pariwisata-indonesia-semakin-dinikmati-turis-mancanegara-1505707180.jpg" alt="">
        <div class="card-body">
         <h3>Name The Place</h3>
         <a href="" class="btn btn-red">Read More</a>    
        </div>
        </div>
       </div>  
      </div>
     </div>
     
     <div class="content-center">
      <div class="container">
       <h2 class="title">Destinations Highlight</h2>
       <div class="col-3">
        <div class="card">
         <img src="https://cdns.klimg.com/dream.co.id/resized/630x440/news/2017/04/07/54561/hebat-daya-saing-pariwisata-indonesia-melejit-8-peringkat-170407r_3x2.jpg" alt="">
        <div class="card-body">
         <h3>Name The Place</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         <a href="" class="btn btn-purple">Read More</a>    
        </div>
        </div>
       </div>   
       <div class="col-3">
        <div class="card">
         <img src="https://cdns.klimg.com/dream.co.id/resized/630x440/news/2017/04/07/54561/hebat-daya-saing-pariwisata-indonesia-melejit-8-peringkat-170407r_3x2.jpg" alt="">
        <div class="card-body">
         <h3>Name The Place</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         <a href="" class="btn btn-purple">Read More</a>    
        </div>
        </div>
       </div>   
       <div class="col-3">
        <div class="card">
         <img src="https://cdns.klimg.com/dream.co.id/resized/630x440/news/2017/04/07/54561/hebat-daya-saing-pariwisata-indonesia-melejit-8-peringkat-170407r_3x2.jpg" alt="">
        <div class="card-body">
         <h3>Name The Place</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         <a href="" class="btn btn-purple">Read More</a>    
        </div>
        </div>
       </div>   
       <div class="col-3">
        <div class="card">
         <img src="https://cdns.klimg.com/dream.co.id/resized/630x440/news/2017/04/07/54561/hebat-daya-saing-pariwisata-indonesia-melejit-8-peringkat-170407r_3x2.jpg" alt="">
        <div class="card-body">
         <h3>Name The Place</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
         <a href="" class="btn btn-purple">Read More</a>    
        </div>
        </div>
       </div> 
       <button class="btn-lg">Load More</button>
       <br/>
      </div>
     </div>

     <div class="content-author">
      <div class="container">
       <div class="col-6 line">
        <img src="https://www.shareicon.net/download/2016/09/01/822739_user_512x512.png" alt="">
        <h1>Owner name</h1><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa porro, ducimus fugiat libero aspernatur fugit vero sed temporibus autem excepturi.</p>
       </div>   
       <div class="col-6">
        <img src="https://www.shareicon.net/data/2016/09/01/822711_user_512x512.png" alt="">
        <h1>Owner name</h1><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, modi, reprehenderit eveniet et fugiat atque assumenda accusantium eos vitae suscipit similique.</p>
       </div>
      </div>
     </div>
     <footer>
      &copy;Copyright 2018.All rights reserved
     </footer>
    </body>
    </html>
  2. Jika kode html diatas sudah didimpan, Selanjutnya buat file css dengan nama style.css seperti dibawah ini : 
    *{
        margin:0 auto;
        box-sizing:border-box;
        font-family: 'Roboto', cursive;
        font-weight: 100;
    }
    .container{
     width: 90%;
    }
    .col-3{
        width:25%;
        padding:15px;
    }
    .title{
        font-family: 'Coiny', cursive;
        color: #f94444;
        text-align: center;
        font-size: 30px;
    }
    nav{
        position:fixed;
        top: 0;
        background-color:white;
        width:100%;
        height:auto;
        text-align:center;
        z-index: 9;
    }
    nav ul {
     padding: 0px;
        border-top: 1px solid #eaeaea; 
        border-bottom: 1px solid #eaeaea;    
    }
    nav ul li{
        list-style:none;
        display:inline-block;
    }
    nav li a{
     font-family: 'Coiny', cursive;
        position:relative;
        color:#656565;
        text-decoration:none;
        padding:20px 10px;
        display:block;
        transition: all 0.9s ease-in-out;
    }
    nav ul li a:hover:before{
     opacity: 1;
    }
    nav ul li a:before{
        content: '';
        position:absolute;
        left:0;
        right:0;
        bottom: -20px;
        opacity: 0;
        margin:0 auto;
        border-color: #ffffff transparent transparent transparent; 
        border-width: 10px;
        border-style: solid;
        height: 0;
        width: 0;
    }
    header{
        background:url('https://w-dog.net/wallpapers/14/14/431540484234190/indonesia-java-children-bull-game-splashes-of-water-drops-light.jpg') 0px;
        background-size:cover;
        height:30em;
        width:100%;
     margin-top: 60px;
    }
    header h1{
        font-size: 80px;
        text-align: center;
        color: white;
        padding-top: 2em;
    }
    header h1 span{
     font-weight: bold;
        color: #f94444;
        font-size: 95px;
        text-shadow: 0px 1px 0px #ab1d1d;
    }
    .card{
     background-color: white;
        border-radius: 3px;
        overflow: hidden;
        text-align: center;
    }
    .card img{
        width:auto;
        max-width:100%;
        min-height:200px;
    }
    .card h3{
     padding: 10px 0px 20px 0px;
    }
    .card .card-body {
        border: 1px solid #d8d8d8;
        padding: 10px 0px 15px;
        margin-top: -6px;
        border-top-color: transparent;
    }
    .card .card-body p{
     font-size:13px;
     padding:0px 0px 10px;
     color:grey;
    }
    .btn-lg{
        background: #0185cd;
        font-size: 30px;
        text-align: center;
        border: 3px solid #0185cd;
        cursor: pointer;
        display: block;
        padding: 10px 50px;
        color: #ffffff;
        border-radius: 4px;    
    }
    .btn{
     text-decoration:none;
     color:white;
     border-radius:3px;
     background-color:transparent;
     padding:10px 15px;
     display:inline-block;
    }
    .btn-red{
     background-color: #f94444;
    }
    .btn-purple{
     background-color: #d5357d;
    }

    .content-author{
     padding: 30px;
     background: -webkit-linear-gradient(left,#b70def 25%,#d5357d,#d5357d);
     text-align: center;
     color: white;
     clear: both;
     overflow: auto;
    }
    .content-author img{
     width: 200px;
    }
    .content-author p{
     font-style: italic;
     padding: 0px 40px;
    }
    .line{
     position: relative;
    }
    .line:before{
     position: absolute;
        top: 0;
        right: 0;
        content: '';
        height: 80%;
        background-color: #e665c5;
        width: 1px;
    }
    footer{
        clear:both;
        background-color:white;
        border-top:1px solid #d4d4d4;
        text-align:center;
        padding:20px 8px;
    }

    @media screen and (max-width: 500px){
     .col-3{
      width: 100%;
     }
     header h1{
         font-size: 50px;
         text-align: center;
         color: white;
         padding-top: 5em;
     }
     header h1 span{
      font-weight: bold;
         color: #f94444;
         font-size: 50px;
         text-shadow: 0px 1px 0px #ab1d1d;
     } 
    }
    @media screen and (max-width: 680px){
     .col-3{
      width: 100%;
     }
    }
    @media screen and (min-width: 680px){
     [class*="col-"]{
         float:left;
         margin:0 auto;
     } 
     .col-3{
      width: 50%;
     } 
    }
    @media screen and (min-width: 980px){
     .content-top{
         clear: both;
         position: relative;
         top: -8em;  
     }
     .col-3{
      width: 25%;
     }  
     .col-6{
      width: 50%;
     }  
    }
  3. Yang terakhir kamu simpan hasil codinganya kemudian buka index.html di browser kamu dan lihat hasilnya. Cukup mudah bukan :-)
NB : Pastikan laptop/komputer kamu terhubung dengan koneksi internet ya agar proses load gambar bisa berhasil, karena saya mengambil bahan gambar semua dari situs internet hanya untuk percobaan saja.

Buat teman-teman yang ingin mendownload hasil diatas silahkan download kode sourcenya dibawah ini :


Sumber Url Gambar : 

  1. http://www.kemenpar.go.id/image/contenttransaction/3169.png
  2. https://assets-a2.kompasiana.com/items/album/2017/12/16/bali-5a35170abde57510bf068dd2.jpg?t=o&v=760
  3. https://cdns.klimg.com/dream.co.id/resized/630x440/news/2017/04/07/54561/hebat-daya-saing-pariwisata-indonesia-melejit-8-peringkat-170407r_3x2.jpg
  4. http://www.ultimoparadiso.com/wp-content/uploads/2015/05/Potensi-Wisata-Alam-Gunung-Bromo-Jawa-Timur-.jpg
  5. https://trubus.id/images/post/890-512-18-09-2017-pariwisata-indonesia-semakin-dinikmati-turis-mancanegara-1505707180.jpg
  6. https://www.shareicon.net/download/2016/09/01/822739_user_512x512.png
  7. https://www.shareicon.net/data/2016/09/01/822711_user_512x512.png
  8. https://w-dog.net/wallpapers/14/14/431540484234190/indonesia-java-children-bull-game-splashes-of-water-drops-light.jpg
Ok, sekian dulu sharing ilmu dari saya. Terima kasih sudah membaca artikel ini, jika ada pertanyaan yang ingin teman-teman tanyakan silahkan berkomentar di bawah ini. Happy Coding :)

Comments

Post a Comment

Popular posts from this blog

Membuat Palindrome Checker

Image
Tutorial kali ini saya ingin sharing tentang bagaimana membuat palindrome checker atau bahasa lainnya mendeteksi palindrome itu sendiri, mungkin dari kita belum mengetahui apa itu palindrome checker bukan ? sebelum melihat codenya saya akan membahas sedikit apa itu palindrome. Apa itu Palindrome ? Palindrom adalah sebuah kata, frasa, angka maupun susunan lainnya yang dapat dibaca dengan sama baik dari depan maupun belakang (spasi antara huruf-huruf biasanya diperbolehkan). dikutip dari  :  https://id.wikipedia.org/wiki/Palindrom Logika dari pembuatan program sederhana ini adalah : Kata pertama yang dimasukan disimpan di dalam sebuah variabel A. Lalu variabel A ini kita jadikan sebuah array dan membalikannya dari urutan nilai array terbesar ke terkecil. Hasil pengurutan itu kita simpan di sebuah variabel bernama B. Nah, sekarang kita samakan kata B dan A tersebut dengan menggunakan Kondisi IF. Jika variabel A sama dengan B maka itu disebut Palindrome, jika tidak maka bukan pali...
Read more

Menampilkan Bilangan Genap dan Ganjil dengan PHP

Image
Kali ini masih dengan tutorial yang sama yaitu php, nah pada kesempatan ini saya ingin sharing mengenai cara untuk  Menampilkan Bilangan Genap dan Ganjil dengan PHP . Disini logikanya untuk bilangan genap dan ganjil adalah bilangan genap ialah bilangan yang habis dibagi 2  dan bilangan ganjil ialah bilangan yang tidak  habis dibagi 2 maka akan menghasilkan sisa 1 atau lebih . Maka dari itu disini saya akan menggunakan fungsi Operator Aritmatika yaitu  Modulus ( Sisa Bagi ) yang dilambangkan dengan % . Ok langsung saja silahkan lihat sintaknya dibawah ini : Cara pertama menggunakan for : $genap = ""; $ganjil = ""; for($i=1;$i<=10;$i++){ $i%2==0 ? $genap .= $i." " : $ganjil .= $i." "; } echo "Bilangan Genap adalah $genap<br/>"; echo "Bilangan Ganjil adalah $ganjil<br/>"; /* hasilnya : Bilangan Genap adalah 2 4 6 8 10 Bilangan Ganjil adalah 1 3 5 7 9 */ Penjelasan : Pada sintak diatas terlihat ter...
Read more

Menghitung Jumlah Digit Suatu Karakter PHP

Image
Kembali lagi membahas tutorial tentang php, kali ini saya ingin sharing bagaimana cara  Menghitung Jumlah Digit Suatu Karakter . Disini saya menggunakan fungsi strlen pada php. Apa itu strlen ? strlen adalah sebuah fungsi dari php yang mempermudahkan kita untuk menghitung sebuah deretan angka atau huruf. Sebagai penjelasan dan contoh bisa dilihat dibawah ini : Menghitung digit tipe data integer : $var = 1234567; echo is_numeric($var) ? "Jumlah digit dari bilangan ".$var." adalah ".strlen($var) : 'Bukan Termasuk Angka'; Penjelasan : $var = 1234567 adalah nama variable untuk menampung nilai is_numeric($var) adalah fungsi pada php untuk mengecek apakah data yang ada divariable $var bertipe integer atau bukan, jika bertipe integer maka akan menampilkan jumlah digit, jika bukan maka akan menampilkan Bukan Termasuk Angka . Menghitung digit tipe data string : $var = "ininamaku"; echo is_string($var) ? "Jumlah digit dari huruf $var adalah ".st...
Read more