Membuat Template Online Shop Simple

Membuat Template Online Shop Simple - Blogger Agus Tutorial

Tutorial kali ini saya ingin sharing tentang bagaimana membuat design template online shop yang simple dengan html dan css saja. Alasan saya membuat design template ini karena ingin sekedar sharing saja dan untuk teman-teman saya yang ingin saya membuat design online shop ini. Nah, agar tidak lama-lama, silahkan perhatikan script dibawah ini :

  1. Sintak htmlnya untuk file index.html : 
    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>ViraShop</title>
     <link rel="stylesheet" href="assets/style.css"/>
     <link rel="stylesheet" href="plugin/awesome/css/font-awesome.min.css">
    </head>
    <body>
     <div class="container">
     <div class="logo">
      <h3>Vira Online Shop</h3>
     </div>
     <nav>
      <ul class="navbar">
       <li><a href="index.html">Home</a></li>
       <li><a href="">Category <i class="fa fa-angle-down"></i></a>
       <ul class="dropdown">
        <li><a href="">Pakaian</a></li>
        <li><a href="">Tas</a></li>
       </ul>
       </li>
       <li><a href="">Info</a></li>
       <li><a href="about.html">Tentang Kami</a></li>
       <li style="float: right;"><a href=""><i class="fa fa-shopping-cart"></i>&nbsp;</a></li>
       <li style="float: right;"><a href="login.html">Login</a></li>
      </ul>
     </nav>
     <header>
      <div class="container">
       <div class="col-6">
        <img src="assets/img/il_570xN.661731795_7gf2.jpg" alt="">
       </div>
       <div class="col-6">
        <h1>PROMO <span>10%</span></h1>
        <p>Baju Kaos <span>NEVER DIE</span></p><br>
        <a href="detail.html" class="btn btn-red btn-block">BUY</a> 
       </div>
      </div>
     </header>
     <div class="content-top">
       <div class="title-top">Top Brand</div>
       <div class="col-3">
        <div class="card">
         <img src="assets/img/membuat-baju-yang-menarik.png" alt="">
        <div class="card-body">
         <h3>Baju Gaul</h3>
         <p>IDR 500.000</p>
         <a href="detail.html" class="btn btn-red">SHOP</a>    
        </div>
        </div>
       </div>   
       <div class="col-3">
        <div class="card">
         <img src="assets/img/vans2.png" alt="">
        <div class="card-body">
         <h3>Sepatu Gaul</h3>
         <p>IDR 500.000</p>
         <a href="detail.html" class="btn btn-red">SHOP</a>    
        </div>
        </div>
       </div>   
       <div class="col-3">
        <div class="card">
         <img src="assets/img/20435741_B.png" alt="">
        <div class="card-body">
         <h3>Kemeja Gaul</h3>
         <p>IDR 500.000</p>
         <a href="detail.html" class="btn btn-red">SHOP</a>     
        </div>
        </div>
       </div>    
       <div class="col-3">
        <div class="card">
         <img src="assets/img/51aK7M9SIlL.jpg" alt="">
        <div class="card-body">
         <h3>Tas Gaul</h3>
         <p>IDR 500.000</p>
         <a href="detail.html" class="btn btn-red">SHOP</a>    
        </div>
        </div>
       </div>  
       <div class="col-3">
        <div class="card">
         <img src="assets/img/20435741_B.png" alt="">
        <div class="card-body">
         <h3>Kemeja Gaul</h3>
         <a href="detail.html" class="btn btn-red">SHOP</a>     
        </div>
        </div>
       </div>
       <div class="col-3">
        <div class="card">
         <img src="assets/img/membuat-baju-yang-menarik.png" alt="">
        <div class="card-body">
         <h3>Baju Gaul</h3>
         <a href="detail.html" class="btn btn-red">SHOP</a>    
        </div>
        </div>
       </div>   
       <div class="col-3">
        <div class="card">
         <img src="assets/img/vans2.png" alt="">
        <div class="card-body">
         <h3>Sepatu Gaul</h3>
         <a href="detail.html" class="btn btn-red">SHOP</a>    
        </div>
        </div>
       </div>       
       <div class="col-3">
        <div class="card">
         <img src="assets/img/51aK7M9SIlL.jpg" alt="">
        <div class="card-body">
         <h3>Tas Gaul</h3>
         <a href="detail.html" class="btn btn-red">SHOP</a>    
        </div>
        </div>
       </div>    
     </div>
     <footer>
      &copy;Copyright 2018.All rights reserved
     </footer>  
     </div>
    </body>
    </html>
  2. Sintak cssnya, dengan nama style.css : 

    @font-face {
      font-family: Roboto;
      src: url(font/Roboto-Regular.ttf); }
    * {
      margin: 0 auto;
      box-sizing: border-box;
      font-family: Roboto;
      font-weight: 100; }
    a{
      color: #ff2929;
      text-decoration: none;
    }
    strong{
      font-weight: bold!important;
    }
    hr{
        border: none;
        width: 100%;
        height: 1px;
        margin: 15px auto;
        background: #d8d8d8;
    }
    img{
      max-width: 100%;
    }
    table{
      width: 100%;
      text-align: center;
    }
    table tr td {
        padding: 10px;
    }
    .text-left{
      text-align: left;
    }
    .text-center{
      text-align: center;
    }
    .container {
      width: 90%; }

    .col-3 {
      width: 25%;
      padding: 15px; }

    .title {
      color: #ff2929;
      text-align: center;
      font-size: 30px; }

    .logo {
      text-align: center; }

    .logo h3 {
      font-size: 3em;
      padding: 20px 10px; }

    .form-login{
      box-shadow: 0px 0px 1px 1px silver;
      width: 400px;
      padding: 10px 25px;
      border-radius: 4px;
      margin: 2em auto; 
    }
    .form-login input[type="text"],
    .form-login input[type="password"]{
      border-radius: 3px;
      padding: 15px;
      font-size: 15px;
      border:1px solid silver;
    }
    .form-login input[type="submit"]{
      padding: 18px;
      border: 1px solid transparent;
      cursor: pointer;
      font-size: 15px;
      background: #ff2929;
      color: white;
    }

    .form-login input{
      padding: 10px;
      display: block;
      margin: 10px auto;
      width: 100%;
    }

    nav {
      border: 1px solid #eaeaea;
      width: 100%;
      text-align: center;
      position: relative; }

    nav .shop-cart:nth-child(2n),
    nav .shop-cart:nth-child(3n) {
      color: #ffffff;
      display: block;
      width: 30px;
      height: 30px;
      text-align: center;
      vertical-align: middle;
      border-radius: 50%;
      box-shadow: 0px 0px 1px 5px white;
      line-height: 1.8em;
      position: absolute;
     }
    nav .shop-cart:nth-child(2n){
      right: 1em;
      top: 1em;
    }
    nav .shop-cart:nth-child(3n){
      right: 4em;
      top: 1em;
    }

    nav ul.navbar {
      background: #ff2929;
      padding: 0px;
     }

    nav ul.navbar li {
      position: relative;
      list-style: none;
      display: inline-block; }
    nav ul.navbar li ul{
      position: absolute;
      padding: 0;
      left: 0;
      background-color: #FFF;
      display: none;
      width: 200px;
      box-shadow: 0px 1px 4px silver;
      z-index: 9;
    }
    nav ul.navbar li a {
      position: relative;
      color: #ffffff;
      text-decoration: none;
      padding: 20px 10px;
      display: block;
      transition: all 0.1s ease-in-out; }
    nav ul.navbar li:hover  {
      background-color: #dc0303;
    }
    nav ul.dropdown li:hover a{
      color: #FFF;
    }
    nav ul.navbar li:hover ul{
      box-shadow: 0px 2px 2px silver;
      display: block;
    }
    nav ul.dropdown{
      background-color: white;
    }
    nav ul.dropdown li{
      display: block;
    }
    nav ul.dropdown li a{
      color: silver;
      text-align: left;
      padding: 5px;
    }
    header {
      width: 100%;
      border: 1px solid #eaeaea;
      border-top-color: transparent;
      clear: both;
      position: relative;
      overflow: auto; }

    header img {
      margin-top: 2em;
      max-width: 100%; }

    header h1 {
      font-size: 80px;
      text-align: center;
      color: #ff2929;
      margin-top: 1em;
      padding: 10px;
      font-weight: bold;
      border-left: 5px solid #ff2929; }

    header p {
      color: #7d7d7d;
      margin-top: 50px;
      font-size: 2em; }

    header p span {
      font-weight: bold;
      color: #000000; }

    header h1 span {
      font-weight: bold;
      color: #ff2929;
      font-size: 95px;
      text-shadow: 0px 1px 0px #ab1d1d; }

    .title-top {
      color: white;
      position: relative;
      width:200px;
      padding: 20px 15px;
      margin: 0;
      overflow: hidden;
      background-color: #2dbb85; }
    .title-top:before{
      position: absolute;
      content: '';
      top: 0;
      right: 0;
      border: 30px solid transparent;
      border-right: 30px solid white;

    }

    .card {
      background-color: white;
      border-radius: 3px;
      overflow: hidden;
      cursor: pointer;
      text-align: center; }

    .card img {
      width: auto;
      max-width: 100%;
      min-height: 200px;
      max-height: 200px;
      transform: scale(0.5);
      transition: all 0.4s ease-in-out; }
    .card:hover img{
      transform: scale(1);
    }

    .card:hover {
      box-shadow: 0px 0px 10px silver;
    }
    .content-top:hover .card:not(:hover){
      -webkit-filter: grayscale(1);
              filter: grayscale(1);
            opacity: .20; 
          }
    .card h3 {
      padding: 10px 0px 20px 0px; }

    .card .card-body {
      border: 1px solid #d8d8d8;
      padding: 10px 0px 15px;
      border-bottom: 4px solid #ff2929; }

    .card .card-body p {
      font-size: 20px;
      padding: 0px 0px 10px;
      color: grey; }

    .btn-block {
      padding: 18px 50px !important;
      font-size: 20px;
      background-color: transparent !important;
      border: 2px solid #ff2929;
      color: #ff2929 !important;
      font-weight: bold; }

    .btn-block:hover {
      background-color: #ff2929 !important;
      color: #FFF !important; }

    .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: #ff2929; }

    .btn-purple {
      background-color: #d5357d; }



    .list-penjual{
      clear: both;
      box-shadow: 0px 0px 4px silver; 
      overflow: auto;
    }
    .list-penjual p>strong{
      background: #33bb7d;
      color: white;
      padding: 5px;
      border-radius: 4px;
      display: inline-block;
      margin: 10px;
    }


    footer {
        clear: both;
        background-color: white;
        border: 1px solid #eaeaea;
        border-bottom-color: transparent;
        border-top-color: transparent;
        text-align: center;
        padding: 20px 8px;}

    @media screen and (max-width: 500px) {
      .col-3 {
        width: 100%; }

      header {
        text-align: center;
        padding: 10px; }

      header h1 {
        font-size: 20px;
        text-align: center;
        color: white;
        padding-top: 0;
        margin-top: 0;
        padding: 10px;
        font-weight: bold;
        color: #ff2929;
        border-left: 5px solid #ff2929; }

      header h1 span {
        font-weight: bold;
        color: #ff2929;
        font-size: 20px;
        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;
        border: 1px solid #eaeaea;
        border-top-color: transparent;    
        position: relative;
        overflow: auto; }

      .col-3 {
        width: 25%; }

      .col-4 {
        width: 33.33%; }  

      .col-8 {
        width: 66.66%; }

      .col-6 {
        width: 50%; } }

    /*# sourceMappingURL=style.css.map */



Simpan sintak diatas dengan nama yang sudah saya jelaskan diatas. Maka hasilnya akan seperti gambar dibawah ini : 

Membuat Template Online Shop Simple - Blogger Agus Tutorial

Dari sintak diatas saya hanya memperlihatkan 2 sintak yaitu pada index.html dan style.css, sebenarnya masih ada lagi tetapi agar tidak panjang, silahkan download Source Codenya di bawah ini :

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