No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Página de inicio: CSS

12/22
Recursos

Aportes 65

Preguntas 18

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

🟢 => Aquí es donde podemos sacar provecho de las Variables CSS al almacenar el tamaño fijo de las cards en su contenedor padre, utilizarla en cada propiedad donde se requiera y solo cambiar el valor de esta variable en Responsive.

Realizado!! Lo hice para mi futura venta de bonsai!!

![](

Pueden duplicar texto rápidamente en vscode de la siguiente manera 👉 Seleccionan un texto, mantienen ALT + SHIFT y presionan la flecha de abajo o de arriba dependiendo a dónde quieren que se diriga la copia del texto selecionado 👍 yyy si mantienen presionada esa flecha, se duplicará muchas veces hasta que suelte la flecha 👌

Hay que tener mucho cuidado con el grid-template-columns, yo había puesto "repeat (auto… " con ese espacio entre el repeat y el paréntesis y no me funcionaba. Me costó mucho ver el error pero al final di con él. Así que ya saben… si no lo ponen de esa manera, aunque sea un simple espacio ya no les leerá la propiedad correctamente!

Le agregué lo visual al agregar y quitar el producto con JavaScript


HTML

        <div class="card">
          <figure class="card__image-container">
            <img
              src="./images/chopper-figure.png"
              alt="Chopper's toy"
              class="card__image"
            />
            <div class="center-text hidden">Removed from cart</div>
          </figure>
          <div class="card__additional">
            <div class="card__info">
              <span class="card__price">$ 120,00</span
              ><span class="card__name">Chopper's toy</span>
            </div>
            <img
              src="./images/bt_add_to_cart.svg"
              alt="Shop icon"
              class="card__shopping-icon"
            />
          </div>
        </div>

CSS

:root {
  --very-large: 2rem;
  --large: 1.9rem;
  --medium: 1.7rem;
  --short: 1.6rem;
  --very-short: 1.4rem;
}


.center-text {
  display: inline-block;
  width: calc(var(--card-size) - 30px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 16px;
  border-radius: 10px;
  background: rgba(255, 237, 237, 0.794);
  color: var(--dark);
  font-size: var(--short);
  font-weight: bold;
  text-align: center;
}
.hidden {
  display: none;
}
.card__shopping-icon {
  width: 32px;
  height: 32px;
}

@media screen and (min-width: 600px) {
  .card__shopping-icon {
    width: 40px;
    height: 40px;
  }
  .center-text {
    padding: 4px 36px;
    font-size: var(--very-large);
  }
}

JS

let data = document.querySelectorAll(".card");
data = Array.from(data);
data.forEach(e => {
  e.addEventListener("click", changeShoppingStatus);
});

function changeShoppingStatus() {
  console.log(this);
  let removedText = this.querySelector(".card__image-container .center-text");
  let iconImage = this.querySelector(".card__additional img");
  imageSrc = iconImage.getAttribute("src");
  console.log(removedText);
  console.log(imageSrc);
  if (imageSrc !== "./images/bt_added_to_cart.svg") {
    iconImage.setAttribute("src", "./images/bt_added_to_cart.svg");
    removedText.classList.add("hidden");
  } else {
    iconImage.setAttribute("src", "./images/bt_add_to_cart.svg");
    removedText.classList.remove("hidden");
  }
}

Ya voy a empezar a vender mis productos

**Mis apuntes **
A lo mejor te sirven 😄
Nota: Con Flexbox se realiza la separación y organización de los precios nombres y logos de los productos

  • auto-fill: Para este ejercicio llena de columnas suficientes, es decir adecuara las columnas necesarias, ya que se manejaran en varios dispositivos acompañado de un tamaño el cual será de 240px por tarjeta.
  • object-fit: cover; Al tener la imagen contraída, esta propiedad sirve para tener la imagen con un tamaño tal cual es sin importar su width y height que hemos puesto, es decir no se modificara.
  • gap: Propiedad que permite separar u obtener un espacio entre cada imagen de los productos
  • place-content: center; Alinear todo el grid, es decir permite alinear nuestra container “principal” respecto a la pantalla

me gusto como quedo :3

Este es el resultado del proyecto con las herramientas que aprendimos en la Escuela de Desarrollo Web.
Les dejo el repositorio para que vean la disposición de los archivos y el codigo.
Repo: Yard Sale
Pug

Sass

Mobile

Os recomiendo usar la extensión de Visual Studio Code llamada LIVE SERVER , lo que hace es que cada vez que le deis a guardar código ( ctrl + s ) refresca la pagina abierta y así veis las modificaciones en directo 😄

Este es un ejemplo agregue una pseudo-clase aprendida en el curso anterior haciendo el efecto que cuando el cursor este en la imagen se expanda un poca mas y genere un box shadow también con el icono de agregar al carrito

😃

Faltó estilizar el box shadow del ícono del card:


:root {
 /* Box shadow */
  --boxShadowDark: 0px 1px 14px -5px rgba(35,40,48,0.35);
}
.product-card__cart-icon-container {
      margin: 0;
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 50%;
      -webkit-box-shadow: var(--boxShadowDark);
      -moz-box-shadow: var(--boxShadowDark);
      box-shadow: var(--boxShadowDark);
    }

Estoy demasiado confundido, trato de aplicar todo pero siento que se hizo un desorden innecesario, tener en el mismo archivo el html y el style me está matando, el grid-template-columns simplemente no funciona, tengo todo en una sola columna y el @media tampoco hace efecto. Al haber hecho 15 copias, luego borrarlas y luego volver a realizar las 15 copias debí haber dañado algo en el código.

Tip de VS Code!
Para no tener que borrar todo el código y luego volver a pegar, como hizo la profe en el minuto 7:20, existe otra solución…

  1. Presionar Control + F
  1. ** Desplegar buscador**
  1. Copiar y pegar códigos
  1. Reemplazar

PD: Se reemplaza todo el código que sea igual en TODO EL ARCHIVO.

Para estos casos es increíble usar CSS Grid. No lo conocía, espero terminar la Escuela para pasarme a ver ese curso y profundizar en esta tecnología.

Éxitos a todos

Acá el código de la clase

HTML

<main>
        <section class="main-container">
            <div class="cards-container">
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
                <div class="product-card">
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                    <div class="product-info">
                        <div>
                            <p>$120,00</p>
                            <p>Bike</p>
                        </div>
                        <figure>
                            <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="">
                        </figure>
                    </div>
                </div>
            </div>
        </section>
    </main>

CSS

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill,240px);
    gap: 25px;
    place-content: center;
}

