index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Resonsive Pricing Table </title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="content">
<div class="card one">
<div class="top">
<div class="title">Basic</div>
<div class="price-sec">
<span class="dollar">$</span>
<span class="price">14</span>
<span class="decimal">.99</span>
</div>
</div>
<div class="info">Limited features you will get on this package or plan</div>
<div class="details">
<div class="one">
<span>One Addons Domain</span>
<i class="fas fa-check"></i>
</div>
<div class="one">
<span>100GB Local Storage</span>
<i class="fas fa-check"></i>
</div>
<div class="one">
<span>Lifetime Tech Support</span>
<i class="fas fa-times"></i>
</div>
<div class="one">
<span>Unlimited Data Transfer</span>
<i class="fas fa-times"></i>
</div>
<button>Purchase</button>
</div>
</div>
<div class="card two">
<div class="top">
<div class="title">Extended</div>
<div class="price-sec">
<span class="dollar">$</span>
<span class="price">16</span>
<span class="decimal">.99</span>
</div>
</div>
<div class="info">Only some features you will get on this package or plan</div>
<div class="details">
<div class="one">
<span>Five Addons Domain</span>
<i class="fas fa-check"></i>
</div>
<div class="one">
<span>200GB Local Storage</span>
<i class="fas fa-check"></i>
</div>
<div class="one">
<span>Lifetime Tech Support</span>
<i class="fas fa-check"></i>
</div>
<div class="one">
<span>Unlimited Data Transfer</span>
<i class="fas fa-times"></i>
</div>
<button>Purchase</button>
</div>
</div>
<div class="card three">
<div class="top">
<div class="title">Premium</div>
<div class="price-sec">
<span class="dollar">$</span>
<span class="price">18</span>
<span class="decimal">.99</span>
</div>
</div>
<div class="info">All features you will get on this package or plan</div>
<div class="details">
<div class="one">
<span>10 Addons Domain</span>
<i class="fas fa-check"></i>
</div>
<div class="one">
<span>Unlimited Local Storage</span>
<i class="fas fa-check"></i>
</div>
<div class="one">
<span>Lifetime Tech Support</span>
<i class="fas fa-check"></i>
</div>
<div class="one">
<span>Unlimited Data Transfer</span>
<i class="fas fa-check"></i>
</div>
<button>Purchase</button>
</div>
</div>
</div>
</body>
</html>style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Poppins", sans-serif;}body {min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 20px;background: #3142ae;}.content {max-width: 1090px;width: 100%;margin: auto;display: flex;justify-content: space-between;flex-wrap: wrap;}.content .card {background: #fff;width: calc(33% - 20px);text-align: center;padding: 15px 30px 30px 30px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);}.content .card .top {height: 130px;color: #fff;padding: 12px 0 0 0;clip-path: polygon(0 0, 100% 0, 100% 53%, 49% 100%, 0 53%);}.content .card .top .title {font-size: 27px;font-weight: 600;}.content .card .top .price-sec {margin-top: -10px;font-weight: 600;}.content .card .top .price {font-size: 45px;}.content .card .info {font-size: 16px;margin-top: 20px;}.content .card .details .one {margin-top: 25px;font-size: 15px;display: flex;justify-content: space-between;align-items: center;position: relative;}.content .card .details .one::before {position: absolute;content: "";width: 100%;background: #ddd;height: 1px;left: 0;top: -12px;border-radius: 25px;}.content .card .details .one i {color: #2db94d;}.content .card .details i.fa-times {color: #cd3241;}.content .card button {outline: none;border: none;height: 42px;color: #fff;margin-top: 30px;border-radius: 3px;font-size: 18px;width: 100%;display: block;transition: all 0.3s ease;cursor: pointer;letter-spacing: 1px;}.content .one .top, .content .one button {background: #ffb85c;}.content .two .top, .content .two button {background: #f173b9;}.content .three .top, .content .three button {background: #2f1400;}.content button:hover {filter: brightness(90%);}.content .one ::selection {background: #8af5b6;}.content .two ::selection {background: #f2b08c;}.content .three ::selection {background: #d0f9fb;}@media (max-width: 1000px) {.content .card {background: #fff;width: calc(50% - 20px);margin-bottom: 30px;}}@media (max-width: 715px) {.content .card {width: 100%;}}
1.75 KB