Cómo hacer un sitio web de Cafetería responsive con HTML - CSS | PARTE 1 | Desde cero

Introducción + demo Hola un saludo a todos Mi nombre es Roberto Y en este vídeo Les traigo Cómo hacer un sitio web de una cafetería utilizando html y css este sitio web Está también adaptado a móviles es decir en estilo responsive primero les voy a mostrar lo que es la demo o el resultado final de este proyecto y como pueden ver en la parte del header tiene una pequeña Bueno lo que es el logo y también lo que es el soporte al cliente lo que es shopping Card y también aquí pues como vemos el menú sí lo que es el advard que también va a tener una barra de búsqueda en este caso muy bien Luego aquí tenemos lo que es una imagen de fondo para lo que es la sección de del encabezado luego tenemos unas pequeñas características luego unas categorías vamos a ver los mejores productos estoy aquí nada de esto funciona es decir toda esta parte es estático no estamos utilizando javascript en ningún momento bien luego tenemos una galería trabajada con lo luego tenemos esto de aquí que es exactamente el mismo molde que vamos a utilizar en los mejores productos muy bien ya por último tenemos lo que es últimos blogs y también lo que es el footer bien como dato adicional también debo recalcar que tiene estos pequeños Bueno Este pequeño diseño aquí de los botones transiciones bastante interesantes y de la misma manera tenemos en los productos esto de aquí se suele utilizar bastante No que si Commerce y bueno es un efecto bastante bonito y se puede hacer con html 10s una manera muy sencilla muy bien en la parte responsive vamos a verla lo que es la tablet por ejemplo el diseño de tablets va a empezar desde los 768 píxeles bien por ejemplo ahí tenemos el diseño de Tablet y como pueden ver se elimina el menú se esconde para Que aparezca este aquí si estuviéramos utilizando lo que es javascript por ejemplo aquí al aplastar este botón va aparecería una parte para poder Mostrar el menú en otra de otra manera pero en este caso no he hecho esta parte Así que si ustedes quieren pueden hacerlo implementarlo ya queda a criterio de cada quien muy bien entonces también tenemos aquí esto se hace más pequeño aquí se mantiene pero en este caso el grid es de 2 por 2 anterior simplemente estaban los cuatro en una sola fila aquí se mantiene correctamente y ya por último ya aquí tenemos lo que es el footer que está de esta manera aquí como dato adicional en últimos blogs tenía tres pero en este caso solamente aparece dos y bueno es que vamos a estar ocultándolo por ejemplo para móvil y le voy a poner aquí con esta cosa directamente Vamos a ponerle que sea Pixel 5 por ejemplo y en móvil solamente aparece uno ya les voy a mostrar Cómo podemos ocultar si hay tres elementos y solamente dejar uno ok No es la mejor manera pero funciona bastante bien ok dos cosas se mantiene ya como pueden ver se hace un poco más pequeño la galería se mantiene bien y aquí también cambian algunas cosas en las características y esto se mantiene correcto Esa es la parte responsive de este proyecto y vamos a iniciar Ahora sí con el html y css antes de iniciar también debo decir que vamos a estar trabajando sección por html y css es decir vamos a hacer el header primero el maquetado de html y luego lo vamos a pasar directamente al css y vamos a trabajarlo por parte y no como he venido haciendo en otros vídeos que ha sido primero de html luego el css y ese proyecto incluye javascript meterle el javascript al final en este caso no va a ser así sino que va a ser trabajado parte por parte para llevar a cabo el proyecto sin confundirse tanto lo que voy a hacer ahora es crearme proyecto rápidamente ustedes lo que pueden hacer es crear una carpeta lo abren en visual Studio code luego crean el html el css y también lo que van a hacer es abrirlo en el server muy bien Ahora sí ya he creado tanto el archivo html como el ccs y aparte he añadido también una carpeta que se llama imágenes que va a contener todas las imágenes de este proyecto pero no se preocupen las imágenes las voy a dejar en el github en la descripción y ahí van a poder ir y ver no solamente las imágenes sino también el código por si se estancan importante si se estancan en alguna parte del vídeo o del código por favor revisen el código revisen el vídeo una y otra vez hasta que logran solucionar el problema si aún así no logran solucionar el problema y están atascados verdaderamente atascados pueden escribirme a Telegram para que yo les pueda ayudar Ok con toda confianza van escriben y listo muchas veces no puedo ver los comentarios en YouTube Así que Les recomiendo directamente irme a buscar a Telegram muy bien Ahora sí empecemos Header (HTML y CSS) primero vamos a poner esto le vamos a poner por ejemplo en el título le vamos a poner baristas lo que ustedes quieran yo simplemente voy a poner baristas correcto luego voy a poner en el body voy a crear lo que es el header en el header voy a crearme un dip con la clase container giro y aparte me voy a crear otro dip con la clase container y otra clase que se llama Hero Ok aquí quiero que tengan en cuenta que esto es una sola clase acá abajo es una y dos vale solamente para tener eso bien entendido y no se confunda muy bien Ahora vamos a crearnos la primera franja del header que es la parte del logo del servicio al cliente y también la los iconos del carrito de compras y para eso vamos a crearnos un dip con la clase customer support le vamos a Añadir lo que es el icono y bueno el texto básicamente entonces aparte lo que no hemos visto es que vamos a estar utilizando bastante lo que es el fondo azul para los iconos Ok aquí simplemente deben registrarse ir a conseguir el kit y luego con eso ya copian y pegan lo que es el Script en el html correcto en este caso yo lo que voy a hacer directamente yo lo tengo aquí voy a copiar y pegar el Script lo pongo acá abajo simplemente para poder utilizar los iconos de fonazo y ahora venimos acá y vamos a buscar el icono que necesitamos en este caso ponemos Aquí vamos a poner lo que es en este caso a headsets Head nos interesa exactamente y asegúrense de que sean iconos gratuitos por ejemplo este de aquí era gratuito habían más pero eran son de pagos y eso no te permiten usarlos Ok entonces vamos a pegarlo aquí a miento lo tenemos que pegar justo Aquí vamos a crearnos lo que es en este caso luego del icono vamos a crearnos un dip con la clase content customer soporte y adentro vamos a sacarnos dos spam vamos a tener la clase text el primero y va a decir soporte al cliente y el segundo va a tener la clase number y va a ser el número telefónico bueno supuestamente que va a ser este Checa Las clases son un poco largas y bueno puede ser tedioso pero si ustedes quieren cambiarla pueden hacerlo con total libertad muy bien ese sería el primer tip luego de esto vamos a crear nosotros para lo que es el logo Así que vamos a poner la clase container logo y adentro vamos a poner el Bueno un icono que sería la tasa de café pero aparte de eso vamos a crearnos un h1 con la clase logo que en este caso Vamos a ponerle baristas y Pero bueno adicionalmente vamos a ponerlo dentro de una etiqueta de enlace y aquí simplemente le voy a poner bueno el Slash para indicarle que pues va a ser la raíz Ok va a ser un enlace a lo que es la página principal o la raíz y le vamos a poner ahora sí lo que es baristas vamos a buscar el icono en azul Tenemos aquí buscamos coffee y si no me equivoco creo que es la que hecha uno que es esta de Aquí vamos a copiar y vamos a pegar aquí lo vamos a pegar aquí listo y nos vamos a crear ahorita el último tip que va a ser el container y usar Ok voy a tener la clase con tener y usar también vamos a buscar dos iconos más ahorita en formación Pero antes de hacerlo vamos a poner aquí un dip con la clase content shopping Card Ok shopping y así mismo le vamos a poner spam text que va a decir shopping o bueno pongamos en español carrito de compras o carrito Oscar carrito esto y un spam numberg entre paréntesis ponemos en cero perfecto Ahora sí vamos a buscar los iconos que estamos necesitando que sería en este caso lo que es primero de usuario el user vamos a ocupar este de aquí lo pegamos y ahora vamos a buscar lo que es una cesta de compras que justamente este basket shopping lo copian y lo pegan acá abajo listo y ahí ya tenemos lo que es la primera parte de nuestro header bien aquí abajo del header o sea abajo de este tipo vamos a crearnos otro dip con la clase container nad bar ok con la clase container y Aquí vamos a crearnos una etiqueta nap con la clase nature y la clase container van a tener dos clases ese etiqueta nap listo aparte de eso vamos a poner un muelle con la clase de menú dejamos un espacio porque yo voy a poner un icono para lo que es el menú hamburguesa para responsive OK ahora sí venimos aquí ponemos Li ahora si venimos aquí y vamos a hacer una pequeña sintaxis de lo que es el emet Ok bien entonces aquí lo que va a hacer es poner una pequeña sintaxis de lemed para hacer esto más rápido y quiero que pongan atención porque esto fácilmente según se puede perder ok Así que en emet uno puede decir por ejemplo escribir en este caso un listón y dentro del desite en ponerle así directamente una etiqueta de enlace o cualquier otra etiqueta de html Ok como lo hacemos digamos que va a ser Así elegy le decimos a OK Y en este caso yo pudiera poner por ejemplo por 6 en esta sintaxis lo que va a poner o sea lo que va a salir de hecho aquí ya sale la abreviación aquí como pueden ver ya muestra lo que va a resultar no literalmente aquí lo que le estoy diciendo es que dentro de este leaf item va a multiplicar la etiqueta de enlace seis veces Ok si yo quisiera por ejemplo poner seis veces una etiqueta de un Lite con un enlace adentro yo tendría que englobar todo esto entre paréntesis Y ahí sí funcionaría Ok de tal manera Ya ven en este caso me interesa simplemente poner todos que sean el hashtag o el signo numeral porque no va a reaccionar a ningún lado Ok entonces para hacer eso vamos a añadirle algo aquí entre corchetes le ponemos las los atributos de esta etiqueta cuál sería un atributo bueno como es un enlace tiene el atributo principal el H red Así que ponemos H red y entre comillas le ponemos bueno la ruta obviamente en este caso es el numeral porque no va a reaccionar a ningún lado y ahora sí quiero que multiplique esto por 6 listo excelente Ahora lo único que tengo que hacer es escribir el texto de cada enlace por ejemplo aquí pongo simplemente inicio con el tap voy cambiando acá le voy a poner Moca de lado con otra vez pongo tap y voy a poner Expreso acá voy a ponerle capuchino acá le voy a poner más y acá simplemente va a poner blog vieron lo fácil y rápido que fue escribir html utilizando mt es por eso que es muy importante conocer estas técnicas o atajos Vale y realmente no es muy complicado de hecho ya más adelante en lo que estamos haciendo la imagen les voy a enseñar algo más que a mí me pareció increíble cuando lo vi por primera vez bien entonces Espero que hayan aprendido algo nuevo en esta parte del vídeo vamos a seguir aparte de este huele Vamos a ponerle acá abajo lo que es el input de búsqueda Pero va a estar dentro de un formulario ponemos un formulario el action obviamente ese sí que no lo vamos a utilizar para nada entonces venimos aquí y adentro del formulario vamos a poner el input muy bien Que va a ser de tipo búsqueda y le vamos a borrar el name y el ID porque eso no me sirve por el momento le vamos a poner un Place holder que va a decir simplemente buscar y tres puntitos muy bien aparte de eso vamos a ponerle lo que es el botón Así que vamos a ponerle un botón punto vtn search y le vamos a poner un bueno el icono de lo que es Buscar no así que ponemos search aquí está copiamos y pegamos perfecto ahora también vamos ya que estamos aquí de una sola vez vamos a buscar lo que es las barras del menú responsive copiamos y le vamos a pegar justo aquí antes del huele lo vamos a pegar aquí excelente Entonces ya tenemos lo que es así la parte de header y ahora vamos a ir a la parte de los estilos Ya hicimos el html está así lo vamos a transformar lo primero en este en esta parte de los estilos es que deben saber que estoy trabajando con variables para los colores también estoy trabajando con la Fuente poppings ya muy conocida en el canal Así que simplemente van a irse a fonts.uu.com voy a dejar todos los links en la descripción para que no se pierdan si son nuevos en esto y simplemente van a buscar la Fuente poppings Ok Esa es la primera parte del css Ahora les dije estoy utilizando variables para los colores así que voy a poner dos puntos Root y voy a poner todos los colores que estoy utilizando en este caso simplemente le voy a poner primary color de tal manera Y en este caso el color primario va a ser un color así como café así como cafecito luego vamos a ponerle lo que es el background color que lo utilizo en casi toda la página que es que es un color como café realmente reducido tirando a Gris más o menos arcilla a blanco exactamente es este color muy bien luego vamos a poner lo que es dar color que es un color casi negro para lo que es letras y entre otras cosas muy bien ahora en este proyecto estamos utilizando lo que o vamos a utilizar lo que es el font vamos a estar utilizando lo que es Rem entonces para trabajar con red de una manera más óptima lo que se suele utilizar es transformar lo que es un Rem a 10 píxeles que sepan que un Rem equivale por defecto a 16 píxeles primero tenemos que transformar eso o hacer esta transformación en lo que es el html Así que le vamos a poner directamente html y ahí estamos seleccionando literalmente toda la página web o todo el sitio web luego vamos a poner y aquí en vez de ponerle directamente 10 píxeles o así y aquí en vez de poner directamente 10 píxeles no lo hagan vamos a trabajar con porcentajes Ok y la forma correcta de transformar 16 a 10 píxeles en porcentajes es utilizando el 62.5% y eso ya equivale a 10 píxeles ok luego utilizamos el phone family Vamos a ponerle popping y le vamos a poner si popping falla Pues bueno le va a ponerse en serio Y ya por último le vamos a poner ese vector universal y vamos a poner margin 0 padín cero ahora le vamos a poner boxer box antes de irnos a Modificar el css de header vamos a crearnos un Bueno un apartado para lo que son utilidades OK Así que vamos a poner aquí utilidades y bueno yo voy a hacer esto si se preguntan Cómo hice esto esto de aquí simplemente es una extensión de visa de Studio code bien si quieren en otro vídeo lo voy a explicar pero ahorita no es el caso bien entonces en utilidades vamos a crearnos una clase container y eso lo que simplemente va a hacer es centrar el contenido vamos a utilizar el más with 120 Ren y luego vamos a utilizar lo que es el margin 0 auto muy bien con eso ya bastará ahora sí vamos a poner Aquí header bueno Esto lo hago yo pero ustedes no hace falta que lo hagan o pueden poner un comentario normal No pasa nada vamos a decirle container giro y esto simplemente va a tener un background color y vamos a utilizar exactamente el color que definimos que se hace aquí gran color muy bien eso simplemente para darle color ahora le pusimos otro dip con la clase de giro que es lo que en sí tiene todo el contenido y vamos a utilizar lo que es Flex bien Yo estoy content space bit win a Line item Center y padding de dos rent y 0 vamos a revisar un momento la página en este caso no está funcionando es porque me olvide de obviamente enlazar lo que es la hoja de estilos Entonces vamos a poner Styles punto css ahí y ahora sí Ahora sí está funcionando obviamente esto lo voy a hacer así más pequeño para poder apreciar mejor si se pueden dar cuenta la letra sale bueno súper pequeña y eso es porque actualmente la letra tiene 10 píxeles recuerdan para eso sirve lo que hicimos en el html y al momento de decirle Por ejemplo 120 Ren estamos diciendo que tenga un ancho máximo de 1200 píxeles y luego utilice el margin cero auto para centrarlo de tal manera bien vamos a seguir y ahora lo que vamos a hacer es transformar la parte del logo y también esta parte de acá Así que volvemos aquí revisamos el html que es lo que tenemos tenemos en teoría 3DS el cual es el que es tomar Support container logo y el container vamos a trabajar sobre eso primero vamos a decirle que va a tener un display Flex y un online item Center más un rap de dos luego vamos a decirle que el icono que está dentro de este dip tenga un font de 3.3 ram vale luego la parte del texto va a tener Bueno también va a tener content customer support así se llama la clase Así que vamos a decirle que tenga un display Flex y un Flex dirección código muy bien ahora sobre container logo vamos a decirle que tenga un display Flex y a Line item Center también va a tener un Cat de 0.5 Ren ahora vamos a trabajar sobre el enlace el cual es container logo ya le puedo poner la a y ahora sí vamos a ponerle texto decoration not le vamos a poner el color que sea color negro revisamos en este caso no le está tomando es porque vamos a decirle esto le vamos a Añadir el h1 porque antes de la del enlace tenemos el h1 como pueden ver ya se ha modificado muy bien sin embargo vamos a cambiarle un poco los los estilos porque está muy pequeño Entonces vamos a poner aquí punto container logo el icono y le vamos a poner fonside de 320 por otro lado este aquí este tamaño va a ser fonsize de igual manera va a ser tres vale aparte de esto Vamos a ponerle un text transform uppercase para que todo esté en mayúscula y por último un Leather spacing o sea el espacio que está entre las letras le vamos a poner menos un Pixel revisamos y queda de esta manera lo cual está perfecto muy bien Ahora sí vamos a transformar el último que es estos estos iconos de acá regresamos ponemos aquí container user display Flex y la edad de un rent y el cursor puente cursor Pointer listo necesito modificar tanto este de aquí como este de aquí necesito modificarlo Entonces vamos a utilizar las clases que viene por defecto en phone para poder modificar en este caso es fire y Así que podemos fa user podemos ponerle así container punto fa y usan el color va a ser el primer color y un padding padding right o sea un padding a la derecha de 2.5 renta también va a tener un Border solamente un borde que va a estar a la derecha y va a tener este color y nada más por otro lado Vamos a ponerle con t en el user el shopping así y le vamos a decir que tenga lo mismo casi Food el color también va a ser primary color y también va a tener un pack y va a tener un bailed a la bueno así que de un rent y además Vamos a ponerle un content que estoy aquí es el contenido de carrito con displays y Direction revisamos y ya está excelente Entonces ya podemos ver aquí que ya tenemos ahora vamos a modificar la parte del natpad Así que vamos allá ponemos aquí y ponemos container va a tener un patrón color de color o sea va a ser oscuro Recuerden que el mando un color es como este mismo color pero súper más clarito y este ya va a ser el color primario que es este mismo y bueno ahora ponemos el punto Nat bar aquí display Flex yo estoy content Center por último va a tener un padding de un re y 0 izquierda derecha muy bien ahora tenemos la barra esa barra de ahí o sea las barras que son para el menor responde como pueden darse cuenta y eso de ahí no no queremos que salga al menos en las pantallas bueno la pantalla grande por lo tanto para poder ocultarlo simplemente vamos a hacer lo siguiente ponemos punto Nat Bart punto es la clase del fonazo Así que directamente podemos hacer esto le ponemos el display Note y luego con los medios lo que vamos a hacer es mostrarlo con un display block Entonces ahora sí eso es lo que estamos buscando vamos ahora a trabajar sobre el menú el menú Es la lista bueno la lista desordenada le ponemos display Flex y le ponemos un Cat de dos Friends ahora vamos a trabajar sobre Las Lisas ítem para quitarle menú Li para quitarle el estilo no el list Style muy bien Ahora vamos a trabajar sobre los enlaces directamente y Aquí vamos a ponerle texto el color el color va a ser el que definimos que es dar color un funkwave de 700 bueno 600 600 está mejor vamos a revisar cómo va quedando y Perfecto perfecto está muy bien Ahora mismo necesitamos lo que es el texto Transformers y luego también le va a poner un position relativo bien es relativo Porque es importante porque vamos a hacer un pseudo elemento que o sea vamos a utilizar el after para crear un pequeña una pequeña raya sí que es la que vimos en la demostración y para hacer eso podemos simplemente hacer así menú le ponemos la y luego le ponemos el after siempre que utilicemos esto Vamos a ponerle content Y luego puedes poner Y luego podemos poner el with que es en este caso digamos que sean 15 píxeles o sea 1.5 rent luego hate de un píxel en Batman color También es importante tenemos que sea blanco y ahora sí en la parte del posición absoluta posición absoluto le vamos a decirle que esté abajo menos tres píxeles y LED 50 pixeles led 50% muy bien Vamos a revisar esto cómo va quedando y está así sin embargo a pesar de que le puse el led 50% no está centrado del todo entonces vamos a centrar eso y para hacer eso voy a utilizar lo que es el transporte Translate menos 50% coma 50% esto lo que hace directamente es entrarle así que vamos a revisar y efectivamente está centrado justo lo que necesito qué más tenemos que hacerle aquí digamos que en este caso va a ser un opacity de cero para ocultarlo y solamente mostrarlo cuando haga hover sobre cada enlace bien así que por eso como voy a hacer esta pequeña transición vamos a utilizar lo que es transición que va a ser de punto 3 segundos y va a ser Izzi muy bien ahora para poder mostrarlo lo que voy a hacer lo siguiente pongo punto menú a after para referirme al a este elemento a esto que acabamos de definir Pero simplemente va a poner hover y le va a poner opacity de 1 para mostrarlo ahora podemos punto menú a hover o sea para cada vez que hago hover sobre el enlace voy a poner que sea de color blanco y listo vamos a ver Okay okay vamos a ver en este caso me equivoqué en algo y fue en el orden de esto en realidad este a punto after debería estar acá y listo porque claro es cada vez que yo hagan haga cover sobre el enlace ahí que me muestre directamente Bueno lo que es este after vamos a revisar y ahora sí me muestra como pueden ver ya es una pequeña transición y todo Sin embargo Esto está como que muy pegado aquí porque no hemos modificado Todavía este input así que vamos a modificar esto en este momento ponemos aquí y para el input primero hay que modificar lo que es el formulario Así que vamos a ponerle punto search le ponemos posición relative primeramente luego vamos a utilizar el display Flex y Alain Center luego un borde de dos píxeles solid y blanco bien también va a tener un borde radio de 20 píxeles o de dos renders va a tener un color de fondo blanco así que ponemos aquí y le voy a poner un tamaño específico o sea una altura que va a ser hate de 4.4 Ram muy bien revisamos y eso está bien está bien Ahora mismo lo que voy a hacer es el Modificar el input Así que ponemos punto search for input Primero lo primero le quito el outline y le pongo from Family inerit para que se muestre la fuente opens y no cualquier otra que esté por defecto le va a quitar el borde y también le voy a poner un tamaño que sea de 25 rent de 1.4 rent arriba y abajo va a tener cero y izquierda derecha va a tener de dos re por último también le vamos a poner un color que va a ser este x77 vamos a revisarlo está así excelente si escribimos va a salir todo eso muy bien voy a cerrar esta parte muy bien Qué más necesitamos en este momento ponemos Aquí también un cursor Pointer cursos Pointer perfecto y también vamos a quitarle esa x que viene por defecto en el input de búsqueda OK le vamos a quitar eso como lo hacemos ponemos input dos puntos ponemos y buscamos exactamente que diga este de aquí webkit Search cáncer perfecto le ponemos a Prince O sea la apariencia de Non y muy bien Ahora vamos a Modificar el botón este de Por así decirlo donde está el icono para buscar también que le puse la clase btn Search Así que vamos a ponerle ese ponemos btn Search le va a quitar el Border Border note el background color va a ser en el primer color display Flex and sender justify content Center el 100% y el padding de un render revisamos va quedando así eso está bien y porque está bien porque tenemos que ponerle este espacio que dejé aquí fue para ponerle el overflow highline con esto ya se arregla revisamos y efectivamente ya se arregló excelente muy bien Ahora solamente hay que modificar este icono de aquí hacerlo más grande y ponerle color blanco así que vamos a hacer eso ponemos aquí punto vtn Search y le ponemos un Side de dos rent y también el color que sea blanco perfecto bien entonces ya quedó nuestra primera parte del header ahora vamos a ir la parte del encabezado de la imagen y todo eso y para hacer eso voy a dejar aquí un pequeño comentario o poner banner excelente nos vamos al html y continuamos va a ser una sección va a tener la clase Banner Encabezado (HTML y CSS) giro para tener la clase banner Así que podemos banner y adentro va a tener un dip con la clase content banner un párrafo que diga café delicioso y un h2 puede tener 100% natural un br para dar un espacio de línea un salto de línea luego un café fresco muy bien Y por último le vamos a poner una un enlace que diga comprar ahora muy bien y dónde está la imagen que vimos entonces bueno la imagen va a estar en el background o sea en el fondo y para hacer eso simplemente lo vamos a hacer en el css Entonces no ocupamos ninguna imagen en el html Así que venimos acá al css y vamos a directamente poner aquí la clase banner banner ponemos background y más aquí está cuadrado y más y vamos a estar ocupando lo que es la url bien entonces aquí ponemos la ruta de lo que es la imagen ponemos mg buscamos banner.jpg y listo venimos acá solamente Bueno aquí no va a salir nada realidad porque hace falta bueno como pueden ver no tiene el espacio y así Entonces vamos a darle un espacio definido un alto definido vamos a decirle que tenga un gt60 rent y también le vamos a decirle que tenga un background size cover y un background position que se hace bien Center muy bien revisamos y queda de esta manera ahora lo que vamos a hacer es antes de continuar con el texto voy voy a oscurecer un poco el fondo de la imagen para que se pueda apreciar mejor el texto Por así decirlo vamos a poner un línea gratis acá fuera ponemos una coma y Aquí vamos a poner dos colores o incluso si ustedes quieren pueden hacer un degradado bueno con mucho más colores y también se puede cambiar el sentido o la dirección de esto de este degradado bien en este caso yo simplemente voy a poner bueno poner 100 de para cambiar el sentido de la dirección y los colores que voy a estar utilizando en este caso va a ser negro 0000 coma y voy a utilizar el mismo negro pero en este caso con una opacidad de 20 y como pueden ver queda así de este lado está El 0 el negro absoluto que no tiene ninguna opacidad y este lado tiene bueno el negro que tiene opacidad Ok lo hice así para que se pueda apreciar mejor porque esto de aquí que no se ve ahorita lo voy a mover acá OK Así que veremos al código de nuevo y Aquí vamos a trabajar sobre content banner primero le voy a decir que tenga un más with de 90 ring luego margin ser auto para centrarlo y va a tener un padding 25 Ren arriba y abajo y cero izquierda derecha Esto es lo que va a hacer ya es entrarlo como pueden ver perfecto Ahora sí vamos a trabajar sobre el contenido tenemos content banner la letra p con h2 por último ponemos punto content banner el enlace muy bien Aquí vamos a utilizar el color que es este luego ponemos un Side de 1.2 y aquí le vamos a poner un margin botón de 500 también vamos a revisar excelente el h2 si vamos a ponerle un color blanco un font de 3.5 rent 500 Y por último online hay de 1.2 Así va quedando Aquí vamos a decirle primeramente que tenga un Martin top de 2 rent un color blanco y un background color Prime color también va a tener un display en Line block porque está aquí no tiene Por así decirlo un tamaño y a veces está superponiendo y no queremos eso luego utilizamos un panel de un Rem arriba y abajo tres izquierda derecha por último un transform de la letra uppercase y un redondeado bastante pronunciado de tres con eso ya basta vamos a verlo y queda así excelente tenemos ya nuestro encabezado y ya ven que esto era importante para que se vea así y se pueda Resaltar el color de la letra y todo muy bien Ahora sí vamos a trabajar sobre el o voy a maquetar primeramente este de aquí y este de acá abajo en el html Así que vamos de nuevo al html y vamos a estar haciendo un mail con la clase Main así dentro de mí voy a poner casi toda la página y ya por último estará el footer también entonces tengan eso en cuenta dentro del mail lo que vamos a hacer ahorita es crearnos una sección con la clase con tainer Características (HTML) sección una clase container y la clase container features de tal manera voy a crearme un Beat con la clase cartucho y ahí va a tener Por así decirlo bueno va a crearme cuatro deeps con esa misma clase y adentro va a tener sus diferentes contenidos o diferentes características Bueno ahora lo que vamos a poner es el texto del contenido de la característica en este caso vamos a estar utilizando unos iconos que los voy a buscar en que lo vamos a ir a buscando de una sola vez OK Vamos a estar necesitando lo que es el Play es un avión en este caso vamos a estar utilizando este que dice Planet vamos a copiar lo pegamos aquí luego ponemos fundir con la clase feature content adentro vamos a poner un spam y vamos a estar utilizando lo que es un párrafo también en este caso Vamos a ponerle aquí en pedido superior a 150 dólares va a estar gratis no que va a ser el envío gratuito a nivel mundial listo ahora esto mismo vamos a replicar tres veces más perfecto vamos a cambiar los iconos y vamos a cambiar el texto en este caso voy a hacerlo rápidamente bien como pueden ver ya he reemplazado todos los iconos y todo el texto vamos a revisarlo en la página como pueden ver aquí está son diferentes y los iconos que vamos a estar utilizando uno es este ya les enseñé los otros son los siguientes vamos a poner wallets y vamos a poner exactamente la billetera que está ahí aparte de esto también van a buscar lo que es regalo en inglés que shift así y vamos a poner el primero que le salga luego también van a poner otra vez los audífonos headset y van a poner este de aquí y vamos a ir ahora a la parte de las mejores categorías regresamos nuevamente al código al html aquí abajito abajo de esta sección vamos a crear otra sección con la clase Categorías (HTML) container y con la clase top categorice bien adentro vamos a poner un h1 con la clase heading guión 1 y bueno Esta es va a ser una utilidad que voy a reutilizar la voy a estar utilizando en diferentes títulos o en diferentes h1 a lo largo del sitio web por lo tanto esta Va a ser una clase reutilizable y la voy a hacer de esta manera Entonces ahora sí vamos a proceder a poner el título que va a ser mejores categorías muy bien voy a crear un dip con la clase container aquí adentro lo que vamos a poner en este caso es un dip con la clase más otro otra clase que se va a llamar en este caso categoría Moca en este caso es car categoría es una clase reutilizable que voy a colocar en todos los elementos de este contenedor va a compartir estilos y por otro lado categórica es una clase especial y única para cada elemento para ponerle una imagen de fondo sí Entonces en este caso lo que voy a colocar adentro va a ser un párrafo con el nombre de la categoría que en este caso es café Moka más un spam que diga ver más abajo Lo que voy a crear es exactamente lo mismo De hecho voy a copiar y pegar esto dos veces y vamos a reemplazar simplemente las clases de cada dip en este caso va a ser categoría Expreso y acá abajo va a ser categoría capuchino de igual manera le vamos a cambiar el párrafo y aquí le vamos a poner por ejemplo capuchino y acá arriba la vamos a colocar café bueno Expreso americano expreso Expreso americano vamos a ir a la parte de los mejores productos así que vamos a poner aquí otra sección con la clase container y la clase top Productos (HTML) product Recuerden que son dos clases en cada sección una es para central y contenido que en este caso sería container y la otra clase es bueno lo que va a englobar Por así decirlo la sección que en este caso es top products o mejores productos de igual manera vamos a copiar y pegar este h1 porque yo les dije que esta Va a ser bueno le ponemos esta clase que es Head y -1 para poder reutilizar en los diferentes títulos aquí lo que vamos a poner es mejores productos y de igual manera vamos a crearnos otro dip con la clase container products sí Y aquí adentro vamos a hacer algo muy parecido a lo que hicimos arriba con las categorías sin embargo si se pueden dar cuenta acá aquí por ejemplo en este en esta sección de los mejores productos tenemos esta parte de aquí Entonces esta parte de aquí también la vamos a codificar aquí en html y la vamos a colocar dentro de otro dip con la clase container options de esta manera y bueno vamos a hacerlo de una sola vez ponemos de hecho tres spam Vamos a ponerle por ejemplo el primero se llama destacados segundo se llama más recientes y el último se va a llamar mejores vendidos correcto en el proyecto original hay una de estas opciones que está diferente a estas otras y se supone que Esto indica a que estas estos productos de acá corresponde a esta opción que está acá arriba por lo tanto esta Va a ser la clase activa y Aquí vamos a darle Exactamente esa clase le vamos a poner Class active y listo Ahora sí vamos a pasar a lo que es el container productos o los mejores productos en este caso vamos a colocar un dit con la clase Card que va a ser la tarjeta de producto dentro del Carl product lo que vamos a crear primeramente es otro Deep con la clase container img y adentro vamos a poner algunos elementos No solamente la imagen del producto sino que también vamos a estar manejando lo que son la etiqueta del descuento en caso de que tenga el precio o un descuento pues ahí va a ir la etiqueta y también va a tener el los botones de por ejemplo vista previa que son algunos iconos OK Por lo tanto eso va a ir también en la imagen y cuando hagamos joven vamos a hacer ese efecto de esconder y Mostrar Entonces vamos allá pongamos img y bueno vamos a utilizar el emet la abreviación el cual Nosotros sabemos que poniendo bueno entre corchetes podemos poner las propiedades entonces ponemos src y aquí literalmente vamos a buscar la ruta o bueno vamos a definir la ruta de la imagen está la carpeta img y el archivo o la imagen se llama café irish.jpg bien Esto va a tener también Aquí vamos a ponerle café Iris ahora sí le vamos a dar enter y ya literalmente me sale esto Ok realmente yo lo estoy haciendo así para que puedan apreciar o tengan otras maneras de utilizar el emmet Y tal Pero lo ideal sería pues utilizar esto cuando tenga muchas imágenes o tengan que multiplicarlo por 6 por 10 y tal Entonces ya iremos haciendo esto a lo largo de todo el vídeo luego de la imagen lo que también vamos a poner es un spam con la clase Discount Aquí vamos a ponerle menos 13 por ciento que ese es el texto y por último vamos a poner un dit con la clase button adentro de este vamos a poner algunos bueno dentro de tip vamos a poner tres spa Así que ponemos spam por tres bien entonces aquí literalmente vamos a poner algunos iconos pero que lo muestra de esta manera Entonces digamos que si queremos lo que podemos hacer es bueno ponemos spam hay una configuración de visual Studio code que actualmente no me acuerdo cuál era pero permite que esto no salga así y automáticamente se formatee vale es es una configuración nativa del editor de código y no necesita ninguna extensión pero actualmente no me acuerdo y yo tampoco lo tengo activado por lo tanto pueden hacer esto que se dificulta bastante otra cosa que también pueden hacer es poner simplemente pueden poner esto spam y simplemente lo duplica tres veces yo creo que esta es la forma más sencilla verdad Ahora sí vamos a buscar en phone vamos a buscar los iconos que vamos a utilizar en este caso los iconos que vamos a utilizar son los siguientes vamos a buscar el ojito ponemos ojos en inglés que es el este de aquí exactamente copiamos lo pegamos aquí regresamos ahorita vamos a buscar otro que va a ser corazón es exactamente este de aquí Bueno en realidad no va a ser sólido va a ser el regular que es este lo vamos a copiar y pegar aquí también Vamos a ponerle regular y el último icono va a ser el de comparar Ok es que busquemos compare vamos a estar utilizando exactamente el este de aquí copiamos y lo vamos a pegar exactamente acá muy bien Eso es todo lo que tenemos que hacer al menos aquí en este container img vamos a pasar al contenido del producto bien Ahora lo que vamos a crear es otro dit con la clase content product y adentro aquí es donde voy a poner todo el contenido de lo que es el producto ya pero primero vamos a revisar que tenemos aquí podemos darnos cuenta que tenemos este bueno estas estrellitas que vendrían ser el rating del producto tenemos el título tenemos este icono y también tenemos lo que es el precio correcto Entonces vamos a poner toda esa parte aquí primero voy a crear un dip con la clase starts y aquí es donde voy a poner las estrellas vamos a buscarlo en azul venimos aquí ponemos starts vamos a esperar que cargue y listo tenemos dos y vamos a usar de hecho las dos en este caso vamos a copiar esto y este producto simula que tiene cuatro estrellas de 5 por lo tanto vamos a duplicar estos cuatro veces y la última Estrellita no va a ser esta sino que va a ser la que está vacía el cual es esta la que dice fa regular vamos a abrirnos aquí copiamos y pegamos y listo tenemos Por así decirlo nuestro dit con las estrellas ahora lo que vamos a poner abajo de este edit va a ser un h3 y le ponemos el título del producto en este caso va a ser café irish y listo abajo vamos a poner un spam con la clase add Card de esta manera y adentro Vamos a ponerle simplemente el icono de la sexta Ok ponemos esto Bueno en realidad no sé no es basket Ok segundo Vázquez o pueden copiar el de hecho de que está en el header es lo mismo vamos a estar utilizando creo que de hecho creo que es esta aquí ahorita vamos a comprobarlo si eso no es ya que estamos utilizando la misma de acá de del header es exactamente faso creo que está acá era regular vamos a ver sí pero no importa simplemente le ponemos fa sol y listo vamos a revisar cómo va quedando y Ok se ve pequeño pero ya lo vamos a ir cambiando con css la última parte que nos hace falta de este bueno esta tarjeta de productos es lo que es un párrafo con la clase price price muy bien ponemos un precio por ejemplo 4 dólares con 60 y adentro de este precio vamos a poner un spam ponemos un spam y aquí ponemos 5.30 hago esto porque este es para lo que es el precio Por así decirlo normal y el 460 vendría a ser de precio rebajado entonces este spam va a tener un estilo diferente al precio con descuento que en este caso vendría a ser 4 dólares con 60 obviamente hay productos que no tienen descuento por lo tanto este spam no va a existir bien muy bien entonces ya tenemos Por así decirlo un producto voy a comentar aquí rápidamente digamos producto 1 listo y acá podemos ponerle otro comentario para ir diferenciando ponemos producto 2 y listo para modificar de una sola vez parte por parte lo que es Obviamente el producto y también el container de categorías Así que lo primero recordemos que todo esto está en el html dentro de un Main con la clase me encontent por lo tanto vamos a poner aquí un comentario de hecho yo lo hago en los comentarios de esta manera ustedes pueden comentar algo de hecho simplemente poniendo lo que es el control Slash bien o chip control a también Comenta y listo entonces Yo la hago de esta manera con una extensión pero ustedes pueden comentar como quiera bien Aquí vamos a poner Main content y vamos a ponerle un color porque toda la página Por así decirlo tiene un color de fondo que es como una especie de gris acá lo vamos a ver y de hecho tengo en la variable ese color la variable que se llama background color si nosotros guardamos esto y vamos a revisar la página Ya ven que cambió de color es este color como color hueso más o menos ahora vamos a configurar la parte de las características primeramente vamos a poner aquí un comentario Bueno lo va a poner en inglés ustedes pueden poner características tranquilamente Y eso es exactamente esta sección de aquí Ok esta sección de acá muy bien lo primero Restante CSS (HTML y CSS) es poner el punto container pictures ponemos un display y va a tener exactamente cuatro columnas Así que le ponemos grip template de 4 un FR bien luego le ponemos un gad de 3 rent y un padding de tres en cero revisamos perfecto ya se ubicó ahora Simplemente hay que Modificar el estilo de cada tarjeta de las características las características son estas de aquí por lo tanto vamos a hacer eso ponemos punto car pictures online Center y donde usted es el content Center para centrar todo un Gap de 1.5 Ren para darle una separación un padrón color blanco y un borde radios de un Rem o sea de 10 píxeles por último un padding de 1.5 Rem y 0 por último vamos a modificar también lo que es los iconos Así que lo ponemos de tal manera y más que nada le vamos a aumentar el tamaño del icono le ponemos 2.7 rent también le vamos a cambiar el color que va a ser el color primario problema y color luego le vamos a poner para modificar los párrafos que están adentro y más que nada las letras Así que vamos a poner Flex primeramente un Flex dirección column y esto lo hago para utilizar el cap de 0.5 y simplemente vengo acá pongo Future content lo que es el spam y el otro que es un párrafo simple ahora Esto va a tener por ejemplo el spam va a tener un fondo de 700 y va a tener un tamaño de letra de 1.2 Ren también un color que no va a ser negro completamente sino va a ser un color bueno casi un gris tirando a negro que es exactamente 15 15 15 lo tengo las variables la variable se llama dar color por otro lado lo que es el párrafo si va a tener otro color que va a ser 777 es un gris y un foamware menor que es 500 eso sería todo por la parte de las características vamos a revisar perfecto ya estaría regresando al código vamos ahora lo que vamos a poner ahora lo que vamos a poner va a ser las categorías o las categorías lo comento primeramente Y si podemos ver en el html tiene esta clase que está categoris esa clase representa Por así decirlo a la sección completa de las categorías Así que pongamos eso pongamos top categoris para modificar el contenedor simplemente vamos a utilizar un display Flex en este caso ponemos un Flex dirección por último también vamos a utilizar un margin botón de 3b para darle más espacio entre secciones muy bien luego tenemos lo que es el container categoris y le vamos a decirle que tenga un display grip en este caso y un grip template columns de tres bueno de tres fracciones Por así decirlo y una separación de tres muy bien regresamos ya va quedando muy bien necesitamos ahora Modificar el cargador que está la clase que le aplica todos los bueno todo el contenedor que en este caso son tres a cada categoría le aplica el mismo estilo pero recuerden que tiene cada dip tiene su propia clase para poder modificar lo que es la imagen de fondo pero la clase general que es carga teórico le vamos a poner primeramente un hate de 20 rent o sea una altura de 20 real de 200 píxeles luego le ponemos un display Flex un Alain Einstein Center para sentarlo y un justify contento también pero aquí antes de eso le vamos a cambiar el sentido de la dirección de fila a columna muy bien algo más va a ser el borde radios de los RAM y también una separación de dos Rem entre cada elemento excelente vamos a revisar cómo está tenemos el espacio como pueden ver lo que nos hace falta ahora es poner la imagen de fondo tenemos tres clases diferentes para cada contenedor es categoría Moca bueno categoría categoría Moca es el primero luego tenemos categoría capuchino Y por último tenemos lo que es categoría Express muy bien para poder poner una imagen de fondo en css simplemente utilizamos lo que es el background image Así que ponemos background y más y ponemos simplemente URL y ponemos la imagen la URL de imagen donde está la ruta pero también vamos a estar utilizando la imagen de fondo no va a estar completamente Por así decirlo original sino que también le vamos a estar añadiendo un degradado sí un degradado para poder hacer oscurecer un poco la imagen y cada contraste con la letra se puede apreciar bien la letra y el color por lo tanto antes de poner la URL vamos a poner un línea gratis de tal manera línea y aquí le voy a pasar dos valores que van a ser exactamente los colores o los colores en realidad se puede pasar mucho más colores y también se puede pasar lo que es el sentido de la dirección del degradado pero en este caso simplemente vamos a poner dos colores que exactamente va a ser 0000 es negro pero le voy a poner 80 que eso representa un 80% de opacidad y el otro color va a ser exactamente el mismo muy bien luego voy a poner la URL y aquí entre comillas simples o bueno entre comillas doble como ustedes quieran ponen img que en este caso yo lo tengo en la carpeta img la imagen ponemos Moca categoría punto jpg y listo guardamos revisamos Y en este caso no está funcionando vamos a ver por qué Me faltó la coma aquí entre en línea gratis y el URL tiene que haber una coma de lo contrario no va a funcionar correcto muy bien como pueden ver aquí ya sale algo simplemente que en este caso no está bien bueno posicionado así que vamos a arreglar eso ponemos aquí un background primeramente un background para un size cover Y por último le ponemos un background position que sea botón en este caso simplemente para ver cómo va quedando y excelente ya tenemos Por así decirlo ubicada la imagen correctamente en realidad Debería ser Center El background position pero en este caso le ponemos botón porque la imagen es así entonces ustedes tienen que ir jugando con esos valores y es que va a cambiarle las imágenes correcto por último también le vamos a poner un background repeat esto simplemente por precaución porque esto ya está aprobado y realmente Bueno A veces lo que pasa es que puede repetir en tal ocasión dependiendo del tamaño de la imagen pero simplemente por precaución lo vamos a mantener Muy bien Entonces vamos a copiar esto y lo pegamos en los demás en las demás clases simplemente le voy a cambiar por ejemplo Aquí van a hacer boca category simplemente Vamos a ponerle creo que es capuchino categori si no me equivoco capuchina categori la imagen Sí se cambió creo sí muy bien y acá le vamos a poner Expreso Expreso categoría bien Se cambiaron simplemente que como pueden ver aquí como está abajo las imágenes no serían no se ven bien del todo por lo tanto vamos a cambiar esto aquí le vamos a cambiar en este y en el de abajo le ponemos centro perfecto simplemente le vamos a poner Bodom que significa que se posicione abajo en el categori Moca nada más bueno ahora sí vamos a arreglar esa letra que está de color negro le voy a poner de color blanco así que le ponemos cargo categoría para que le aplique a todos los estilos de la de la clase que estamos utilizando o compartiendo los tres elementos y aquí le va a poner por ejemplo lo que es font de dos punto cinco red de 25 píxeles el color que sea blanco y le vamos a poner text transport capital Ice para que cada palabra que tenga ese texto o esa frase o ese párrafo inicie con mayúscula Ok por último también le voy a Añadir lo que es exposición relative pero eso es porque vamos a estar utilizando un pseudo elemento para hacer una pequeña línea ya van a observar Pero antes de llegar a ese punto vamos a hacer primeramente carcategory el spam porque el spam simula la parte de enlace que significa ver más Ya esa parte también va a tener Bueno un tamaño de 1.6 rent un color blanco y va a tener un efecto de hover Así que ponemos cargador spam dos puntos hover simplemente le vamos a cambiar el color le ponemos primer y color muy bien aquí dejamos un espacio para crear este segundo elemento y vamos a revisar Cuál es ese elemento que les estoy diciendo es exactamente esta línea de aquí Este esta rayita Así que vamos a crearlo ponemos Card categoría p dos puntos after de esta manera OK Bueno en realidad son dos veces los dos puntos Ok ponemos el content vacío y vamos a poner aquí un ancho de 2.5 rends una altura de dos píxeles el color de fondo obviamente tiene que ser blanco y la posición absoluta por eso le pusimos acá arriba el posición relative para que funcione luego le voy a poner el botón menos un Rem ya vamos a ver cómo va quedando y el led 50% OK Vamos a ver bien ahí ya lo tenemos sin embargo no está centrado del todo horizontalmente y eso se arregla fácilmente utilizando un transform Translate menos 50% coma 50% excelente esto ya lo centra y listo ahora lo que vamos a modificar es la parte de los productos así que voy a poner aquí un comentario otro más va a ser top products excelente y Aquí vamos a empezar de la misma manera ponemos top products stock productos le ponemos display bueno esta parte se parece a lo que hicimos en tocate es exactamente Bueno lo mismo gat de 2 Ren y también le vamos a dar un botón de 3 rent que es la separación entre secciones ok de esta manera otra cosa que se me está olvidando y no he hecho todavía es los títulos la clase heading -1 que es una utilidad no está creada Así que voy a venir acá arriba a esta parte aquí donde dice utilidades abajo de container voy a crearme esa utilidad que es heading menos uno y Aquí vamos a primero decirle que se alinea el centro context de 500 Me parece bien y también un tamaño de letra de tres Y eso es todo Esa es mi utilidad Ahora sí regresamos vamos a ver perfecto continuando con esta parte de los productos vamos a revisar que tenemos por aquí y bueno después del título que ya ha sido modificado en el css tenemos este container aquí que son las opciones ya explicadas anteriormente luego tenemos lo que son bueno los productos en Sí este contenedor entonces antes de llegar a esta parte de aquí que es bastante extenso esta parte de css tenemos que hacer este estas opciones de acá por lo tanto vamos a hacerlo vamos a ir en orden ese esa clase se llama container options le decimos que tenga un display Flex un joystick contento Center bien justify contact Center una separación de dos rent por último simplemente va a decir que tenga un margin botón de un reno nada más Ahora sí vamos a irnos con contenido opción spam es decir los elementos que están adentro de este contenedor le decimos que tenga un color que sea bueno el mismo denante 777 luego va a tener un background color o sea un color de fondo blanco y tenemos que ponerle también un padding Entonces le ponemos aquí punto 7 Ren y 3D muy bien un tamaño de letras de 1.4 Ren me aparece acertado también un texto un borde radios de dos rengn Y por último el cursor Pointer revisamos excelente tenemos que hacerle lo que es también el hover Así que le ponemos spam hover el patrón color que sea color y el color que sea blanco simplemente estamos intercambiando los colores de arriba no es así y ya también tenemos que ponerle lo que es bueno en la clase activa no le ponemos contener options spam punto aquí aquí lo que estoy haciendo es concatenando el spam con el arte esta parte es bastante importante porque no es lo mismo que Ustedes pongan por ejemplo aquí en el spam pongan ustedes un espacio Esto no es lo mismo a que esté Unido Ok como pueden darse cuenta aquí ya les muestra o les ilustra para que se entienda que simplemente está el elemento contiene options luego está el spam y luego trata el punto active como si fuera un hijo Ok pero en realidad ese punto active no es ningún hijo que está dentro del spam en realidad es ese active es el spam mismo Ok entonces cómo hago para decirle que el active representa el mismo spam simplemente debemos dejarlo Unido o concatenado de esta manera ahora sí para que todo esto funcione debe estar contener options adentro debe haber un spam que tenga la clase active Sí todo lo que yo escriba aquí adentro Solamente le va a afectar al elemento que tenga la clase active Espero que se haya entendido esta parte y aquí simplemente voy a copiar esto y lo voy a pegar lo que es exactamente lo mismo excelente revisamos y ya está funcionando perfectamente Ahora sí vamos al contenedor de los productos y a la tarjeta de producto en sí aquí simplemente va a ser un pequeño comentario para decirle productos Sí así está bien productos y vamos a empezar punto container productos va a ser un display grid voy a utilizar un disco luego voy a utilizar lo que es el template y aquí voy a usar algo no tan básico de lo que es el grip Entonces si ustedes no conocen mucho acerca de lo que es grid o realmente están viendo lo básico tal vez aquí se puedan confundir y les aconsejo que vean primero un tutorial antes de seguir esta parte porque sí que es cierto que se pueden perder Aquí voy a utilizar el repeat completamente normal hasta ahora lo que hemos utilizado pero ahora yo no voy a poner un valor fijo que vendría a ser cuatro o cinco o seis columnas si no vendría a ser algo que se llama de esta manera Ok eso es lo que hace es básicamente que encaja sí pero yo aquí antes de esto yo debo pasarle bueno la dimensión de lo que es mi elemento Ok es decir si en vez de auto fit yo pusiera 4 le pusiera un FR es decir que ese contenedor va a tener cuatro elementos adentro o bueno cuatro columnas que esa es la palabra correcta pero en este caso le voy a utilizar el mini Max que es digamos una función de css bastante útil que va a permitir calcular el mínimo y el máximo en este caso le vamos a poner el mínimo 20 rent y Por así decirlo el máximo que va a ser un FR o una fracción esto más que nada sirve para utilizar el responsive OK Así que vamos a darle inspeccionar y vamos cambiando un poco la dimensión para que pueda apreciarse en este caso no se aprecia más que nada es porque solo tengo un producto pero si tuviera por ejemplo dos tres cuatro aquí ya se pudiera ver cómo va saltando ya por último le va a dar una separación de tres reinos nada más vamos a hacer aquí abajo Vamos a ponerle lo que es Card product y vamos a decirle que tenga un tamaño Bueno un color de fondo blanco va a tener un padding de dos rent arriba y abajo y tres izquierda derecha va a tener un borde radios de 5 red y también va a tener un cursor Pointer vamos a ver Okay obviamente esto sale así porque nos hace falta Bueno más nos hace falta lo que es más más productos así que ha llegado el momento de duplicar esto para que no se pierdan ustedes pueden también hacer esto aquí vienen aquí a la flechita aplasta y comprime esto simplemente lo comprime y así Bueno pues es más fácil no copiar lo pegan aquí acá ponen un comentario vacío o ponen producto 3 comentario vacío y producto 4 bien revisamos y ya tenemos Por así decirlo los cuatro los cuatro elementos algo adicional que me faltó en el Card product también es una sombra Así que le vamos a poner aquí un pack Box Shadow Box Shadow que va a ser de bueno 0 0.2 vendría a ser dos píxeles podemos ponerle simplemente aquí dos píxeles realmente no importa mucho Y por último le ponemos un rgba le ponemos 0 0 Y por último la opacidad que en este caso la opacidad va a ser de 0.1 OK ahora lo que vamos a estar haciendo es trabajar sobre la imagen entonces la imagen está dentro de un contenedor que se llama bueno que tiene la clase container img entonces ponemos container img y a este container img que representa lo que es el elemento el dip que contiene la imagen y otras cosas más le vamos a decir que sea el position relative o sea el padre porque luego vamos a estar utilizando el posición Absolut para ciertas cosas entonces lo dejamos así luego vamos a decirle container img img Ok simplemente decimos que tenga el ancho del 100% O sea que no se sobresalga lo revisamos y listo la imagen ya se adaptó completamente a lo que es esta tarjeta de producto Ok aquí me estoy dando cuenta que tiene bastante bueno tiene un borde radio es bastante pronunciado ya lo voy a revisar venimos a cargar product aquí por de radio sin corriente Ah claro por supuesto aquí es punto 5 Rem es decir 0.5 Ren o 5 píxeles y ahora sí está correcto muy bien Ahora lo que vamos a modificar es el contenido ponemos content cada producto así se llama la clase del contenido le decimos que tenga un display grid y también le decimos que tenga un grit template columns Así que podemos poner una un FR espacio un FR luego también le vamos a decir que tenga filas definidas en este caso van a ser cuatro filas le ponemos grip template Rose va a ser repeat en este caso va a ser un número fijo que son cuatro filas pero el tamaño de la fila se va a adaptar al contenido mínimo y para eso le ponemos minconteng de esa manera muy bien Ahora ocupo también lo que es una separación pero no me interesa la separación de columnas y filas simplemente la separación de filas y para eso utilizamos el Gap unren excelente vamos a revisar vamos a también ponerle el justify items Center luego vamos a decirle que las estrellas Bueno aquí de hecho está así las estrellas van a estar en la posición de la fila en la de la fila 1 a la fila 2 Ok de esta manera y en la columna va a estar de la columna 1 Slash menos 1 que eso significa hasta el final ok y como pueden ver la estrella ya ocupan todo bueno todo el ancho y está en la primera fila Ok por otro lado también tenemos lo que es el h3 le ponemos content product que es el h3 es el título del producto o el nombre del producto le vamos a decir que esté en la segunda fila dos tercios así o dos sobre tres y de la misma manera le decimos que la columna sea de la columna 1 hasta el final Como está acá arriba revisamos y Perfecto entonces como pueden darse cuenta ya aquí ya hemos abarcado esta parte algo más también vamos a modificar las estrellas Así que ponemos aquí punto Stars o sea los iconos Stars y muy bien el tamaño va a ser de 1.3 RM y el color va a ser bueno primary color primario excelente el título también va a tener una pequeña modificación del bueno de 400 y un tamaño de letra que sea 1.6 de un rent también por último también va a tener un curso Pointer porque también va a simular un enlace entonces también podemos de hecho hacerle un efecto de joven content product h3 dos puntos cover y simplemente le vamos a cambiar el color No necesitamos nada más color que sea color primario y listo siguiendo vamos a revisar bien esta parte ya va quedando tenemos que ahora trabajar sobre lo que es el icono de Añadir al carrito y también el precio Así que vamos a seguir ponemos a Card que esa es la clase del contenedor del contenedor del icono de Añadir al carrito y Aquí vamos a decirle primero que tenga un Border de dos de dos píxeles solid Prime luego va a tener un patín de un rent y le vamos a poner y yo estoy content Center también esto es para centrar el icono porque estamos haciendo esto para centrar el icono muy bien ahora acá arriba Vamos a ponerle abajo del pie le ponemos borderradios 50% para que sea redondo el cursor Pointer y le vamos a poner una transición esa transición se la ponemos aquí porque le vamos a dar le vamos a Añadir de hecho un color de fondo cada vez que hagamos joven Entonces le ponemos aquí al punto 4 segundos y decimos que tenga entonces guardamos revisamos acá y ya ya lo tenemos ahí perfecto pero adicionalmente vamos a hacer la parte de cover como les dije apcar dos puntos cover va a haber un color eso sería todo por esa parte y vamos a hacer un poco más grande ese icono porque está muy pequeño Así que lo hacemos así con seis de 1.5 Ren y también me interesa que sea de color primario el icono excelente Entonces ya ya se va viendo Ok pero cada vez que hagan jóvenes como tiene el mismo color va a desaparecer el icono verdad Entonces me interesa que el icono sea de color blanco cada vez que haga hover sobre el dip con la clase add Card Así que acá abajo Vamos a ponerle a Card cover y le añado la y simplemente le cambio de color a blanco excelente Ahora sí revisamos Y como pueden darse cuenta cambia de color a blanco el icono también vamos a modificar ahora la parte de el precio tenemos acá y ponemos punto price Bueno de hecho podemos ponemos content punto Price separado no porque price está dentro de esa clase content muy bien entonces aquí vamos a decirle que tenga un fonside de 1.7 Ren y también va a tener un foam wade de 600 muy bien Ahora ese punto price también tiene un spam adentro que simula el precio normal Entonces vamos a modificarlo le decimos content y adentro de punto price le decimos spam este de aquí va a ser un tamaño de letra mucho más pequeño de 1.5 también va a tener un White menor que es de 400 y el texto collection la intro para que esté tachado el color también va a ser un gris claro que es 777 y le vamos a dar una separación a la izquierda de 0.5 muy bien Entonces vamos a revisar y perfecto sin embargo como pueden darse cuenta aquí no está bueno no está centrado debería ir al límite que es acá junto con estos iconos acá arriba Entonces para poder modificar esa parte vamos a hacer lo siguiente aquí en aquí acá arriba en el punto price primeramente le vamos a decir que tenga un justify self end O sea al final justifie lo que hace es alinear solamente este elemento Ok solamente estoy alineando este elemento y lo estoy alineando al Por así decirlo al final por eso pongo el end pero de forma horizontal por supuesto ahora si yo quiero centrarlo verticalmente lo que voy a utilizar es Alain Center otra cosa que les dije fue el At Card que no estaba alineado horizontalmente a la izquierda o al inicio entonces para poder hacer eso venimos acá a esta clase add Card y acá arriba del todo ponemos lo que es justify y ahora sí vamos a revisar excelente ya va al límite Y ese también también ya está centrado verticalmente ahora sí vamos a estar haciendo la última parte que la última parte de este producto que vendría a ser tanto el precio descontó que vendría a ser tanto el número de descuento como estos iconos de acá de vista previa y de favoritos entonces para hacer eso vamos a regresar acá arriba Vamos a estar haciendo esta parte justo debajo del contenido mg por la sencilla razón de que todos estos elementos están dentro del container img por lo tanto voy a hacer aquí muy bien entonces lo que vamos a poner primeramente container img punto discont que es exactamente para descuento le ponemos posición absoluto le decimos que a la izquierda va a estar que va a estar a la izquierda del todo con el led Zero y vamos a decirle que tenga un patrón color del primary color y el color de letra va a ser blanco va a tener un padding súper pequeño de dos píxeles arriba y abajo y 1.2 Rent a la izquierda derecha luego lo que le estoy añadiendo es un borde radios de un rent y ya para finalizar le pongo el fonside de 1.2 ram excelente esa sería la parte del descuento ahora cada vez que yo le dejo ver a todo a toda la tarjeta de producto este Discount va a volverse de color negro el color de fondo por lo tanto para hacer eso vamos a ponerle aquí punto Card product dos puntos joven y le podemos poner punto disco directamente que sea bueno el color de fondo negro y el color ya está en blanco así que vamos a ver si funciona y bueno efectivamente funciona Entonces está correcto bien Ahora la otra parte que tenemos que hacer es el Button Group o sea los iconos también lo vamos a hacer aquí aquí abajito vamos a poner punto Button Group vamos a utilizar primeramente Y por último también le vamos a poner en posición absoluta va a estar ubicado el top de 0% va a estar ubicado bueno arriba del todo top 0 y obviamente a la derecha wright Debería ser cero pero le vamos a dar por ejemplo -3 rent si yo guardo esto y lo muestro ahorita mismo se van a dar cuenta que ya está casi saliéndose del elemento y es que me interesa eso me interesa que estén ocultos Al principio para luego cuando yo haga hover ahí si lo muestre OK Por eso yo le pongo el wright menos tres o sea negativo para que lo mueva más allá o lo más posible que se pueda sacarlo del contenedor y que no se vea Así que Y por último también le voy a poner el zinds menos 1 si hacemos eso desaparecen Por qué Porque se está lo que le estoy diciendo al poner los números negativos lo que yo le estoy diciendo es que van a irse al fondo al fondo de todo es decir cualquier elemento que esté encima de ellos se va a superponer porque de por sí todos los elementos tienen un Zeta Y si le pones menos uno un número negativo van a decirle Bueno un elemento va a estar al fondo de todos los elementos Vale entonces eso es lo que estoy necesitando en este momento y cada vez que yo le dejo ver le voy a poner un Zeta Index pues mayor que me permita pues obviamente mostrarlo sobre la tarjeta del producto ya para finalizar en este en esta clase le va a poner lo que es una transición que he hecho es la misma que puse hace un momento al punto cuatro segundos dice perfecto ahora vamos a ponerle punto Button Group el spam cada spam el spam vamos a decirle que tenga un Border de un Pixel solid y el color que sea bueno el primario luego también va a tener un padding de casi un Rem casi porque va a ser de 0.8 Rem y luego va a tener un display Flex Center simplemente para centrar lo que está dentro del spa estoy aquí ya lo hice hace un momento Entonces no es nada nuevo pueden copiar y pegar de hecho los mismos estilos porque es exactamente lo mismo muy bien ahora cada vez que yo le dejo ver a este spam va a cambiar el color de fondo OK Así que pongo aquí botón Group spam Over dón color primario color muy bien entonces venimos aquí Ah claro que todavía no lo estoy mostrando todavía Entonces vamos a hacer esa parte vamos a decirle aquí punto car product cada vez que yo le dé hover sobre sobre Buscar product entonces punto Button Group va a tener primero settimeds de cero y vamos a ponerle right menos un rent vamos a revisar hacemos hover y ya sale ok y no sale de una manera brusca sino que va saliendo de forma buena con la transición que he hecho desde punto 4 segundos o sea de 0.4 y ahora si yo le doy hover aquí por ejemplo Le cambia el color de fondo excelente ahora otra cosa vamos a modificar los iconos entonces antes de de esta parte de Aquí vamos a poner punto Button Group spam y Pon size de 1.5 Ren para hacerlo más grande y también el color que va a ser premarico color ok pero claro que este de aquí ya vimos que tiene un problema porque al hacer hover sobre cada icono se va bueno va a desaparecer por lo tanto pongamos punto botón Group spam over y le cambiamos de color a blanco vamos a ver ahora sí excelente como pueden ver si funciona todo perfectamente entonces bueno esta parte de aquí hay un pequeño error que es el icono que nos está mostrando pero vamos a buscar el icono que que puse realmente este de aquí ya sé porque no sale el icono y es porque Bueno al poner compare exactamente escogimos este de aquí pero este de aquí es un icono es un icono Pro por lo tanto este icono no iba a funcionar siempre al usar los iconos en fogón asegúrense de bueno clickear esta parte que dice free para filtrar todos Ok esto de aquí bueno va a facilitar todo porque Obviamente si ustedes ven un icono y les gusta mucho pero luego se dan cuenta que es un Pro Pues bueno Ahí va a tener que reemplazar Obviamente todos los iconos y a veces no no es tan agradable esa parte entonces pongan free o sea todo lo que es gratis y luego pues ya ven las opciones en este caso en lo que nos muestra es este de aquí copiamos y lo venimos acá al Index html exactamente esta parte y lo vamos a pegar aquí Muy bien Entonces ahora sí estaría funcionando lo que es el icono y listo Bueno claro que en este caso como duplicamos todo tenemos que arreglar eso y exactamente todos los contenedores que en este caso son cuatro entonces venimos aquí buscamos todo vamos a estar reemplazando todos estoy aquí también y el último el último es este Muy bien Entonces ahora sí vamos a revisar y ya está todo bien el último que vamos a hacer es ya modificar la parte de html para reemplazar todo Lo repetido entonces venimos acá el producto 1 ya está vamos a ir a producto 2 primeramente el producto 2 va bueno va a cambiar aquí va a ser café inglés jpg la imagen Es lo único que va a cambiar en lo que es la ruta no la ruta de la imagen aquí luego en el descuento va a ser menos 22% y [Música] acá en la calificación en las estrellitas le vamos a quitar una completa y le vamos a Añadir una vacía de esta manera como lo acabo de hacer también en el título en el h3 le vamos a cambiar el café Iris por el café inglés Y por último Obviamente el precio el precio va a ser descontado 5.70 y el original el normal va a ser 7.30 perfecto ahora en el producto 3 va a ser café australiano por lo tanto también en la ruta de la imagen póngale australiano y Bueno aquí al menos en el alt también pueden cambiarle poner a australiano muy bien ahora este de aquí no va a tener ningún descuento entonces borren este pan porque no nos va a servir ya que no tendrá descuento listo en la calificación en lo que es la calificación este de aquí va a tener cinco estrellas entonces van a borrar la vacía y van a duplicar una de las hienas aquí le van a cambiar el título le vamos a poner café australiano listo y al menos en lo que es el precio no va a tener este spam entonces tienen que borrar este spam le cambian el precio a 3.20 que es el precio normal sin descuento y ya para finalizar la el cuarto producto va a ser van a reemplazar el Iris por el lado el lado y aquí también le cambia muy bien ahora al menos acá va a tener tampoco va a tener ningún descuento entonces borren el spam y la calificación va a seguir siendo la misma 4 de 5 en el título van a cambiarle aquí le vamos a poner café helado muy bien y van a borrar este porque no tiene descuento y el precio normal es de 5.60 excelente vamos a revisar bien entonces genial ya nos estamos acercando la última parte de la página