<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 ---------->
<div class="container plans">
<div class="row">
<div class="col-md-10 offset-md-1 text-center py-2">
<h2>Meet our plans</h2>
</div>
</div>
<div class="row justify-content-center py-2">
<ul class="nav justify-content-center">
<li class="nav-item px-3">
<button class="btn-menu btn-primary btn-lg btn-block active" role="button" onclick="costoMensual()" id="btn-status1">Monthly</button>
</li>
<li class="nav-item px-3">
<button class="btn-menu btn-primary btn-lg btn-block" role="button" onclick="costoTrimestral()" id="btn-status2">Quarterly</button>
</li>
<li class="nav-item px-3">
<button class="btn-menu btn-primary btn-lg btn-block" role="button" onclick="costoSemestral()" id="btn-status3">Biannual</button>
</li>
<li class="nav-item px-3">
<button class="btn-menu btn-primary btn-lg btn-block" role="button" onclick="costoAnual()" id="btn-status4">Annual</button>
</li>
</ul>
</div>
<div class="row justify-content-center py-4">
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Start Up</h5>
<h6 class="card-price text-center" id="costo1">$6,500</h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Lorem ipsum dolor sit amet</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Curabitur id efficitur ligula</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Donec congue ac mauris vitae condimentum</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Cras sed diam urna</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Morbi rhoncus libero justo</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Sed sed diam porta, interdum risus nec</li>
</ul>
<a href="#" class="btn btn-block btn-primary text-uppercase">Contact Us</a>
</div>
</div>
</div>
<!-- Tier two -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Pro</h5>
<h6 class="card-price text-center" id="costo2">$8,500</h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Lorem ipsum dolor sit amet</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Curabitur id efficitur ligula</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Donec congue ac mauris vitae condimentum</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Cras sed diam urna</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Morbi rhoncus libero justo</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Sed sed diam porta, interdum risus nec</li>
</ul>
<a href="#" class="btn btn-block btn-primary text-uppercase">Contact Us</a>
</div>
</div>
</div>
</div>
</div>
.plans .card {
border: none;
border-radius: 1rem;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.plans hr {
margin: 1.5rem 0;
}
.plans .card-title {
margin: 0.5rem 0;
font-size: 0.9rem;
letter-spacing: .1rem;
font-weight: bold;
}
.plans .card-price {
font-size: 3rem;
margin: 0;
}
.plans .card-price .period {
font-size: 0.8rem;
}
.plans ul li {
margin-bottom: 1rem;
}
.plans .text-muted {
opacity: 0.7;
}
.plans .btn {
font-size: 90%;
border-radius: 1rem;
letter-spacing: .1rem;
font-weight: bold;
padding: 1rem;
opacity: 0.7;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.plans .btn-menu {
width: 150px;
font-size: 90%;
border-radius: 1rem;
letter-spacing: .1rem;
font-weight: bold;
padding: 1rem;
opacity: 0.7;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.plans button:focus {
outline: 1px dotted;
outline: 0px auto -webkit-focus-ring-color;
}
function costoMensual(){
document.getElementById("costo1").innerHTML = "$6,500";
document.getElementById("costo2").innerHTML = "$8,500";
var element = document.getElementById("btn-status1");
element.classList.add("active");
//demas botones
var element1 = document.getElementById("btn-status2");
element1.classList.remove("active");
var element2 = document.getElementById("btn-status3");
element2.classList.remove("active");
var element3 = document.getElementById("btn-status4");
element3.classList.remove("active");
}
function costoTrimestral(){
document.getElementById("costo1").innerHTML = "$17,550";
document.getElementById("costo2").innerHTML = "$22,950";
var element = document.getElementById("btn-status2");
element.classList.add("active");
//demas botones
var element1 = document.getElementById("btn-status1");
element1.classList.remove("active");
var element2 = document.getElementById("btn-status3");
element2.classList.remove("active");
var element3 = document.getElementById("btn-status4");
element3.classList.remove("active");
}
function costoSemestral(){
document.getElementById("costo1").innerHTML = "$33,150";
document.getElementById("costo2").innerHTML = "$43,350";
var element = document.getElementById("btn-status3");
element.classList.add("active");
//demas botones
var element1 = document.getElementById("btn-status1");
element1.classList.remove("active");
var element2 = document.getElementById("btn-status2");
element2.classList.remove("active");
var element3 = document.getElementById("btn-status4");
element3.classList.remove("active");
}
function costoAnual(){
document.getElementById("costo1").innerHTML = "$62,400";
document.getElementById("costo2").innerHTML = "$81,600";
var element = document.getElementById("btn-status4");
element.classList.add("active");
//demas botones
var element1 = document.getElementById("btn-status1");
element1.classList.remove("active");
var element2 = document.getElementById("btn-status2");
element2.classList.remove("active");
var element3 = document.getElementById("btn-status3");
element3.classList.remove("active");
}
