<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <section id="price"> <div class="container text-center"> <h3>Get awesome features, without <br> extra charges</h3> <p class="firstText">The rise of mobile devices transforms the way we consume information entirely <br> and the world's most elevant channels such as Facebook.</p> <div class="firstCard text-center"> <div class="card-header bg-transparent border-0 m-auto"> <ul class="nav nav-pills card-header-pills" id="cardBtn"> <li class="nav-item"> <a class="nav-link btn priceBtn active" onclick="currentSlide(1)">Monthly</a> </li> <li class="nav-item"> <a class="nav-link btn priceBtn" onclick="currentSlide(2)">Annually</a> </li> </ul> </div> <div class="card-body"> <div class="priceSlides"> <div class="row"> <div class="col-md-6"> <div class="card fstCrd"> <div class="cardHead"> <h1> &dollar;0<span>&sol;month</span> </h1> <h5 class="card-title">Business Class</h5> <p>For small teams or office</p> </div> <div class="card-body"> <p class="card-text">Drag & Drop Builder <br> 1,000's of Templates <br> Blog Support Tools <br> eCommerce Store </p> <button class="lastBtn" type="button">Start free trail</button> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="cardHead"> <h1> &dollar;99<span>&sol;month</span> </h1> <h5 class="card-title">Pro Master</h5> <p>For small teams or office</p> </div> <div class="card-body"> <p class="card-text">Drag & Drop Builder <br> 1,000's of Templates <br> Blog Support Tools <br> eCommerce Store </p> <button class="lastBtn" type="button">Subscribe Now</button> <p class="text-mute">Or Start 14 days trail</p> </div> </div> </div> </div> </div> <div class="priceSlides"> <div class="row"> <div class="col-md-6"> <div class="card fstCrd"> <div class="cardHead"> <h1> &dollar;299<span>&sol;year </span> </h1> <h5 class="card-title">Business Class</h5> <p>For small teams or office</p> </div> <div class="card-body"> <p class="card-text">Drag & Drop Builder <br> 1,000's of Templates <br> Blog Support Tools <br> eCommerce Store </p> <button class="lastBtn" type="button">Subscribe Now</button> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="cardHead"> <h1> &dollar;499<span>&sol;year</span> </h1> <h5 class="card-title">Pro Master</h5> <p>For small teams or office</p> </div> <div class="card-body"> <p class="card-text">Drag & Drop Builder <br> 1,000's of Templates <br> Blog Support Tools <br> eCommerce Store </p> <button class="lastBtn" type="button">Subscribe Now</button> <p class="text-mute">Or Unlimited for 1 year</p> </div> </div> </div> </div> </div> </div> </div> </div> </section>

#price { margin: 0 0 8%; } #price h3 { color: #242f51; font-size: 1.5em; font-weight: bolder; margin: 10% auto 2%; } #price .container .firstText{ font-size: large; font-weight: 400; color: #242f51; margin-bottom: 5%; } #price .firstCard { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; } #price .firstCard .col{ width: auto; margin: auto; } #price .card{ box-shadow: 0 0 1px 0 rgb(0 0 0 / 0%), 0 30px 20px 0 rgb(0 0 0 / 10%); width: calc(100% - 40%); margin: auto 5%; transition: ease-in-out transform .2s; border: none; } #price .card:hover{ -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0 0 0 0 rgb(0 0 0 / 0%), 0 0 0 2px rgb(0 0 0 / 10%); } #price .card.fstCrd{ margin-left: 35%; } #price .cardHead{ background-image: linear-gradient(0deg, #f4f7f9, #fafcfc, #fdfdfe, #fefefe, #ffffff); padding: 5%; } #price .card .card-body{ padding: 5% 0; } #price .card-header-pills{ border: 3px solid #ebebeb; border-radius: 25px; margin-bottom: 5%; padding: 2px; } #price .btn{ font-size: .6em; font-weight: 700; padding: 10px 20px; color: #2500f9; border-radius: 20px; } #price .btn:hover{ color: #2500f9; } #price .btn.active{ background-color: #2500f9; color: #fff !important; } #price .btn:focus{ color: #fff !important; background-color: #2500f9; border-radius: 20px; box-shadow: none; } #price .lastBtn{ font-size: .6em; font-weight: 700; padding: 10px 50px; color: #fff; background-color: #2500f9; border-radius: 20px; border: 1px solid #2500f9; margin-bottom: 5%; transition: ease-in-out .5s; } #price .lastBtn:hover{ background-color: #fdfdfe; color: #2500f9; border: 1px solid #2500f9; } #price .cardHead h1{ font-size: 2.5em; font-weight: bolder; color: #242f51; } #price .cardHead h1>span{ font-size: .3em; font-weight: 300; color: #abaeb5; } #price .cardHead h5{ color: #242f51; font-weight: bold; font-size: 1.1em; } #price .cardHead p{ font-size: .8em; font-weight: 300; color: #abaeb5; } #price .card-body .card-text{ font-size: .7em; font-weight: 500; color: #abaeb5; line-height: 300%; } #price .card-body .text-mute{ color: #2500f9; font-size: .7em; font-weight: 500; margin: 0; }

var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("priceSlides"); var dots = document.getElementsByClassName("priceBtn"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }