Using both grid and flexbox.
What challenges did you encounter, and how did you overcome them?The most challenging part for me was getting the grid template to work according to the given design.
If there are other alternatives for aligning the bottom of an image with the bottom of the card, please let me know. I don't know why the card's height was always bigger than 450px in the desktop version since the content wasn't as high as 450px. I thought the image height would set the card height to 450px automatically, but it turned higher than I anticipated.
Using both grid and flexbox.
What challenges did you encounter, and how did you overcome them?The most challenging part for me was getting the grid template to work according to the given design.
Amazing job with the grid layout! The only things I'd change are aesthetic, such as decreasing the space between the title lines and the card shadow opacity.
i was able to get my webpage up and running
What challenges did you encounter, and how did you overcome them?i was not able to change the font of the project i could not fix this
Hi! I saw your code and I noticed the font-face source is src: url('assets/fonts/static/Figtree-Medium.ttf') format('truetype');
, but the fonts folder is not inside a assets/
folder. Maybe if you change to src: url('fonts/Figtree-VariableFont_wght.ttf') format('truetype');
it works?
I tried to implement rem and em values instead of px in this solution and used responsive images.
What challenges did you encounter, and how did you overcome them?Implement responsive images was pretty challenging but this is a really useful feature
What specific areas of your project would you like help with?are there any options to optimize the code?
Amazing that you added the svg code instead of the file! I'm just not sure if the many image formats is needed since all of them are going to the same screen size.
::before
and ::marker
pseudo-elementsdiv
to style the image for mobile and desktopHi, nice work! I'm not sure I understood your first question, sorry. As for the second question: I don't quite understand how your code works, but on my code I'd put the image inside a .card
container, and this .card
container doesn't have a padding on the media query for mobile design, but the sections inside the .card
do have a padding. So I left the image outside the sections, using the tag <figure>
. You can check my solution here.
Proud to use semantic tags instead of multiple divs and next time i will pay attention to the content size.
What challenges did you encounter, and how did you overcome them?The box with the main content was not respecting the dimensions I chose and I resolved this by paying attention and changing the size of the contents inside it.
What specific areas of your project would you like help with?I would like to know the difference between the outline and border properties in css.
Btw, you can solve the dimensions problem by adding "box-sizing: border-box;" in .conteudo in the css file!
Proud to use semantic tags instead of multiple divs and next time i will pay attention to the content size.
What challenges did you encounter, and how did you overcome them?The box with the main content was not respecting the dimensions I chose and I resolved this by paying attention and changing the size of the contents inside it.
What specific areas of your project would you like help with?I would like to know the difference between the outline and border properties in css.
Oi Marcelo! Bom trabalho! I'm switching to English in case anyone has the same question as you: what is the difference between border and outline? A border is a visual representation of the area of an element, it is purely aesthetic. An outline is a line around the element and has accessibility purposes, such as a person being able to see an active state on a link when they need to navigate the webpage with a keyboard instead of the mouse. You can have a border and an outline in the same element, if you wish, but it's best to leave outlines for accessibility.