.product-card {
    width: 240px;
}

.product-card img {
    width: 240px;
    height: 240px;
    border-radius: 20px;
    object-fit: cover;
}

.product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.product-info div p:nth-child(1) {
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 4px 0;
}

.product-info div p:nth-child(2) {
    font-size: 12px;
    color: var(--very-light-pink);
}

.product-info figure {
    margin: 0;
}

.product-info figure img {
    width: 40px;
    height: 40px;
} 

@media (max-width: 640px) {
    .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fill,140px);
    }

    .product-card {
        width: 140px;
    
    }

    .product-card img {
        width: 100%;
        height: 140px;
    }
}

Una forma de evitar tener que quitar el margen a cada elemento que necesitemos podemos simplemente quitarle los márgenes a todos los elementos que lo traen por defecto y así tener un mejor flujo de trabajo.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Literalmente adelantándome agregando margins que no surtían efecto y ¡chus! un gap de 26px.

Necesito la clase de grid :v

No dudo que la profesora tenga un buen conocimiento sobre desarrollo frontend, sin embargo, tiene muy malas prácticas.

Quiero pensar que es porque este es un curso muy básico, y como se mencionó, se reutilizará este código en otro curso “avanzado”, pero creo que es mejor aplicar buenas prácticas desde niveles básicos para ir acostumbrando a los estudiantes.

