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

Belajar Membuat Form Pendaftaran HTML CSS

Oleh
Image
Belajar Membuat Form Pendaftaran HTML CSS~ Pada tutorial ini saya ingin mempostingkan  sebuah tutorial yaitu membuat form pendaftaran  dengan HTML CSS . Fungsi form pendaftaran dalam website ataupun aplikasi berbasis dekstop maupun android ialah agar kita bisa mempunyai sebuah akun untuk login atau masuk ke sebuah situs website dan lain-lainnya.  Ok langsung saja kita ke tahap-tahap pembuatannya dibawah ini : 1. Pertama teman-teman buat dahulu tag htmlnya, seperti dibawah ini : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form Pendaftaran</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <form action="" method="post"> <h2><i class="fa fa-user"></i>Form Pendaftaran</h2> <br/> ...
Read More

Pengalaman Diterima Oleh Google Adsense di Blogger

Oleh
Image
Kali ini saya ingin membagikan pengalaman saya setelah diterima oleh Google Adsense . Apa itu google adsense ? Google Adsense adalah cara sederhana buat kamu yang ingin mendapatkan penghasilan secara gratis melalui penempatan iklan di sebuah situs. Penghasilan yang anda dapat dari iklan google adsense ini cukup lumayan besar, tergantung dari besar kecilnya jumlah pengunjung yang datang ke situs anda. Nah, situs blog saya ini sebenarnya sudah lama dari tahun 2016 tetapi setiap saya meminta pengecekan apakah layak atau tidaknya situs saya, kerap kali saya menerima balasan email penolakan bahwa situs saya belum memenuhi syarat oleh google adsense dikarenakan beberapa faktor / syarat yang diberikan adsense untuk situs saya tidak sesuai. Saya sempat berpikir bahwa situs saya harus diganti domainnya menjadi .com dll selain .blogspot, dan saya pun menjadi putus asa setelah beberapa kali mencoba agar diterima oleh adsense. Pada tahun 2018 ini saya mulai semangat lagi untuk membu...
Read More