Manipulación de Flexbox para Diseño de Tarjetas en CSS
Contenido del curso
Andres Eduardo Maneiro Antunez
Ana María Díaz
Profesor
iecgerman .
Ulqernesh Karvenae
Cristian Javier Martinez Barcinilla
Pablo Scarone
Pablo Diaz
Beder Danilo Casa Condori
María C. Santiago
Fernanda Vieira Jófili
Ana María Díaz
ProfesorPablo Gomez
Juan Sebastian Giraldo Escobar
John Alexander Cotamo
Ariel Hernán Contini
CLAUDIA ANDREA CAMPO GRIJALBA
Javier Villavicencio Camarena
iecgerman .
Ángela Sofía Osorio García
Juan David Santamaria Gomez
Henry Alexander Velásquez Rosas
Jessica López
Henry Alexander Velásquez Rosas
Miguel Negron Garcia
Miguel Negron Garcia
----- ----
Roberto Guzmán
Carlos Rubén Díaz Gutiérrez
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" }
Gracias por el aporte Andrés!!
Toma un corazonzote mas capo 👍
Trucos .
.card-section width: 100% display: grid grid-auto-flow: column overflow-x: scroll justify-content: initial gap: 10px>
.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
hola, tener en cuenta en firefox no este soportado, saludos.
Bastante desordenado todo , con las idas y venidas!!! no se logra entender bien
Con todo el respeto a la instructora, me costo comprender un poco el curso en general, en partes sentí que hacia todo lo que otros profesores decían que evitáramos por buenas practicas.
muy cierto, pero veamos lo bueno, almenos entendimos como usar sass, ahora solo falta pulir
Así me quedó para mobile 😸
Qué bonito!
Muchas gracias por compartir la versión mobile! Te quedó increíble!!
Me quedo con Diego de Granda.
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; } } }```
qué clase tan improvisada, empezamos con algo y terminamos cambiando todo
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)
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
Deberian de actualizar este curso
(min 19:55) Lo de la herencia de @extend es lo mismo que poner esto:
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.
una locura esta clase
Formatear código
Para formatear el código de manera automatica solo debes presinar F1 y buscar Format Document, darle enter y listo. 🔥🙂
O dar clic derecho sobre el código y ahi también aparece esa opción, o con shift + alt + f ✨
También se puede usar la extensión Prettier y configurar vsc para formatear al guardar usando ctrl + s.
Esta es la configuración que uso y el 🔥 video donde lo explican paso a paso.
{ "editor.formatOnSave": true, "material-icon-theme.opacity": 1, "material-icon-theme.files.color": "#90a4ae", "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.arrowParens": "always", "prettier.bracketSameLine": false, "prettier.bracketSpacing": true, "prettier.embeddedLanguageFormatting": "auto", "prettier.htmlWhitespaceSensitivity": "css", "prettier.insertPragma": false, "prettier.jsxSingleQuote": false, "prettier.printWidth": 80, "prettier.proseWrap": "preserve", "prettier.quoteProps": "as-needed", "prettier.requirePragma": false, "prettier.semi": true, "prettier.singleAttributePerLine": false, "prettier.singleQuote": false, "prettier.tabWidth": 2, "prettier.trailingComma": "es5", "prettier.useTabs": false, "prettier.vueIndentScriptAndStyle": false }
Aquí otra configuración de VSC por si les interesa.
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.
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; } } } } } }
Le doy pa lante y para atras al curso y me pierdo siempre. No hay forma
Siento que sería buena idea dejar en los recursos de la clase el enlace al Figma del proyecto, ya que la profesora nos pide cambiar los textos.
