Vamos a continuar con los estilos de nuestros productos puedes ver que le agregamos lo que viene siendo.
Voy a cerrar esto colapsar está un poco agregamos un listado es normal crear por ejemplo cuando tienes
elementos que son iguales ponerlos en una lista no hay ningún problema es recomendado porque son elementos
iguales y en realidad esto es una lista de productos si lo que inspeccionar y de hecho nos viene acá
en el proyecto que estamos desarrollando se inspeccionan lo que viene siendo este producto y te colocas
aquí sobrevuele puede ser que le aplicamos un Marien todos nosotros pero del lado izquierdo aparece
una pequeña franja que puedes ver aquí en esta parte y eso es porque aquí se le agregan Pallín en línea
Star de nueva cuenta esto es los estilos que aplica el navegador que tú puedes reescribir sin ningún
problema.
Entonces utilizando ese mismo selector que tenemos aquí como Marien top voy a ponerle Pallín cero para
que remueva ese espacio aquí puedes ver que lo remueve automáticamente y ya queda ya va a quedar como
más alineada de imagen de los productos con la imagen del giro ahora el siguiente el siguiente detalle.
Si vemos el diseño puedes ver que está en tres columnas pero si lo hago pequeño en responsive tenemos
dos columnas entonces dos y tres vamos a copiar este aquí.
Este recuerdas es el honor de Erlich por lo tanto aquí voy a seleccionar cada uno de los productos que
está en una lista y voy a poner un float left LOTTT left with del 50 por ciento.
Si guardas cambios si abres el proyecto después que eso me coloca dos productos.
Eso está bien para este tamaño que es pequeño pero cuando sea más grande necesito tres productos.
Por lo tanto aquí voy a colocar un Miyako Aeri arroba Milia Minuit 7 6 8 recuerda no hay ninguna regla
que diga qué tamaño debes utilizar pero en mi opinión este tamaño hace que se vea bien copió este selector
no pego aquí y recuerda al float se hereda lo que viene siendo el mío de acuerdo y por lo tanto este
ya no es necesario se va a heredar y reescriba es lo que necesitas.
En este caso es el UIT-T y le ponemos 33.3 por ciento para que multiplicado por tres nos dé casi el
100 por ciento.
Qué debe ser 33.3 por ciento recargamos después del que tengo tres productos y lo hago más pequeño va
a llegar a un punto en el que tengo dos entonces dos y tres se ve bastante bien.
Ahora si vemos el diseño que tenemos aquí puedes ver qué tenemos como esta parte hacia adentro en cada
uno de los productos si vemos el código final y lo voy a inspeccionar por ejemplo cada lista puedes
ver que tiene este Padrenda aquí entonces eso es lo que le da ese efecto de separación entre cada uno
de ellos y aquí lo va a poner un Padín de 20 píxeles.
Entonces guardas cambios y recargas y puedes ver que nuestras tres columnas ya se desviaron un poco.
Por qué pasa esto.
Porque tenemos un ancho de 33.3 por ciento pero lo estamos agregando un par de 20 píxeles eso no hace
cuánto sea en tamaño pero es 33.3 por ciento +20 píxeles multiplicado por tres se pasa del 100 por ciento
y por eso se desborda y queda de esta forma.
Si recuerdas cuando utilizas paying de esta forma 33.3 por ciento que es el ancho que le diste digamos
que quiere pusieras 200 píxeles al ancho al aplicarle este Padín.
Este elemento ya mide 240 píxeles por qué.
Porque si recuerdas este Padín aplica en todas las direcciones entonces la aplicaría 20 píxeles del
página a la izquierda 200 que es la parte central y otros 20 píxeles en la parte de la derecha Padín
se aplican todas las direcciones.
Este elemento termina midiendo 240 píxeles y por lo tanto a veces queda como más grande no se ve bien
en el diseño y no sabemos qué pasa.
No voy a dejar aquí como 200 píxeles para que puedas ver que vamos a inspeccionar el código entonces
inspeccionamos y a quienes le leí aquí vamos a guardar cambios me hizo falta guardar.
Puedes ver que aquí dice ancho 200 píxeles pero si inspecciones cualquiera de estas puedes ver que en
la parte superior aquí arriba incluso hay quien dice con.
Puedes ver que aquí aparece mejor explicado dice Padín 20 pixeles y luego el ancho 200.
Como dije son 200 a la izquierda 200 al centro perdón 20 la izquierda 200 al centro y 20 a la derecha
por lo tanto este elemento no mide 200 sino mide 240.
Puedes ver aquí arriba aparece 240 afortunadamente es muy fácil de solucionar.
Si recuerdas anteriormente habíamos visto el book 6 in de Pohl oiréis este enlace si las buscar Box
6 y en Pool oiréis esta persona que está aquí nada más copias este código que está aquí.
Este pequeño Nipe no ocupas buscarlo solamente con que veas el código que va a pegar y lo escribas en
tu computadora es suficiente pues es el que viene HTML y aquí tengo un HTML.
Por lo tanto corto de aquí lo pongo aquí y corto de aquí lo pongo aquí abajo.
Con eso agregamos lo que viene siendo el código de nuestro proyecto y de hecho por ejemplo si Killa
inspeccion o cualquiera de estos se leais puedes ver que aquí dice 20 y luego dice 160 el padre ya no
afecta el ancho total de lo que vienen siendo los D.E.P.
Gracias a este código de Pol y puede ser que yo le di al de ley un ancho de 200 aquí se requiere de
un ancho de 200 le aplica el PADI que tengo yo aquí y la aplica primero el Parini después toma lo que
tengamos como restante 200 no era lo que yo quería que me dieran los productos.
Por lo tanto aquí es 33.3 por ciento y se van a ver tres productos y si hay algo más pequeño se van
a ver dos pero con la ventaja de que ya la apliqué el Padín y tengo esa famosa separación que estaba
buscando de aquí un detalle que acabo de ver en este proyecto es que aparecen estas viñetas estos puntos
aquí en un orden feliz que si recuerdas el 1 Order list con lista productos.
Aquí lo voy a aplicar un Liste estilo va a decir non se os va a remover.
Es que eso le quita sus puntos que estaban ahí se va viendo bastante bien.
Puedes ver que en nuestro diseño lo que viene siendo este texto de comprar nombre de la camisa el precio
todo está centrado aquí no por lo tanto aquí en el Lehi lo voy a poner a cada uno un texto lineal iba
a decir central eso va a centrar lo que viene siendo el texto que queda centrado.
Obviamente faltas de estilos hacia lo que es el botón y el precio etcétera pero se va viendo bastante
bien y hay algo que nos hace falta agregarle es que cada imagen tiene como este borde esta línea que
está aquí incluso cuando le da asco ver que se pone como un poco más intenso y eso está sobre la imagen.
Por lo tanto voy a copiar este código y lo pego aquí abajo y voy a poner el Lehi y luego ya me GEC para
seleccionar la imagen y un border de diez píxeles Solid y voy a utilizar un color RGB para utilizar
la transparencia.
Ya lo busqué y ya lo tengo los colores los valores los 628 coma uno coma 195 Koma transparencias 2.45
si guardas el proyecto y abres puedes ver que aparece lo que viene siendo este pequeño como marco en
las imágenes cuando lo dejó ver pues el que se ve como más intenso por lo tanto aquí voy a copiar este
código y cuando veas Jover en la imagen hay que poner dos puntos cóver.
Voy a copiar este mismo código pero su intensidad va a ser de 1 los guardas cambio si abres el proyecto
y es el que se ve como un poco más intenso pues es el que aparece como una pequeña transición no se
ve así como de golpe en esta parte quiere ponerlo en transición y ponerle por ejemplo la transición
va a ser borde el color en este caso .3 segundos y el efecto cualquiera de estos está bien is in out
y puede ser que cuando dejó ver aparecer esta transición que se ve bastante bien entonces se va viendo
bastante bien en el siguiente vídeo vamos a darle estilos al nombre de la camisa al precio y al botón
parecer que deben de quedar esta forma nos estamos acercando ya pero terminamos en el siguiente vídeo
vamos a finalizar este proyecto.