Herkese merhabalar yeni bir makale ile karşınızdayız bugün çoğu kişinin ihtiyaç duyduğu özellikle hosting işi ile uğraşacaklara css ile çok basit bir şekilde mobil uyumlu fiyat tablosu hazırlıyoruz biz basit bir örnek verdik eğer siz isterseniz kendinize göre özelleştirebilirsiniz…
İşte Kodlar…
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
* {
box-sizing: border-box;
}
.kolonlar {
float: left;
width: 33.3%;
padding: 8px;
}
.fiyatlar {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.fiyatlar:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.fiyatlar .ustkisim {
background-color: #111;
color: white;
font-size: 25px;
}
.fiyatlar li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.fiyatlar .gri {
background-color: #eee;
font-size: 20px;
}
.buton {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
@media only screen and (max-width: 600px) {
.kolonlar {
width: 100%;
}
}
</style>
</head>
<body>
<h2 style=”text-align:center”>Mobil Uyumlu Fiyat Tablosu</h2>
<div class=”kolonlar”>
<ul class=”fiyatlar”>
<li class=”ustkisim”>Basit</li>
<li class=”gri”>100 TL / Yıllık</li>
<li>10GB Alan</li>
<li>10 Adet E-mail</li>
<li>10 Adet Alan adı</li>
<li>1GB Bant Genişliği</li>
<li class=”gri”><a href=”#” class=”buton”>Başvur</a></li>
</ul>
</div>
<div class=”kolonlar”>
<ul class=”fiyatlar”>
<li class=”ustkisim”>Orta</li>
<li class=”gri”>200 TL / Yıllık</li>
<li>20GB Alan</li>
<li>40 Adet E-mail</li>
<li>20 Adet Alan adı</li>
<li>4GB Bant Genişliği</li>
<li class=”gri”><a href=”#” class=”buton”>Başvur</a></li>
</ul>
</div>
<div class=”kolonlar”>
<ul class=”fiyatlar”>
<li class=”ustkisim”>Gelişmiş</li>
<li class=”gri”>600 TL / Yıllık</li>
<li>400GB Alan</li>
<li>100 Adet E-mail</li>
<li>100 Adet Alan adı</li>
<li>100GB Bant Genişliği</li>
<li class=”gri”><a href=”#” class=”buton”>Başvur</a></li>
</ul>
</div>
</body>
</html>
Demo: https://www.w3schools.com/code/tryit.asp?filename=FX4LMWC7DX25