• Merhaba arkadaşlar, Sizlere daha iyi hizmet verebilmek için forumdaki değişiklikler hızla devam ediyor. İstek ve önerilerinizi Bize Ulaşın kısmından gönderebilirsiniz. Bizi bu yolda yanlız bırakmadığınız için teşekkür ederiz.

HTML Fiyat Tablosu

bursa kiralık vinç

DesignerAtakan

Grafik Designer
Katılım
27 Eki 2020
Mesajlar
63
Tepki puanı
22
Puanları
18
Konum
istanbul
Selamlar arkadaşlar Html + Style.css ile oluşturulmuş Fiyat tablosunu sizlere sunmak isterim isteyen bu şekil kullana bilir isteyen css den renk ayarlarını kendi zevkine göre düzenleye bilir.

Dileyen aşşagıya ekledigim kod ları alıp kullana bilir ek olarak dosya olarakda ekleyecem arşive almak isteyenler için.

HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Pricing Table</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<body>
  <div class="container">
    <div class="column">
      <div class="pricing-card basic">
        <div class="pricing-header">
          <span class="plan-title">BASIC PLAN</span>
          <div class="price-circle">
            <span class="price-title">
              <small>$</small><span>6.95</span>
            </span>
            <span class="info">/ Month</span>
          </div>
        </div>
        <div class="badge-box">
          <span>Save 35%</span>
        </div>
        <ul>
          <li>
            <strong>1</strong> Domain
          </li>
          <li>
            <strong>10 GB</strong> Disk Space
          </li>
          <li>
            <strong>50 GB</strong> Bandwith
          </li>
          <li>
            <strong>1 Free</strong> Domain
          </li>
          <li>
            <strong>1 FTP</strong> Account
          </li>
        </ul>
        <div class="buy-button-box">
          <a href="#" class="buy-now">BUY NOW</a>
        </div>      
      </div>
    </div>
    <div class="column">
      <div class="pricing-card echo">
        <div class="pricing-header">
          <span class="plan-title">ECHO PLAN</span>
          <div class="price-circle">
            <span class="price-title">
              <small>$</small><span>16.95</span>
            </span>
            <span class="info">/ Month</span>
          </div>
        </div>
        <div class="badge-box">
          <span>Save 15%</span>
        </div>
        <ul>
          <li>
            <strong>5</strong> Domains
          </li>
          <li>
            <strong>50 GB</strong> Disk Space
          </li>
          <li>
            <strong>250 GB</strong> Bandwith
          </li>
          <li>
            <strong>2 Free</strong> Domains
          </li>
          <li>
            <strong>Unlimited FTP</strong> Account
          </li>
        </ul>
        <div class="buy-button-box">
          <a href="#" class="buy-now">BUY NOW</a>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="pricing-card pro">
        <div class="popular">POPULAR</div>
        <div class="pricing-header">
          <span class="plan-title">PRO PLAN</span>
          <div class="price-circle">
            <span class="price-title">
              <small>$</small><span>23.95</span>
            </span>
            <span class="info">/ Month</span>
          </div>
        </div>
        <div class="badge-box">
          <span>Save 8%</span>
        </div>
        <ul>
          <li>
            <strong>10</strong> Domains
          </li>
          <li>
            <strong>100 GB</strong> Disk Space
          </li>
          <li>
            <strong>Unlimited</strong> Bandwith
          </li>
          <li>
            <strong>3 Free</strong> Domains
          </li>
          <li>
            <strong>Unlimited FTP</strong> Account
          </li>
        </ul>
        <div class="buy-button-box">
          <a href="#" class="buy-now">BUY NOW</a>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="pricing-card business">
        <div class="pricing-header">
          <span class="plan-title">BUSINESS PLAN</span>
          <div class="price-circle">
            <span class="price-title">
              <small>$</small><span>59.95</span>
            </span>
            <span class="info">/ Month</span>
          </div>
        </div>
        <div class="badge-box">
          <span>Save 5%</span>
        </div>
        <ul>
          <li>
            <strong>Unlimited</strong> Domain
          </li>
          <li>
            <strong>250 GB</strong> Disk Space
          </li>
          <li>
            <strong>Unlimited</strong> Bandwith
          </li>
          <li>
            <strong>5 Free</strong> Domains
          </li>
          <li>
            <strong>Unlimited FTP</strong> Account
          </li>
        </ul>
        <div class="buy-button-box">
          <a href="#" class="buy-now">BUY NOW</a>
        </div>
      </div>
    </div>
  </div>
</body>
<!-- partial -->

</body>
</html>


