Sección "Por qué nosotros" con SASS y Flexbox
Contenido del curso
LUIS ANTONIO CALVO QUISPE
----- ----
Ulqernesh Karvenae
Gabriel Alfredo Linares
iecgerman .
Pablo Alejandro Figueroa
Brandon Cortes Rivera
iecgerman .
iecgerman .
Any Omaña
Diego Andrés Lopez Rodriguez
Diego Edilberto Novoa Cortes
Pablo Alejandro Figueroa
Juan David Santamaria Gomez
Como nota, si definimos el mixed con parametros opcionales, si lo podemos utilizar
@mixin flexCenter($direction, $content: null, $align: null){ display: flex; flex-direction: $direction; justify-content: $content; align-items: $align; }
.mision-section{ @include flexCenter(row, space-around, center); .earth{ width: 40%; @include flexCenter(row); gap: 40px; p{ text-align: center; margin: auto 0; } img { object-fit: contain; } } .innovation{ @extend .earth } }
El extend en about-us funciona si lo pones dentro de un section o del anterior section :P
section{ .about-us { @extend .healthcare; h2{ font-weight: bold; } }}
sip, todo era cuestión de especificidad
excelente aporte!!!
Aquí les va un hack al min 2:31
Seleccionamos todo lo que queremos meter dentro del nuevo div presionamos al mismo tiempo las teclas CTRL + SHIFT + P y tecleamos WRAP + ENTER
Luego escribimos ".mision-section" + ENTER
que copado! gracias!
Tambiény es válido agregar un ", " y agregar el otro estilo que queremos aplicar los mismo atributos, para no tener que escribir más código.
.mision_section{ @include flexCenter(row,space-evenly ,center ); .earth, .innovation{ width: 30vw; @include flexCenter(row,null,center ); gap:40px; color: $quaternary-color; padding-bottom: 60px; img{ object-fit: contain; } p{ text-align: center; font-size: $paragraph-size; } } }
En el Figma si quieren exportar el SVG completo, deben de seleccionar el grupo para que se exporte completa la imagen
Inicié esta clase pero definitivamente me moría de ganas por hacer la versión con scroll horizontal, tal y como quedaría la versión Mobile para "Cuidado de la salud" y "Decoración del hogar".
Siento que aún me faltan cositas, pero estoy AMANDO el resultado <3
Les dejo el código en mi repo de Github:
excelente clase
Genial!
.
