Cara Membuat Pricing Table Responsive Menggunakan CSS


HobbyTekno - Selamat datang, Kali ini Admin akan memberikan Tutorial Cara Membuat Pricing List yang Responsive dan juga keren, Langsung saja berikut langkah-langkahnya :

Langkah Membuat Pricing Table Responsive Menggunakan CSS


1. Salin code berikut ke Code Editor anda, lalu simpan sebagai file .html , misalnya : index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <br><br><br><br>
     <center><h1>Pricing Table Responsive by HobbyTekno</h1></center>
    <div class="container">
      <div class="pricing-table table1">
        <div class="pricing-header">
          <div class="price"><span>Rp.</span> 250.000 </div>
          <div class="title">Basic</div>
        </div>
        <ul class="pricing-list">
          <li><strong>20GB</strong> Storage</li>
          <div class="border"></div>
          <li><strong>4</strong> Email Address</li>
          <div class="border"></div>
          <li><strong>1</strong> Domain Name</li>
          <div class="border"></div>
          <li><strong>24h</strong> Support</li>
        </ul>
        <a href="#">Order Now</a>
      </div>
      <div class="pricing-table table2">
        <div class="pricing-header">
          <div class="price"><span>Rp.</span> 500.000</div>
          <div class="title">Pro</div>
        </div>
        <ul class="pricing-list">
          <li><strong>60GB</strong> Storage</li>
          <div class="border"></div>
          <li><strong>10</strong> Email Address</li>
          <div class="border"></div>
          <li><strong>3</strong> Domain Name</li>
          <div class="border"></div>
          <li><strong>24h</strong> Support</li>
        </ul>
        <a href="#">Order Now</a>
      </div>
      <div class="pricing-table table3">
        <div class="pricing-header">
          <div class="price"><span>Rp.</span>1.000.000</div>
          <div class="title">Premium</div>
        </div>
        <ul class="pricing-list">
          <li><strong>200GB</strong> Storage</li>
          <div class="border"></div>
          <li><strong>30</strong> Email Address</li>
          <div class="border"></div>
          <li><strong>10</strong> Domain Name</li>
          <div class="border"></div>
          <li><strong>24h</strong> Support</li>
        </ul>
        <a href="#">Order Now</a>
      </div>
    </div>
  </body>
</html>
2. Lalu salin lagi code CSS dibawah ini, simpan sebagai style.css
*{
  margin: 0;
  padding: 0;
  font-family: "Open Sans",sans-serif;
  text-decoration: none;
  list-style: none;
}
body{
  min-height: 100vh;
  background-color: lightblue;
}
.container{
  max-width: 1000px;
  margin: auto;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
}
.pricing-table{
  border-radius: 12px;
  background: #f1f1f1;
  flex: 1;
  margin: 10px;
  text-transform: uppercase;
}
.pricing-header{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  color: #fff;
  position: relative;
  margin-bottom: 20px;
}
.price{
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
.price span{
  font-size: 30px;
}
.title{
  border-radius: 12px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,50%);
  width: 80%;
  max-width: 360px;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
}
.pricing-list{
  padding: 10px 20px;
}
.pricing-list li{
  margin: 8px 0;
  font-size: 14px;
  color: #344;
  text-align: center;
}
.border{
  width: 80px;
  height: 1px;
  background: #ddd;
  margin: auto;
}
.pricing-table a{
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  border: 1px solid;
  max-width: 360px;
  transition: .2s linear;
}
.pricing-table a:hover{
  border-radius: 30px;
}
.table1 .pricing-header{
  background: #2980b9;
}
.table2 .pricing-header{
  background: #2c3e50;
}
.table3 .pricing-header{
  background: #c0392b;
}
.table1 .title{
  background-image: linear-gradient(125deg,#3498db,#9b59b6);
}
.table2 .title{
  background-image: linear-gradient(125deg,#34495e,#95a5a6);
}
.table3 .title{
  background-image: linear-gradient(125deg,#e74c3c,#f39c12);
}
.table1 a{
  color: #2980b9;
}
.table2 a{
  color: #2c3e50;
}
.table3 a{
  color: #c0392b;
}
.table1 a:hover{
  background: #2980b9;
  color: #fff;
}
.table2 a:hover{
  background: #2c3e50;
  color: #fff;
}
.table3 a:hover{
  background: #c0392b;
  color: #fff;
}
@media screen and (max-width:780px) {
  .pricing-table{
    flex: 100%;
  }
}
3. Selesai, Pricing Table Responsive pun sudah jadi, anda bisa mengubahnya sesuai keinginan anda.

Untuk DEMO silahkan klik link dibawah ini :
Demo

Sekian Cara Membuat Pricing Table Responsive Menggunakan CSS, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Cara Membuat Pricing Table Responsive Menggunakan CSS"