Yo lo hice con un poco de javascript para cargar los productos dinámicamente :3

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&display=swap" rel="stylesheet">
    <title>Yard sale home</title>
    <style>
        :root{
            --white:#f7f7f7;
            --black: #333;
            --very-light-pink: #c7c7c7;
            --hostital-green: #acd9b2;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
            --xl: 24px;
            --text-input-field: #f0efef;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Quicksand', sans-serif;
        }

        .main-container {
            margin: 30px;
            display: grid;
            grid-template-columns: repeat(auto-fill, 240px);
            gap: 26px;
            place-content: center;
        }

        .product-card {
            width: 240px;
        }

        .product-card img {
            width: 240px;
            height: 180px;
            border-radius: 20px;
            object-fit: cover;
        }

        .product-card div img {
            width: 35px;
            height: 35px;
        }

        .product-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .product-card div figcaption {
            font-size: var(--sm);
            color: var(--very-light-pink);
            text-align: center;
        }

        .product-card div p {
            font-size: var(--md);
            color: var(--black);
            font-weight: bold;
            text-align: center;
        }

        @media only screen and (max-width: 640px) {
            .main-container {
                display: grid;
                grid-template-columns: repeat(auto-fill, 140px);
                margin: 10px;
                gap: 26px;
            }

            .product-card {
                width: 140px;
            }

            .product-card img {
                width: 140px;
                height: 100px;
                border-radius: 20px;
                object-fit: cover;
            }

            .product-card div figcaption {
            font-size: 7;
        }

        .product-card div p {
            font-size: 8;
        }
        }
    </style>
</head>
<body>
    <section class="main-container">

        <template id="card-container">
            <figure class="product-card">
                <img src="" alt="" class="product-img">
                <div class="product-info">
                    <p></p>
                    <figcaption></figcaption>
                    <img src="./icons/bt_add_to_cart.svg" alt="carrito" class="carrito">
                </div>
            </figure>
        </template>

    </section>
    <script type="text/javascript">

        /*capturamos elementos del DOM*/
        const tarjeta = document.querySelector('.main-container');
        const template = document.getElementById('card-container').content;
        const fragment = document.createDocumentFragment();

        /*muchos objetos*/
        const arreglo = [
            {
                img: 'https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Camara profesional',
                precio: '$100'
            },
            {
                img: 'https://images.pexels.com/photos/2533266/pexels-photo-2533266.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Maquillaje para dama',
                precio: '$20'
            },
            {
                img: 'https://images.pexels.com/photos/248412/pexels-photo-248412.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Lechita pa tu boca',
                precio: '$10'
            },
            {
                img: 'https://images.pexels.com/photos/1279107/pexels-photo-1279107.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Cosa que te espia',
                precio: '$100'
            },
            {
                img: 'https://images.pexels.com/photos/4158/apple-iphone-smartphone-desk.jpg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Productos apple  variados',
                precio: '$5500'
            },
            {
                img: 'https://images.pexels.com/photos/2783873/pexels-photo-2783873.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Relog michael kors',
                precio: '$1000'
            },
            {
                img: 'https://images.pexels.com/photos/913135/pexels-photo-913135.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Cupcake 💖',
                precio: '$10'
            },
            {
                img: 'https://images.pexels.com/photos/1267338/pexels-photo-1267338.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Se vende hombre trabajador',
                precio: '$100'
            },
            {
                img: 'https://images.pexels.com/photos/376464/pexels-photo-376464.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Pankaques 💜💥',
                precio: '$8'
            },
            {
                img: 'https://images.pexels.com/photos/3338681/pexels-photo-3338681.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
                text: 'Donitas uwu',
                precio: '$1 la unidad'
            },
            {
                img: 'https://images.pexels.com/photos/3587478/pexels-photo-3587478.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
                text: 'Se venden audifonos y micro re piolas',
                precio: '$250'
            },
            {
                img: 'https://images.pexels.com/photos/3587478/pexels-photo-3587478.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
                text: 'Vendemos servicio de produccion audiovisual',
                precio: '$250 por sesión'
            },
        ];

        /*manipulamos las cards*/
        arreglo.forEach( obj => {
            template.querySelector('img').setAttribute('src',obj.img);
            template.querySelector('img').setAttribute('alt',obj.text);
            template.querySelector('figcaption').textContent = obj.text;
            template.querySelector('p').textContent = obj.precio;

            let clon = document.importNode(template,true);
            fragment.appendChild(clon)
        });

        tarjeta.appendChild(fragment)
    </script>
</body>
</html>

Estos son mis apuntes de esta clase:
.cards-container
display:grid;
grid-template-columns: repeat (auto -fill, 240px);
//Para formar las columnas de las cards
gap:26px; //para espaciarlo
place-content: center; //para que todo se centre.
object-fit: cover; //sirve para colocar la imagen sin modificiar archivos de la imagen.
justify-content: space-between;// para que este cada contenido dentro del contenido principal, uno al lado del otro.
responsive @media(max-width: 640px) - Aquí le cambias el tamaño de los contenedores de productos y recuerda que esta parte del codigo sirve para tener otra imagen en mobile, desde 0-640px.
Y para estilizar los textos o parrafo de cada producto puedes utilizar “nth-child()”.

Yo pensaba que sabía maquetar a un nivel al menos decente hasta que vi esta clase; ahora me doy cuenta de que hacía muchos pasos innecesarios, simplemente wow

Me pareció interesante agregar

.product-info figure img {
cursor: pointer;
}

![](

Agrego mi idea completa de esta clase:

Les comparto mi resultado de cupcakes

Lo que yo hice fue usar propiedades de hijos directos para así evitarme usar tantas clases y estilos.

  .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
  }
  .product-card {
    width: 240px;
  }
  .product-card > img {
    width: 100%;
    border-radius: 20px;
  }
  .product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

![](

object-ffit:cover = que la imagen sea igual segun el tamaño

Cambie un poco los estilos de la card, me que do asi:

Comparto mis resultados:

Mi ejemplo 😄

Mi código por si a alguien le puede ayudar:

:root{
    --very-light-pink:#C7C7C7;
    --white:#FFFFFF;
    --text-input-field:#F7F7F7;
    --black:#000000;
    --hospital-green:#ACD9B2;
    --dark:#232830;

    --sm:14px;
    --md:16px;
    --lg:18px;

    --size-card:240px;
    --size-icon:32px;
    --size-scard:140px;
}

.cards-container{
    display:grid;
    grid-template-columns:repeat(auto-fill,var(--size-card));
    gap:26px;
    place-content: center;
}
.product-card{
    width: var(--size-card);
}
.product-card img{
    width: var(--size-card);
    height: var(--size-card);
    border-radius: 20px;
    object-fit: cover;
}
.product-info{
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-top: 16px;
}
.product-info figure{
    margin: 0;
}
.product-info figure img{
    width: var(--size-icon);
    height: var(--size-icon);
}
.product-info div p:nth-child(1){
    font-weight: bold;
    font-size: var(--md);
    margin: 0px 0px 4px 0px;
}
.product-info div p:nth-child(2){
    font-size: var(--sm);
    margin: 0px;
}
@media (max-width:640px){
    .cards-container{
        grid-template-columns: repeat(auto-fill,var(--size-scard));
    }
    .product-card{
        width: var(--size-scard);
    }
    .product-card img{
        width: var(--size-scard);
        height: var(--size-scard);
    }
}

Al momento de estilizar la imagen se puede evitar estilizar el icono utilizando los selectores combinadores de hijo directo, sería tal que así:
.product-card > img
{

}

Uso de object-fit para que la imagen se ajuste con su relación de aspecto 8dimensionado original) sin importar el tamaño del contenedor de la misma

Propiedad auto-fill, se usa para el display:grid, con el fin de definir las columnas de forma automática dentro de un contenedor, y estas columnas se colocan en función del tamaño de la columna (width: 240px para el ejemplo)

Propiedad auto-fiil de display: grid para setear de forma automática la cantidad de columnas a mostrar en el contenedor de la pantalla

cuando usa el

.product-info div p:nth-child(1)

quiere decir el primer P (parrafo) que este dentro de DIV que este dentro de product-info va a tener las clases establecidas en el css, es muy importante lograr entender esa pseudoclase

Así vamos

Este es mi código para que los cuadros de las imagenes sean responsive y se adapten a cualquier resolución y/o cuadricula

<div class="product-card">
                <div class="product-img">
                    <div>
                        <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Producto" />
                    </div>
                </div>
                <div class="product-info">
                    <div>
                        <span class="product-price">$120,00</span>
                        <span class="product-name">Round shelf</span>
                    </div>
                    <div class="button-add-cart">
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="Add to cart" class="add-cart-icon">
                    </div>
                </div>
            </div>
.product-img{
            position: relative;
        }
        .product-img:after {
            content: "";
            display: block;
            padding-bottom: 100%;
        }
        .product-img > div{
            position: absolute;
            border-radius: var(--radius-md);
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        .product-img > div img{
            width: 100%;
            height: 100%;
            object-fit:cover;
        }

Para que su pagina sea responsive sin la necesidad de usar media querys utilicen estas dos líneas en el contenedor principal o padre y todo el contenido se ira ajustando automáticamente al tamaño de la pantalla, es una de las magias de grid (en los elementos deben tener medidas relativas también para que funcione).

display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

grid-template-columns: repeat(auto-fill, 140px); /* el primer elemento es la cantidad de columnas, el segundo elemento el tamaño de cada columna*/

Hola a todos, en la parte donde la profesora borra los div de clases product-card para sustituirlos por el nuevo div, puedes hacer algo un poco mas rapido, primero debes de copiar la nueva estructura, luego debes seleccionar completo un div de la vieja estructura, dandole a ctrl+D el te elige el prox codigo que es identico al que seleccionastes, con esto puedes darle varias veces a ctrl+D hasta selecionar todos los div antiguos, y luego hacerle un ctrl+F, y lo reemplazas por la nueva estructura ya copiada.

Así va quedando el mío 😄

Hola chicxs
En esta parte también quiero comentarles otra forma corta de ajusta el precio, adjunto la captura. No ví necesario usar los nth-child, puede ajustar sin problemas usando margin: 0 y no se destruyó al hacerlo responsive.

![](

Así va quedando el mío

Solo vengo a decir que con gatitos queda hermoso.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>YardSale</title>
    <style>
    :root {
        --black:#000000;
        --white: #FFFFFF;
        --very-light-pink: #C7C7C7;
        --text-input-field: #F7F7F7;
        --dark: #232830;
        --hospital-green: #ACD9B2;
        --sm: 1.4rem;
        --md: 1.6rem;
        --lg: 1.8rem;
    }
    html {

        font-size: 62.5%;
    }
    body {

        margin: 0;
        font-family: 'Quicksand', sans-serif;
    }
    .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 240px);/*igual q decir 1fr 1fr) */
        gap: 26px;
        place-content: center; /* para alinear al centro /*/
    }
    .product-card {
        width: 240px;
    }
    .product-card img {
        width: 240px;
        height: 240px;
        border-radius: 20px;

        object-fit: cover; /*imagen se adecua al tamaño*/
    }
    .product-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.2rem;
    }
    .product-info  figure {
        margin:0;
    }
    
    .product-info  figure img{
        width: 35px;
        height: 35px;
    }
    .product-info  div p:nth-child(1){
        font-weight: bold;
        font-size: var(--md);

        margin-top: 0;
        margin-bottom: 0.4rem;
    }
    .product-info  div p:nth-child(2){
        color: var(--very-light-pink);
        font-size: var(--sm);

        margin-top: 0;
        margin-bottom: 0;
    }

    @media (max-width:640px) {
        .cards-container {
        grid-template-columns: repeat(auto-fill, 140px);
            }
        .product-card {
            width: 140px;
            }
        .product-card img {
            width: 140px;
            height: 140px;
            }
        .product-info  figure img{
        width: 30px;
        height: 30px;
            }
    }
    </style>
</head>
<body>
    <section class="main-container">
        <div class="cards-container">
            <div class="product-card">
                <img src="https://images.pexels.com/photos/209037/pexels-photo-209037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/127028/pexels-photo-127028.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
            <div class="product-card">
                <img src="https://images.pexels.com/photos/1056251/pexels-photo-1056251.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""/>
                <div class="product-info">
                    <div>
                        <p>$120,00</p>
                        <p>Cat</p>
                    </div>                
                    <figure>
                        <img src="./assets/icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>
    
</body>
</html>

Qué buenos trucos css, hay algunos que no sabía cómo aplicar… excelente!

Así va quedando:
Mobile:

Desktop

Creo que si le establecen un margin 0 también en la siguiente clase, el ícono se va a colocar mucho más centrado

      .product-info figure img {
        width: 35px;
        height: 35px;
        margin: 0;
      }

Mi resultado 😃

<style>
:root{/root es para guardar las variables en css/

   --white: #FFFFFF;
   --black: #000000;
   --dark: #232830;
   --very-light-pink: #C7C7C7;
   --text-input-field: #F7F7F7;
   --hospital-green: #ACD9B2;
   --sm:14px;
   --md:16px;
   --lg:18px;

}

body{
margin: 0;
font-family: ‘Quicksand’, sans-serif;
}

.card-container{
display: grid;
grid-template-columns: repeat(auto-fill,240px);/crea columnas,auto-fill: quiere decir que se va a
llenar automaticamente dependiendo de la cantidad q quepa
/
gap: 26px;/para popner espacios entre las targetas/
place-content: center;/centra todos los elementos en medio del contenedor/
}
.product-card{
width: 240px;

}

.product-card img{
width: 240px;
height: 240px;
border-radius: 20px;
object-fit: cover ;/sirve para que la imagen se acople al contenedor/

}
.product-info{
display:flex;
justify-content: space-between;/´para alinear uno al lado del otro y q quede un espacio en medio/
align-items: center;/para alinearlos de forma vertical/
margin-top: 12px;
}
.product-info figure {
margin: 0;
}
.product-info figure img{
width: 45px;
height: 45px;
}
.product-info div p:nth-child(1){
font-size: var(–md);
font-weight: bold;
margin-top: 0;
margin-bottom: 4px;
}
.product-info div p:nth-child(2){
font-size: var(–sm);
margin-top: 0;
margin-bottom: 0;
color: var(–very-light-pink);
}

@media(max-width:640px){
.card-container{

   grid-template-columns: repeat(auto-fill,240px);/*crea columnas,auto-fill: quiere decir que se va a 
   llenar automaticamente dependiendo de la cantidad q quepa*/
   } 
   .product-card{
width: 140px;

}

.product-card img{
width: 140px;
height: 140px;

}

}

</style>

La grilla si me reto por que pese a que estaba usando Grid, lo estaba escribiendo de manera incorrecta y hasta confundi temas jaja
Pero ya quedo 😎
🌐 Les comparto el código en GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Vista Desktop:


.

Vista Mobile:

El alcance de grid es sorpendentemente simple, más por el tema de que para emparejar las cards no es necesario responsive, me anima a entender más grid, siempre le he tenido miedo

.product-info div p:nth-child(1) se lee como:

.product-card > img

y se ahorran los problemas con el tamaño del icono de compra

Que tal campeon, Buen dia…

Mi resultado…

Desktop

Mobile

😱 En un curso de Diego De Granda nos mencionaron que el uso de gap todavía no se soporta por todos los navegadores, pueden checarlo en la página de can i use: https://caniuse.com/?search=gap
Yo les recomiendo utilizar un padding para el contenedor de cada producto 👍

Excelente no me sabía de como utilizar el place-content