Membuat Template Online Shop Simple

Oleh
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

Membedakan Bilangan Positif dan Negatif dengan PHP

Oleh
Image
Membedakan Bilangan Positif dan Negatif dengan PHP. Kali ini saya ingin sharing tutorial bagaimana membedakan antara bilangan negatif dan positif menggunakan program PHP. Pada konsep dasarnya cara membedakannya ialah jika suatu bilangan tersebut nilainya kurang dari 0 maka bilangan tersebut dianggap bilangan Negatif , begitu sebaliknya jika bilangan itu nilainya lebih dari 0 maka bilangan tersebut dianggap Positif . Dibawah ini adalah sintak codenya :  Sintak PHP : $input = -10; if($input < 0){ echo "Bilangan $input adalah bilangan <strong>Negatif</strong>"; }elseif($input > 0){ echo "Bilangan $input adalah bilangan <strong>Positif</strong>"; }else{ echo "Bilangan $input adalah netral"; } /*Outputnya : Bilangan -10 adalah bilangan Negatif */ Maka hasil dari sintak php diatas adalah Bilangan -10 adalah bilangan Negatif, karena bilangan -10 kurang dari 0. Ok, sekian dulu sharing ilmu dari saya. Terima ka
Read More