Estilos CSS para Sección Principal en Figma y HTML

Así me está quedando
Mobile

Desktop

Supongo que ya muchos lo saben, pero por si a caso:

Asi podemos reiniciar el padding y margin de todos los elementos.

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

Yo lo hice con grid xd

main {
    color: $primary-text-color;
    padding: 0 64px;
    max-width: 100vw;
    article {
        display: grid;
        grid-template-columns: 50% auto;
        align-items: center;
        justify-content: space-between;
        width: auto;
        min-height: 80vh;
        h1 {
            font-size: 3em;
            margin-top: 0;
            font-weight: 700;
            line-height: 78px;
        }
        p {
            font-size: $paragraph-size;
            font-weight: 400;
            line-height: 32.5px;
        }
        button{
            background: none;
            border-style: none;
            font-weight: 700;
            font-size: 24px;
            padding: 20px;
            border-radius: 35px;
            color: $primary-color;
            background-color: $additional-color;
        }
        img{
            justify-self: end;
            width: 25vw; 
            object-fit: contain;
            border-radius: 20px;
        }
    }

Consejo
.
En la parte Mobile en los assets no encontré ninguno para el nav así que busque uno por internet en favicon pero el problema es que ese al igual que muchos iconos vienen en color negro y la solución que ayer fue modificar el color de la img para pasar de un color al otro

.
Los principales pasos que use para hacer el cambio fueron:
.

• Crear un div llamado icons-mobile que estuviera oculto y se mostrara cuando el tamaño de pantalla fuera el adecuado, ese div contenía la url para tener la img
  .
  Ya en sass agregue esto :

 .icons-mobile
       display: flex
       width: 32px
       height: 32px
       filter: grayscale(80%) invert(500%) sepia(90%) saturate(70041%) hue-rotate(330deg) brightness(50%) contrast(100%)

.
lo importante fue filter y mediante varios intentos logre encontrar un color parecido, espero que os sirva y este es el resultado.
.

Sorry, pero por más que estoy disfrutando el curso, no me gusta que hagan videos taaaan largos.

siento que en esta clase fuimos muy desordenados(cada quien trabaja como quiere, se entiende) pero mi punto de vista es que es mejor ir en orden y mas cuando se esta explicando ejemplo: main, h1, p, button y faltaron cosas por agregar ejm: (font-weight, line-weight), igual me esta gustando como explica la profe es muy detallada en todo y espero que en la siguiente clase se agregue o nos explique porque no se agrega.

Yo la verdad muy en lo persona no me esta gustando como están dando el curso perfecto se nota que sabe sobre la materia la profesora pero no lleva un orden y creo que todavía le falta conocer un poco mas sobre la plataforma VSC. Espero que en un futuro mejore pero por el momento creo que me esta costando algo acoplarme al curso. Mucho éxito.

Hola Chicos!
Todos los elementos en html por defecto traen un apdding, margin, dependiendo del agente (el explorador: chrome, edge, safari, firefox, etc) se les agrega mas o menos. Para reiniciar estos estilos, y poder manejarlos, esta tecnica es usada de manera profesional:
El selector universal (*) ->
*{
box-sizing:border-box;
padding:0;
margin:0;
}

el párrafo, que por alguna razón no lo tenía desde el principio.

<p>
                    Debido al impacto ambiental siendo las acciones <br>
                    humanas las que modifican el ambiente, Eco-store <br>
                    se compromete a elaborar sus productos de manera <br>
                    artesanal y con materiales que favorecen al cuidado <br>
                    del medio ambiente.
                </p>```

✨Aprovecha al máximo el espacio en tu VSC 🦄

Quitar scroll horizontal

Seguro ya notaste que es un poco molesto ese scroll horizontal cuando tu código se extiende demasiado.

¿Te gustaría tenerlo todo a la vista? Solo debes agregar tus preferencias en el archivo settings.json de vsc.

Abrir archivo settings.json

• Ctrl + , (coma)
• Open settings: Esquina derecha superior 📝
  • Icono hoja con esquina doblada y con flecha :v

{
    "editor.wordWrap": "on", //👈👀
}

Te dejo mis apuntes por si quieres ver más configuraciones Configura VSC más el tutorial de configuración de vsc.

Así se vería tu VSC si lo configuras para optimizar al máximo el espacio, esto sirve si tienes una compu muy pequeña.

Esa técnica de darle color de fondo al elemento, está buena para ubicar de una manera mas fácil los elementos.

Hola a todos:

Para que puedan cambiar los colores de los iconos realmente les recomiendo esta web. Solo tienen que poner el valor numerico del color que quieren y le saldra la linea de css filter que necesitan para cambiar de color el icono.
(https://codepen.io/sosuke/pen/Pjoqqp)

Genial!

.

Así va quedando (modo Dark)

Si el padding a los lados es igual pueden usar también:

padding: 0px 20px; // Aplica un padding superior e inferior de 0px y a los lados de 20px
ó
padding-inline: 20px // Aplica el padding unicamente a los lados, sin afectar el padding superior e inferior.

Nota:
padding-block se usa para aplicar el padding únicamente arriba y abajo sin afectar el padding de los lados.