Skip to content

Instantly share code, notes, and snippets.

@dwaynemac

dwaynemac/landing-pato.html

Last active July 13, 2023 15:12
Show Gist options
  • Save dwaynemac/e7cc87c55db26be822f59ab643b74a95 to your computer and use it in GitHub Desktop.
Save dwaynemac/e7cc87c55db26be822f59ab643b74a95 to your computer and use it in GitHub Desktop.
Download ZIP
Landin para pato
Raw
landing-pato.html
<style>
section.pricing {
/*
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
*/
}
.pricing .card {
border: none;
border-radius: 1rem;
transition: all 0.2s;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing .card-title {
margin: 0.5rem 0;
font-size: 0.9rem;
letter-spacing: .1rem;
font-weight: bold;
}
.pricing .card-price {
font-size: 3rem;
margin: 0;
}
.pricing .card-price .period {
font-size: 0.8rem;
}
.pricing ul li {
margin-bottom: 1rem;
}
.pricing .text-muted {
opacity: 0.7;
}
.pricing .btn {
font-size: 80%;
border-radius: 5rem;
letter-spacing: .1rem;
font-weight: bold;
padding: 1rem;
opacity: 0.7;
transition: all 0.2s;
}
/* Hover Effects on Card */
@media (min-width: 992px) {
.pricing .card:hover {
margin-top: -.25rem;
margin-bottom: .25rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}
.pricing .card:hover .btn {
opacity: 1;
}
}
</style>
<div class="row pt-4">
<div class="col-3"></div>
<div class="btn-group btn-group-toggle col-6 toggler" data-toggle="buttons">
<label class="btn btn-primary" id="toggleOnline">
<input type="radio" name="planType" autocomplete="off" value="onlyOnline">Aulas avulsas
</label>
<label class="btn btn-primary active" id="togglePresencial">
<input type="radio" name="planType" autocomplete="off" value="onlyPresencial" checked>Membresías recorrentes
</label>
</div>
<div class="col-3"></div>
</div>
<script>
$(document).ready(()=>{
$(".toggler input").change( (el) => {
switch($('input[name=planType]:checked').val()){
case "onlyOnline":
$("section.pricing.presencial").hide();
$("section.pricing.online").show();
break;
case "onlyPresencial":
$("section.pricing.online").hide();
$("section.pricing.presencial").show();
break;
default:
$("section.pricing").show();
break;
}
} );
});
</script>
<section class="pricing py-5 online">
<div class="container">
<div class="row mb-4">
<div class=" col-md-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">ONLINE<br>Only ONDEMAND</h5>
<h6 class="card-price text-center text-nowrap" ><span>$6,000</span><span class="period">/mes</span></h6>
<hr>
<ul class="fa-ul">
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases grabadas para ver a tu ritmo en cualquier horario</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>4 clases interactivas en vivo para orientación inicial si es tu primera vez</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times" aria-hidden="true"></i></span>Clases interactivas en vivo</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times" aria-hidden="true"></i></span>Clases presenciales incluidas*</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times" aria-hidden="true"></i></span>Acompañamiento personalizado por un profesional certificado</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times" aria-hidden="true"></i></span>Pasaporte DeROSE Network global</li>
</ul>
<a href="https://learn.derose.app/a/cervino/subscribe_to/only-ondemand-usd"
class="btn btn-block btn-primary text-uppercase "
>Inscribirme</a>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">ONLINE<br>Only LIVE</h5>
<h6 class="card-price text-center text-nowrap" ><span>$12,000</span><span class="period">/mes</span></h6>
<hr>
<ul class="fa-ul">
<li class="text-muted"><span class="fa-li"><i class="fas fa-times" aria-hidden="true"></i></span>Clases grabadas para ver a tu ritmo en cualquier horario</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases interactivas en vivo</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times" aria-hidden="true"></i></span>Clases presenciales incluidas*</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Acompañamiento personalizado por un profesional certificado</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Pasaporte DeROSE Network global</li>
</ul>
<a href="https://learn.derose.app/a/cervino/subscribe_to/only-live-usd"
class="btn btn-block btn-primary text-uppercase "
>Inscribirme</a>
</div>
</div>
</div>
<div class=" col-md-4 order-sm-first order-first order-md-last">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">ONLINE<br>LIVE + ONDEMAND</h5>
<h6 class="card-price text-center text-nowrap"><span>$1234</span><span class="period">/mes</span></h6>
<hr>
<ul class="fa-ul">
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases grabadas para ver a tu ritmo en cualquier horario</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases interactivas en vivo</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times" aria-hidden="true"></i></span>Clases presenciales incluidas*</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Acompañamiento personalizado por un profesional certificado</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Pasaporte DeROSE Network global</li>
</ul>
<a href="https://learn.derose.app/a/cervino/subscription_templates/online-live-ondemand"
class="btn btn-block btn-primary text-uppercase "
>Inscribirme</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pricing py-5 presencial">
<div class="container">
<div class="row mb-4">
<div class=" col-md-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">4 presenciales x mes<br>+ online ilimitado</h5>
<h6 class="card-price text-center text-nowrap" ><span>$1234</span><span class="period">/mes</span></h6>
<hr>
<ul class="fa-ul">
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>4 clases presenciales al mes incluidas*</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times" aria-hidden="true"></i></span>Clases presenciales sin límite</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases grabadas para ver a tu ritmo en cualquier horario</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases interactivas online en vivo</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Acompañamiento personalizado por un profesional certificado</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Pasaporte DeROSE Network global</li>
</ul>
<a href="https://learn.derose.app/a/cervino/subscribe_to/4-x-mes-usd"
class="btn btn-block btn-primary text-uppercase authorized"
>Inscribirme</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">8 presenciales x mes<br>+ online ilimitado</h5>
<h6 class="card-price text-center text-nowrap" ><span>$1234</span><span class="period">/mes</span></h6>
<hr>
<ul class="fa-ul">
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>8 clases presenciales al mes incluidas*</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times" aria-hidden="true"></i></span>Clases presenciales sin límite</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases grabadas para ver a tu ritmo en cualquier horario</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases interactivas online en vivo</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Acompañamiento personalizado por un profesional certificado</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Pasaporte DeROSE Network global</li>
</ul>
<a href="http://saraza"
class="btn btn-block btn-primary text-uppercase authorized"
>Inscribirme</a>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">FEEL FREE</h5>
<h6 class="card-price text-center text-nowrap"><span>$1234</span><span class="period">/mes</span></h6>
<hr>
<ul class="fa-ul">
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases presenciales incluidas sin límite</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases grabadas para ver a tu ritmo en cualquier horario</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Clases interactivas online en vivo</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Acompañamiento personalizado por un profesional certificado</li>
<li class=""><span class="fa-li"><i class="fas fa-check" aria-hidden="true"></i></span>Pasaporte DeROSE Network global</li>
</ul>
<a href="https://learn.derose.app/a/cervino/subscription_templates/feel-free"
class="btn btn-block btn-primary text-uppercase authorized"
>Inscribirme</a>
</div>
</div>
</div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment