Así me está quedando
Mobile
Desktop
Conociendo SASS
¿Qué es SASS y en qué se diferencia de otros preprocesadores?
¿Cómo funcionan los preprocesadores? Ventajas de utilizar uno
Instalación y configuración del entorno de trabajo
Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo
Reglas y uso
Estructura de la hoja de estilos y variables
Uso de selectores, scope de las variables y shadowing
Creando la estructura del proyecto
At Rules: CSS y nesting
Quiz: Reglas y uso
Expresiones
Expresiones: Literales y Operaciones
Quiz: Expresiones
Proyecto: sección main
Creando la estructura de la sección main
Quiz: Proyecto: sección main
Herencia en SASS
¿Qué es la herencia y cómo funciona en SASS?
Creando la estructura de la sección de Cuidado de la Salud y Decoración del Hogar
Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar
Quiz: Herencia en SASS
Mixins
¿Qué es un mixin en CSS?
Implementando mixins en el proyecto
Quiz: Mixins
Funciones
Creación de nuestras propias funciones
Proyecto
Creando la estructura de la sección '¿Por qué nosotros?'
Creando la estructura de la sección Galería de Estilos
Creando la estructura de la sección Mapa y Footer
Quiz: Proyecto
Deploy
Presentación de Github pages y deploy
Quiz: Deploy
Extras
Aprende a instalar y configurar Sass mediante Node.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Ana María Díaz Solorio
Aportes 27
Preguntas 4
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:
.
.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.
.
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.
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.
Sorry, pero por más que estoy disfrutando el curso, no me gusta que hagan videos taaaan largos.
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>```
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;
}
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.
Ctrl
+ ,
(coma){
"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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?