Hi Web Developers! this time the BlogPk
teacher will share a tutorial on how to make a Pricing Section Card / Price box in a luxurious and attractive style that is simple to look at, not boring for sure.
0h yeah, for those of you who want to know
how to create a profile card page, click here
Let's start the tutorial, follow it to the end,
okay?
first prepare your computer or your
smartphone and don't forget a cup of warm
coffee water to accompany you coding later
if the ingredients are ready, we will continue to the tutorial:
Please open your worksheet, add the
following code in your worksheet.
🔥 HTML
Please add the following HTML code:
You can adjust the content yourself.
<div class="pricing-section">
<div class="pricing-container">
<div class="pricing-column">
<div class="pricing-title">Basic</div>
<div class="pricing-tag">Discount 20%</div>
<div class="pricing-price">Pkr 80.000</div>
<div class="service-info">
<ul>
<li>Documentation</li>
<li>Premium Template</li>
<li>1 License</li>
<li>Full Optimization</li>
<li>1 Month Full Support</li>
<li>Easy Customize</li>
<li>-</li>
</ul>
</div>
<a class="pricing-order-btn" href="#" title="#" target="_blank">Order Now</a>
</div>
<div class="pricing-column">
<div class="pricing-title">Personal</div>
<div class="pricing-tag">Best Value</div>
<div class="pricing-price">Pkr 510.000</div>
<div class="service-info">
<ul>
<li>Documentation</li>
<li>Premium Template</li>
<li>3 License</li>
<li>Full Optimization</li>
<li>3 Month Full Support</li>
<li>Easy Customize</li>
<li>-</li>
</ul>
</div>
<a class="pricing-order-btn" href="#" title="#" target="_blank">Order Now</a>
</div>
<div class="pricing-column"><div class="pricing-title">Developer</div>
<div class="pricing-tag">For Business</div>
<div class="pricing-price">Pkr 1.000.000</div>
<div class="service-info"> <ul>
<li>Documentation</li> <li>Premium Template</li> <li>Unlimited License</li> <li>Full Optimization</li> <li>6 Month Full Support</li> <li>Easy Customize</li><li>1 Bonus Template</li> </ul>
</div>
<a class="pricing-order-btn" href="#" title="#" target="_blank">Order Now</a>
</div>
</div></div>
🔥 CSS
Please add the following css code:
You can adjust the color yourself
<style type="text/css">
/* Pricing Section Card by TopBlog Pk(topblogpk.blogspot.com) */
.pricing-section{font-family:'Google Sans',Arial,sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}
.pricing-section .pricing-title{font-size:1.1rem;margin:1rem 0 0;font-weight:700}
.pricing-container{display:flex;max-width:1000px;margin:0 auto}
.pricing-tag{margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px}
a.pricing-order-btn{font-size:14px;text-transform:uppercase;text-decoration:none;background:#333;color:#fff;display:inline-block;padding:7px 20px;border-radius:20px;transition:all .3s ease-in-out}
a.pricing-order-btn:hover{transform:scale(1.1)}
.pricing-column{background:#fff;padding:30px 15px;box-sizing:border-box;border-radius:10px;text-align:center;width:33%;margin:10px;box-shadow:0 7px 7px rgba(0,0,0,0.06);border:2px solid #fff;transition:all .3s ease-in-out}
.pricing-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
.pricing-column img{width:50px}
.pricing-section i{font-size:3rem}
.pricing-price{font-weight:700;font-size:22px}
.service-info{opacity:.7}
.pricing-2-column .pricing-column{width:50%}
.pricing-column:nth-child(1) .pricing-price,.pricing-column:nth-child(1) i{color:#f87200}
.pricing-column:nth-child(2) .pricing-price,.pricing-column:nth-child(2) i{color:#ff5483}
.pricing-column:nth-child(3) .pricing-price,.pricing-column:nth-child(3) i{color:#2b73f6}
.pricing-column:nth-child(1):hover{border-color:#f87200}
.pricing-column:nth-child(2):hover{border-color:#ff5483}
.pricing-column:nth-child(3):hover{border-color:#2b73f6}
.pricing-column:nth-child(1) .pricing-tag,.pricing-column:nth-child(1) a.pricing-order-btn{background:#f87200}
.pricing-column:nth-child(2) .pricing-tag,.pricing-column:nth-child(2) a.pricing-order-btn{background:#ff5483}
.pricing-column:nth-child(3) .pricing-tag,.pricing-column:nth-child(3) a.pricing-order-btn{background:#2b73f6}
@media screen and (max-width:580px){
.pricing-column,.pricing-2-column .pricing-column{width:auto}
.pricing-container{display:block}}
</style>
The tutorial has been completed, later we will link back with another interesting tutorial of course. Continue to monitor this blog or follow this blog so that when Mimin makes new articles you get notifications.