Tablas de precio con Foundation

Clase 13 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Clase anteriorSiguiente clase

Resumen

Vamos a construir la sección de compra de boletos.

Para esto usaremos un elemento que nos trae Foundation en building blocks

Recuerda:

Solo debes copiar el código HTML y CSS del bloque de código que desees usar.

Paulo Tejada

student•

Yo lo había centrado agregando al div con la clase row la clase align-center, pero es diferente. Con los offset el tamaño de la caja se mantiene , mientras que con align-center el tamaño de la caja se va a haciendo pequeña dependiendo de la resolución de la pantalla.

Darwel Duran

student•

al aplicar las reglas de centrado con offset hay una diferencia de 40 pixeles se nota al ver el contraste entre el centrado del titulo h3 y el row
alguien sabe por que pasa esto ?

estoy trabajando con la versión 6.3.1

Darwel Duran

student•

ya descubri porque no se alinea completamente la tabla de precios es debido a un margin-lef de la tabla de precios solo hay que quitar este margen desde app.css

.pricing-table {
margin-left: 0;
}

Juan David lemus Rubiano

student•

por que no me coje los estilos que le hago a princing table, me toca agregarle un important, para que me haga priodad a eso ?

Sacha Lifszyc

teacher•

podríamos ver tu código?

Jorge Alberto Anza Vazquez

student•

puedes usar este codigo en tu app.css:

.pricing-table {
background-color: #fefefe;
border: solid 1px #cacaca;
width: 100%;
text-align: center;
list-style-type: none;
}

.pricing-table li {
border-bottom: dotted 1px #cacaca;
padding: 0.875rem 1.125rem;
}

.pricing-table li:last-child {
border-bottom: 0;
}

.pricing-table .title {
background-color: #0a0a0a;
color: #fefefe;
border-bottom: 0;
}

.pricing-table .price {
background-color: #e6e6e6;
font-size: 2rem;
border-bottom: 0;
}

.pricing-table .description {
color: #8a8a8a;
font-size: 80%;
}

.pricing-table :last-child {
margin-bottom: 0;
}

Iridian Iridian

student•

buena clase c: gracias

Enrique Alexis Lopez Araujo

student•

El small-offset-1 que pusimos siempre debe ir despues de la clase small o puede ir hasta el ultimo de las declaraciones de todas las clases?

Saludos!

Diana Velásquez

student•

En este caso se coloca después de small-10 para tener un orden en las clases, pero puede ir en cualquier parte.

José Padrón

student•

Por qué solo se muestran las imágenes de los tabs solo cuando hago click derecho > inspeccionar elemento?

Diego Forero

Team Platzi•

Sin ver el código es difícil decirte que puede ser, puedes tener alguna clase con display none por ejemplo.

fernando josé pineda trujillo

student•

copia el siguiente código:

.orbit-container {
    height: auto !important;
}
.orbit-slide {
    max-height: none !important;
}

Julio César Perdomo Correa

student•

Cuando accedo al proyecto desde mi celular, tengo una diferencia de tamaño. Las pricing tables gold y silver aparecen una sobre la otra. ¿Alguna idea de cómo resolverlo? Mi código es:

<section id="tickets-container">
      <h3 class="text-center">Compra tus Boletos</h3>
      <div class="row">
         <div class="column small-10 small-offset-1 medium-6 medium-offset-3">
            <ul class="pricing-table">
               <li class="title">Platino</li>
               <li class="price">$120</li>
               <li class="description">Acceso Viernes, Sábado y Domingo</li>
               <li>Podrás comprar 2 Bebidas por cada día</li>
               <li>Estacionamiento incluido todos los días</li>
               <li>Participa en un sorteo para acceder al backstage</li>
               <li><a class="button" href="#">Comprar Platino</a></li>
            </ul>
         </div>
         <div class="column small-6 medium-4 medium-offset-2">
            <ul class="pricing-table">
               <li class="title">Gold</li>
               <li class="price">$90</li>
               <li class="description">Acceso Viernes, Sábado y Domingo</li>
               <li>Podrás comprar 1 Bebida por cada día</li>
               <li>-</li>
               <li>-</li>
               <li><a class="button" href="#">Comprar Gold</a></li>
            </ul>
         </div>
         <div class="column small-6 medium-4">
            <ul class="pricing-table">
               <li class="title">Silver</li>
               <li class="price">$65</li>
               <li class="description">Acceso Viernes, Sábado y Domingo</li>
               <li>-</li>
               <li>-</li>
               <li>-</li>
               <li><a class="button" href="#">Comprar Silver</a></li>
            </ul>
         </div>
      </div>
   </section>

Diego Forero

Team Platzi•

Yo veo las clases bien aplicada, no sera algo en tu css, que hace que el contenedor sea más pequeño y probablemente por esto no alcanza a entrar las dos columnas de 6?

Tablas de precio con Foundation

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman