<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="responsive"> <!-- Nav tabs --> <div class="card"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#tarjetas-monedero" aria-controls="tarjetas-monedero" role="tab" data-toggle="tab">Tarjetas Monedero</a></li> <li role="presentation"><a href="#laborables" aria-controls="laborables" role="tab" data-toggle="tab">Dias Laborables</a></li> <li role="presentation"><a href="#festivos" aria-controls="festivos" role="tab" data-toggle="tab">Festivos y Fines de Semana</a></li> <li role="presentation"><a href="#particulares" aria-controls="particulares" role="tab" data-toggle="tab">Clases Particulares y Bonos</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" style="color:#4285F4" id="tarjetas-monedero"> <legend>Recarga Básica</legend> <h4>35€ + 8€ de Regalo</h4> <h3>TOTAL 43 €</h3> <br> <legend>Recarga Extra</legend> <h4>75€ + 30€ de Regalo</h4> <h3>Total 105€</h3> </div> <div role="tabpanel" class="tab-pane" style="color:#4285F4" id="laborables"> <legend>Pistas Exteriores</legend> <h4> <p>08:00 a 18:00 ==> 8€ / hora</p> <p>18:00 a 22:00 ==> 20€ / Hora</p> <p>22:00 a 23:00 ==> 12€ / hora</p> <br> <legend>Pistas Interiores</legend> <p>08:00 a 18:00 ==> 12€ / hora</p> <p>18:00 a 22:00 ==> 24€ / Hora</p> <p>22:00 a 23:00 ==> 16€ / hora</p> </h4> </div> <div role="tabpanel" class="tab-pane" style="color:#4285F4" id="festivos"> <legend>Pistas Exteriores</legend> <h4> <p>08:00 a 15:00 ==> 12€ / hora</p> <p>15:00 a 23:00 ==> 8€ / Hora</p> <br> <legend>Pistas Interiores</legend> <p>08:00 a 15:00 ==> 16€ / hora</p> <p>15:00 a 23:00 ==> 12€ / Hora</p> </h4> </div> <div role="tabpanel" class="tab-pane" style="color:#4285F4" id="particulares"> <h4> <legend>Clases Particulares</legend> <p>09:00 a 18:00 ==> 22€ / hora</p> <p>18:00 a 22:00 ==> 35€ / Hora</p></h4> <p>*Luz no incluida (4€/hora)</p> <p>**Precio por Clase y Alumno</p> <br> <legend>Bonos de 4 Clases</legend> <h4> <p>de Lunes a Viernes de 8:00 a 18:00 y Sábados de 08:00 a 13:00</p> <p>1 Alumno ==> 85€</p> <p>2 Alumnos ==> 100€</p> <p>3 Alumnos ==> 110€</p> <p>4 Alumnos ==> 120€</p> </h4> <p>* Luz no Incluida</p> <p>** 1 Clase Semanal</p> </h3> </div> </div> </div> </div> </div> </div>

body { background: #EDECEC; } .nav-tabs { display: inline-flex; width: 100%; overflow-x: auto; border-bottom: 2px solid #DDD; -ms-overflow-style: none; /*// IE 10+*/ overflow: -moz-scrollbars-none;/*// Firefox*/} .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border-width: 0; } .nav-tabs>li>a { border: none; color: #666; } .nav-tabs>li.active>a, .nav-tabs>li>a:hover { border: none; color: #4285F4 !important; background: transparent; } .nav-tabs>li>a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: 1px; transition: all 250ms ease 0s; transform: scale(0); } .nav-tabs>li.active>a::after, .nav-tabs>li:hover>a::after { transform: scale(1); } .tab-nav>li>a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; } .tab-pane { padding: 15px 0; } .tab-content { padding: 20px } .nav-tabs::-webkit-scrollbar { display: none; /*Safari and Chrome*/ } .card { background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }