Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar

para poder cambiar el color del svg de forma mas facil y desde el css pueden hacer lo sieguiente, en el body colocan

    svg path {
        stroke: currentColor;        
    }

y luego desde lo quieran cambiar solo deben colocar

svg {
	color: "$el color que quieran"
}

Trucos
.

• Si quieren hacer scroll horizontal en la pantalla Mobile deben agregar en los media queries esto:

								.card-section
                    width: 100%
                    display: grid
                    grid-auto-flow: column
                    overflow-x: scroll 
                    justify-content: initial
                    gap: 10px> 

• y si desean cambiar el color de la barra de navegación usen esto:

								.card-section::-webkit-scrollbar
                    height: 14px
                .card-section::-webkit-scrollbar-thumb
                    background-color: #FA9500
                    border-radius: 8px

La razón por la que el código no esta con {} y ; es por que use la extensión .sass pero de resto es igual, buena suerte platzinautas.
.
Y este es el resultado

Así me quedó para mobile 😸

Bastante desordenado todo , con las idas y venidas!!! no se logra entender bien

Bastante desordenadas estas clases 😒

No necesitan identar al mismo nivel en healtcare, pueden hacerlo así.

.furtniture{
        @extend .healthcare;
        .card-section{
            .product-card{
                background-color: $tertiary-color;
                color: $primary-color;
            }
        }
    }```

Para cambiar el color del svg, en el minuto 11:39 no funciona porque falta agregar la etiqueta path, es decir:

svg path{
stroke: “FFFFFF”
}

Y funciona

(min 19:55) Lo de la herencia de @extend es lo mismo que poner esto:

Formatear código

Para formatear el código de manera automatica solo debes presinar F1 y buscar Format Document, darle enter y listo. 🔥🙂

Esto debería haberlo hecho desde un principio. Trabajar de forma mas ordenada en la clase, hace que los usuarios no se pierdan en el código. (Sugerencia)

una locura esta clase

Hola, me podrian explicar por que no me fnciona el @extend, intente muchisimas cosas pero ninguna me funciono. Agradeceria si alguien me ayuda. Pense que es que era obligatorio que para que funcionara tenian que ser hijos de una clase en comun pero investigando vi que no era asi. Otra cosa que pense que era, era que tenian que ser hermanos de un elemento html pero tampoco.

(“C:\Users\josue\OneDrive\Imágenes\code.png”)

Waos, con el @extend se ahorro mucho tiempo

Lo que hice con grid (sufriendo xd):

.healthcare {
        padding-bottom: 72px;
        h2 {
            font-weight: 300;
        }
        .card-section {
            display: grid;
            grid-template-columns: repeat(3,minmax(100px,1fr));
            column-gap: 120px;
            row-gap: 72px;
            .product-card {
                display: grid;
                gap: 12px;
                padding: 20px 40px;
                border-radius: 8px;
                background-color: $secundary-color;
                button {
                    justify-self: end;
                    border: none;
                    background: none;
                    svg{
                        width: 36px;
                        height: 36px;
                        path{
                            stroke: $primary-text-color;
                       }
                    
                    }
                }
                .product-image{
                    width: 100%;
                    height: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                        object-position: center;
                        object-fit: cover;
                        border-radius: 6px;
                    }
                }
                
                p, h3{
                    margin: 0;
                }
            }
        }
        
    }
    .furniture{
        @extend .healthcare;
        .card-section{
            .product-card{
                background-color: $tertiary-color;
                color: white;
                button {
                    svg{
                        path{
                            stroke: white;
                       }
                    
                    }
                }
            }
        }
        
    }

No sé si sea por el curso en sí mismo. Leí que sass era como darle super poderes al css. Pero hasta ahora solo lo he sentido como css con pasos exrtra.

que chulada eso de @extend

uff me paso que al cambiar el nombre de la variable de $quaternion-color a $quaternary-color no se aplicó a todas las variables declaradas y eso hizo que el watch SASS detectara errores de compilación y no se aplicarán mis cambios hasta que corregí el error.

No sabía que, si había un error en los estilos, no se aplicaban.

Hola, me podrian explicar por que no me fnciona el @extend, intente muchisimas cosas pero ninguna me funciono. Agradeceria si alguien me ayuda. Pense que es que era obligatorio que para que funcionara tenian que ser hijos de una clase en comun pero investigando vi que no era asi. Otra cosa que pense que era, era que tenian que ser hermanos de un elemento html pero tampoco.

(url)

Hola, me podrian explicar por que no me fnciona el @extend, intente muchisimas cosas pero ninguna me funciono. Agradeceria si alguien me ayuda. Pense que es que era obligatorio que para que funcionara tenian que ser hijos de una clase en comun pero investigando vi que no era asi. Otra cosa que pense que era, era que tenian que ser hermanos de un elemento html pero tampoco.

(https://static.platzi.com/media/user_upload/code-d4ec86a5-b460-46a8-a215-1e7c4536d814.jpg)

Para cambiar una palabra en todo el archivo: Ctrl + F y le dan click en la felcha de la izquierda, lo que les permitirá reemplazar una o todas las palabras