Neler yeni

HTML Fiyat Tablosu (1 Kişi)

[WebAbisi] Konu Bilgileri

Konu Hakkında Merhaba, tarihinde HTML Temaları & Şablonları kategorisinde DesignerAtakan tarafından oluşturulan HTML Fiyat Tablosu başlıklı konuyu okuyorsunuz. Bu konu şimdiye dek 285 kez görüntülenmiş, 2 yorum ve 1 tepki puanı almıştır...
Kategori Adı HTML Temaları & Şablonları
Konu Başlığı HTML Fiyat Tablosu
Konuyu başlatan DesignerAtakan
Başlangıç tarihi
Cevaplar
Görüntüleme
İlk mesaj tepki puanı
Son Mesaj Yazan darkdewill

DesignerAtakan

Grafik Designer
Yönetici
grafiktasarimci
Katılım
27 Eki 2020
Mesajlar
88
Tepkime puanı
38
Web sitesi
www.Grafikerler.Web.TR
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;
}




Zip Pass :
 

RedBullHackers

4v5
Kayıtlı Kullanıcı
Katılım
26 Eki 2020
Mesajlar
294
Tepkime puanı
30
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;
}




Zip Pass :
Çok Güzel Olmuş