Desafio resuelto con Html5. Css con el prepocesador de LESS, declaración de variables, mixions. Tambien se utilizo Flexbox para poder realizar las columnas y darle un mejor diseño a la pagina ademas de cuidar la parte responsiva. Sugerencias o comentarios son muy bienvenidos. Saludos.
Hello Candido 👋
Congratulation on completing the challenge! It looks really nice 🙂
I've noticed that you often set height on elements. It's a good idea to leave that out and instead let the height be decided by the contents of the element and things like padding. So to make an element take up more vertical space, you could give it bigger padding, add margin to elements inside, increase line-height of the text and so on. I hope this helps.
I apologize for commenting in English, but I don't know Spanish.
Happy coding 🙂
Used Positions to bring the side cards in-between rows, can it be done with Grid as well?
Hello Modade!
To answer your question: yes, you can place the cards with CSS Grid. One way to do so would be defining rows and columns for the cards:
.grid_card_one { grid-row: 3 / span 2; grid-column: 1; } .grid_card_two { grid-row: 2 / span 2; grid-column: 2; } .grid_card_three { grid-row: 4 / span 2; grid-column: 2; } .grid_card_four { grid-row: 3 / span 2; grid-column: 3; }
Here's a CSS Grid cheatsheet
I hope this helps 😊
Well this is a simple project and i had fun while doing it but i had some issues while working on it, especially with the fonts i couldn't even tell if it changed because when i embedded the fonts into my css tho it changed the look but i wasn't looking exactly like what i was given to work on, like the price tag wasn't even alike. Also, the spacing between my paragraph and the header was wider than the one given to me even without me adding a margin or padding
Hello @GreatNation111👋
You've mentioned that the spacing between the paragraph and header is bigger than you wanted. This might be due to line-height set on <h1>. I think currently it is the same as for the rest of text content. It is worth decreasing it, as smaller line-height makes big text look better. Try changing it to 1.2 or similar value and see if it helps.
Happy coding 😊