CSS:
@import url("https://fonts.googleapis.com/css?family=Montserrat");
* {
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

h2 {
  margin: 0;
}

/* Body */
/* Card Themes - Start */
.basic .pricing-header {
  background-color: #4b7bec;
}
.basic .price-circle {
  border: 10px solid #4b7bec;
  transition: all .4s;
}
.basic:hover .price-circle {
  border-width: 5px;
}
.basic .buy-now:hover {
  background-image: none !important;
  background-color: #4b7bec !important;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
}

.echo .pricing-header {
  background-color: #f7b731;
}
.echo .price-circle {
  border: 10px solid #f7b731;
  transition: all .4s;
}
.echo:hover .price-circle {
  border-width: 5px;
}
.echo .buy-now:hover {
  background-image: none !important;
  background-color: #f7b731 !important;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
}

.pro .pricing-header {
  background-color: #26de81;
}
.pro .price-circle {
  border: 10px solid #26de81;
  transition: all .4s;
}
.pro:hover .price-circle {
  border-width: 5px;
}
.pro .buy-now:hover {
  background-image: none !important;
  background-color: #26de81 !important;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
}

.business .pricing-header {
  background-color: #a55eea;
}
.business .price-circle {
  border: 10px solid #a55eea;
  transition: all .4s;
}
.business:hover .price-circle {
  border-width: 5px;
}
.business .buy-now:hover {
  background-image: none !important;
  background-color: #a55eea !important;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
}

/* Card Themes - End */
body {
  background-image: url(https://pngimage.net/wp-content/uploads/2018/06/flat-design-background-png-3.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin-top: 20px;
}

.container {
  max-width: 1200px;
  height: auto;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.column {
  flex: 25%;
  padding: 10px;
  width: calc(33.3% - 30px);
  box-sizing: border-box;
}
@media screen and (max-width: 980px) {
  .column {
    flex: 50%;
    display: block;
  }
}
@media screen and (max-width: 700px) {
  .column {
    flex: 100%;
    display: block;
  }
}

.pricing-card {
  -webkit-transition: 0.4s background-color ease;
  -ms-transition: 0.4s background-color ease;
  transition: 0.4s background-color ease;
  height: 600px;
  background-color: white;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  position: relative;
  transition: all .4s;
}
.pricing-card:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}
.pricing-card .popular {
  position: absolute;
  top: 0;
  right: 5%;
  width: auto;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #eb3b5a;
  color: white;
  font-size: 12px;
  z-index: 1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.pricing-card .badge-box {
  padding: 0 40px;
  margin-top: 80px;
}
.pricing-card .badge-box span {
  display: inline-block;
  border: 1px solid #4b7bec;
  padding: 4px 12px;
  border-radius: 25px;
  overflow: hidden;
  color: #4b7bec;
}
.pricing-card .pricing-header {
  width: 100%;
  height: 150px;
  position: relative;
  border-radius: 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  /*border-bottom: 20px solid $primary;*/
  /*
  border-radius: $radius $radius 150px 150px;
  -webkit-border-radius: $radius $radius 150px 150px;
  -moz-border-radius: $radius $radius 150px 150px;
  */
}
.pricing-card .pricing-header .plan-title {
  font-size: 24px;
  color: white;
  position: relative;
  top: 25%;
}
.pricing-card .pricing-header .price-circle {
  width: calc(33.3% - 30px);
  width: 120px;
  height: 120px;
  border-radius: 100%;
  left: calc(50% - 60px);
  top: 60%;
  background-color: white;
  position: absolute;
}
.pricing-card .pricing-header .price-circle .info {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: gray;
}
.pricing-card .pricing-header .price-circle .price-title {
  display: block;
  font-size: 28px;
  padding: 28px 0 0;
  font-weight: bold;
}
.pricing-card .pricing-header .price-circle .price-title small {
  font-size: 18px;
}
.pricing-card .pricing-header h2 {
  position: relative;
  top: 40%;
  color: #fff;
}
.pricing-card ul {
  margin: 10px 0 0 0;
  padding: 0;
}
.pricing-card ul li {
  list-style-type: none;
  display: block;
  padding: 15px 0 15px 0;
  margin: 0;
  border-bottom: 1px solid #f2f2f2;
}
.pricing-card .buy-button-box {
  width: 100%;
  float: left;
  margin-top: 30px;
}
.pricing-card .buy-button-box .buy-now {
  text-decoration: none;
  color: white;
  padding: 10px 30px;
  border-radius: 20px;
  background-image: linear-gradient(to left, #a55eea, #45aaf2);
  margin-top: 20px;
}

Demo

Buradan İndiriniz.
Zip Pass : www.4v5.net
 
Şu an forumumuzda
17 Kullanıcı Aktif
Konu 3,039
Cevaplar 4,359
Kullanıcılar 1,189
Son Üye FarukSoft
Webdebul.net; 5651 Sayılı Kanun kapsamında BTK tarafından onaylı Yer Sağlayıcı'dır.

Bu sebeple içerikleri kontrol etme ya da araştırma yükümlülüğü yoktur.
Hukuka ve mevzuata aykırı olduğunu düşündüğünüz içeriği. BURADAN bildirebilirsiniz.
Kısa sürede dönüş yapmaya çalışacağız.
Webmaster Forumu ® Güvenli Alışverişin Yeni Adresi Webdebul.net altyapı gücünü Netwebo'dan alır.
Reklam vermek için: reklam@webdebul.net
Ban sorunları için: ban@webdebul.net
Hukuksal sorunlar için: hukuk@webdebul.net
Diğer sorunlar için: bilgi@webdebul.net
Üst Alt