Tablas de precio con Foundation

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

Contenido del curso

¡Hemos renovado este curso!

1
¿Dónde aprender frontend actualizado?
00:17 min

Bienvenido al curso

Foundation

Bootstrap

Conclusiones

Contenido complementario

Tomar examen

Comentarios

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?

<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>

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