Last active
July 13, 2023 15:12
-
-
Save dwaynemac/e7cc87c55db26be822f59ab643b74a95 to your computer and use it in GitHub Desktop.
Landin para pato
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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