پیشنمایش زنده
کد HTML
<div class="card">
<p class="title">Standard</p>
<div class="pricecontainer">
<p class="price">$2.99</p>
<p class="pricedescriptor">/month</p>
</div>
<p class="includes">This Plan Includes:</p>
<ul class="benefitlist">
<li>Awesome Benefits</li>
<li>10% Discount</li>
</ul>
<div class="btncontainer">
<button>Select This Plan</button>
</div>
</div>
کد CSS
.card {
width: 190px;
height: 254px;
background: rgb(45, 45, 45);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
transition-duration: 0.5s;
}
.title {
text-align: center;
margin-top: 0.5em;
font-weight: bold;
font-size: x-large;
color: rgb(200,200,200);
}
.pricecontainer {
width: 100%;
margin-top: 0.7em;
background-color: rgb(30,30,30);
box-shadow: inset 0px 0px 2em rgba(0, 0, 0, 0.3);
}
.price {
text-align: center;
color: rgb(180,180,180);
font-size: x-large;
font-weight: bold;
padding: 0.75em 0 0 0;
}
.pricedescriptor {
text-align: center;
color: rgb(118, 118, 118);
font-size: medium;
padding: 0 0 1em 0;
}
.includes {
text-align: center;
color: rgb(110, 110, 110);
margin-top: 0.6em;
font-size: small;
font-weight: bold;
}
.benefitlist li {
color: rgb(150,150,150);
font-size: small;
text-align: center;
}
.benefitlist li:nth-child(1) {
margin-top: 0.4em;
}
.btncontainer {
text-align: center;
}
.btncontainer button {
margin-top: 1em;
padding: 0.5em 0.8em 0.5em 0.8em;
border-style: none;
border-radius: 1000000px;
color: rgb(239, 239, 239);
font-weight: bold;
background-image: linear-gradient(45deg, #fe4fe1 0%, #3f00fe 100%);
transition: box-shadow 0.15s ease-in-out;
}
.btncontainer button:hover {
box-shadow: inset 0px 0px 5px rgb(0,0,0);
transition: box-shadow 0.15s ease-in-out;
}