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.
Zip Pass :
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;
}
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
Zip Pass :
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
