Continuamos nuestro diseño y vamos a trabajar con la parte de la lista de precios erauna como tipo tabla
sin embargo decidimos utilizar listas y vips y vamos a abrir nuestro Main puntos sea un salón un poco
de scroll aquí vamos a poner tablas de precios y vamos a reutilizar algunas cosas otras no. Primero
lo que quiero es en este diseño es que se acomode en tres columnas puedes ver que tenemos tres columnas
aquí.
Sin embargo por el ancho del contenido nada más quiero que se vea tres columnas en una tableta y hacia
arriba cuando esté en un teléfono móvil no quiero que se vean así que quiero poner l lista precios lista
precios.
Desde aquí vista precios y vamos a seleccionar primero Eloy y por qué le pongo el primero y leí porque
dentro tenemos tenemos esta ley pero dentro tenemos estos también y nada más.
Quiero que se le apliquen aquí así que le ponemos Badín de diez píxeles eso nos va a dar con un poco
más de espacio en las listas y vamos a continuar.
Ahora sí voy a crear lo que vienen siendo mis columnas y voy a copiar este acuerdo lo copio y pego aquí.
Y voy a copiar ese selector de aquí arriba lo copio lo pego aquí y quiero a poner un flat left y un
width de 33.3 por ciento y guardo cambio si recargo y vemos que tengo las tres columnas que quería desde
antes o que vamos a continuar y voy a dar un poco de scroll.
Puedes ver que cada uno de los dips que están dentro de la lista se llama Tabla precio así que ahora
puedo utilizar este selector de precio y puedo aplicarle los bordes que ocupo pero hay quien Border
un pixel Solid y el color sería uno uno uno guardo cambio si recargo y vemos que es un borde que se
ve muy apenas si lo vemos en el diseño.
De esta forma así que nos hace falta también agregar un color
y color blanco guardo cambios y Recaro y vemos que ya se va viendo un poco mejor más como este diseño
continuábamos vamos a poner un par de 40 píxeles y Cícero 40 píxeles arriba y abajo y cero a la izquierda
y a la derecha tal vez digas por qué no le agregas a los lados debido a que aquí hay espacio.
Eso lo vamos a arreglar poniendo aquí un tex aligncenter y recargó y vemos que con eso se centra el
contenido.
Por eso nada más agregó el Payen arriba y abajo Tex aligncenter y vamos a darle estilos a lo que venía
haciendo el contenido de la lista.
Huele el Lehi que vendría siendo esta parte de aquí.
También nos hacen falta también los títulos que sólo vamos a ver enseguida lo vemos aquí.
Primero vamos a ponerle un
family y en este caso vamos a utilizar la fuente de Pete Sans que vamos un poco de scroll pero lo voy
a copiar pegar aquí está PTC Ansset será la fuente a 14 pixeles y por último un margen Boron de 20 pixeles
en cada uno de los elementos de la lista para que haya un poco de separación en TeX Transform o CAIS.
Esto siguiendo el diseño que estamos trabajando son estos que dicen bocadillos gratis todas las conferencias
y todos los talleres recargamos que se va viendo mejor y le ponemos el color también es un color gris.
86 sería si no legato 86 87 86 y un link también de 26 píxeles recargamos y vemos que se ve de esta
forma sabiendo un poco mejor no hace falta lo que viene siendo los títulos y vamos a ponerle aquí.
Copiar esta tabla a precios y poner una CH3 en el H3 vamos a hacer referencia a la fuente de Oswalt
que se está bregamos aquí el cargo que se va viendo de esta forma es esta parte de todos los días pases
por dos días.
Esto fue un poco más pequeña así que le pongo un Alfonsa de 16 píxeles y text Transform o Perquis cambios
y se ve de esta forma nos hace falta también la parte de lo que dice número y vamos a
inspeccionaba el código porque yo veo los números un poco diferentes tal vez no se aplicó bien si vemos
que algo nos hizo falta.
Y es que el número
utiliza también la fuente de Oswalt entonces vamos a buscar aquí las tenemos podemos copiar este pegarla
en el número pegarla aquí y recargar para que se pase también a estos números.
Sin embargo estos números son naranjas y en el diseño son negros debido a lo que permite CSS no es necesario
reescribir todo el selector puede tener por ejemplo div class tabla precio y número y cambiarlo a color
negro y guardo el cambio sin recargo y vemos que nada más nos cambia esa parte los números estos tienen
un poco de separación arriba por ejemplo Maurín Top 20 píxeles guardo cambios y recargos y eso nos va
a dar un poco de separación entre el título y el texto.
Incluso la propia Marina 20 y Zero se ven un poco mejor que se llamaría de esta forma creo que se va
un poco mejor.
Y estamos cerca nos estamos acercando sin embargo en el siguiente vídeo vamos a ver cómo agregar estos
iconos aquí al inicio y cómo agregar un efecto que poner el mago sobre la tabla se haga un poco más
grande y agrega una animación con CSS así que en el siguiente vídeo final veremos nuestra tabla de precios.