Sección hero con Flexbox y Sass
Contenido del curso
Instalación y configuración del entorno de trabajo
Reglas y uso
Expresiones
Proyecto: sección main
Herencia en SASS
Mixins
Funciones
Proyecto
Deploy
Extras
Sección hero con Flexbox y Sass
Sección hero con Flexbox y Sass
Contenido del curso
María C. Santiago
Nestor Rios Garcia
Julian Ricardo Gaviria Lugo
----- ----
Ana María Díaz
Profesor
Julia Gabriela Nieva Paredes
Donovan RM
Ulqernesh Karvenae
Felipe García
Ulqernesh Karvenae
Rafael david suarez cordova
Luis Fernando Montoya Garcia
Ricardo Collado
Oscar Fuentes Esteves
Samuel Eduardo Rodriguez
Andres Gutierrez
Henry Alexander Velásquez Rosas
Daniel Santiago Forero Torres
Andrés Natareno
Diego Andrés Rojas Pinzón
Carlos Rubén Díaz Gutiérrez
LUIS MIGUEL OLARTE BELLO
Jean Carlos Rodríguez
Miguel Negron Garcia
Ángela Sofía Osorio García
Juan Pablo Campuzano Monsalve
Carlos Rubén Díaz Gutiérrez
iecgerman .
Así me está quedando Mobile
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; }
Lo puedes incluir en un mixin y luego llamarlo con include, en caso de tener varias paginas. Así por ejemplo:
`` @mixin formater{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; text-decoration: non ```e } ```
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; } }
Que buena implementación! Gracias por compartir tu versión con Grid!!
Sorry, pero por más que estoy disfrutando el curso, no me gusta que hagan videos taaaan largos.
total, a mi me toca x2 y aun me es largo xD
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
.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. .
Hola Ulti, tenes una foto de como te quedo esa parte en HTML? Yo descargue el menu como svg directamente de Figma, pero no logro mostrarlo ya que arranque con desktop si querer.
Claro bro, aquí esta el repositorio donde puedes ver todo el html y también la pagina completa
Pagina Repositorio
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>```
Jajjajajaj gracias!
Cuando veo cursos del profe Diego, veo en el el orden de las cosas... La profe es muy desordenada, trabaja en un flujo salteado, primero le da estilos a la imagen cuando es lo ultimo que se debe estilar, y asi... Puede que cada uno tenga su forma de trabajar, pero como plataforma deben tener un estandar de aprendizaje.
✨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){ "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.
Madre mía María me estás mareando 😵💫
Usen box-sizing: border box;
Aunque lo de los selectores anidados en GOD 10/10
Tengo una duda, ¿estamos trabajando con scss o con sass?
Segun tengo entendido trabajar con el preprocesador Sass es tener archivos ya sea .scss o .sass la diefrencia estaba en qud el .scss se usa relativamente igual que el css digo relativo por el uso de los { } y el ; en cambio en el otro formato no se usan, la forma de saber las propiedades de mis elementos o si estan anidados es solo por el identado. un ejemplo seria que quieres trabajar imagenes, pero puedes usar el formato jpg o jpeg, son formatos relativamente diferentes, pero el hecho es que se usa para las imagenes, espero haberme hecho entender. ejemplo:
/*Codigo de .Scss*/ .icons{ display: flex; gap: 15px; button{ background: none; border-style: none; } } /*Codigo .sass*/ .icons display: flex; gap: 15px; button background: none; border-style: none;
como puedes ver la diferencia ambos son del preprocesador sass pero tiene diferentes extensiones, y en la parte de sisntaxis cambia, en lo personal creo que es mas facil el .scss ya que su sintaxis es similar a el css normal.
Encontré la siguiente información para nombrar el cuarto color de las variables globales:
"Quaternary" se refiere al número cuatro en una secuencia, así que si estás hablando de un cuarto elemento en una secuencia, "quaternary" sería el término más adecuado.
"Quaternion", por otro lado, es un término matemático que se refiere a un sistema de números que extiende los números complejos.
Esa técnica de darle color de fondo al elemento, está buena para ubicar de una manera mas fácil los elementos.
Código en el repositorio de GitHub
platzi/cursos-sass (github.com)
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)
Justo es la que siempre utilizo. Está genial 💚
Una alternativa a los saltos de línea puede ser en el texto de 'impacto ecologico' puede ser:
.impact-section p { max-width: 40ch; // o usa em, %, px según tu preferencia line-height: 1.6; text-align: justify; // o left }
¿A alguien más le pasa que ve el color de fondo del proyecto de la profesora distinto al suyo?
¿Porqué en el selector universal * no uso box-sizing: border-box? (min 23:54)