Excellent work!
The position of the split images look good, I just would make the images a little bit smaller. I share you my css so you can see how I made it myself:
#people-right{
display: none;
@media screen and (min-width: 1200px){
display: inline;
position: absolute;
right: 0;
bottom: 0;
max-height: 30.3rem;
width: auto;
}
Oi, o seu desafio está muito bom, só parece um pouco maior que o design original, mas o resto está realmente muito bom. Eu só adicionaria as aspas em SVG no primeiro cartão.
I suggest applying a max-width to the titles container to prevent the paragraph from stretching into a single line. I used a max-width of 540px. Additionally, I recommend double-checking the font sizes, as they appear smaller than in the design.
Good job on the card positioning! However, I would recommend making the cards larger, increasing the gap between them, and softening the shadow to better match the design.
Your solution looks very similar to the design. I would just modify a couple of things.
I have a few suggestions: I’d recommend checking the line-height of the card title as it seems to be a bit off compared to the Figma design.
You might want to consider removing the margin-top and margin-bottom on the body, as this causes the layout to be slightly misaligned vertically compared to the design.
Lastly, while the button shadow looks cool, it might be better to match it more closely with the original design.
Great work to do this template without a figma file. Even with the measures of Figma file is difficult to make it pixel perfect.
About the code, I recommend to use <strong> instead of <b>
I recommend adding 40px of padding to the main element for the tablet and desktop versions, as indicated in the Figma design. Additionally, consider removing the bottom margin from the last button. I made a similar mistake, and you can fix it by using the :last-child pseudo-class to set margin-bottom: 0;." The image should be 88px height and 88px width.
Hi Joanna.
I've noticed that the body has margin-left: 8px and margin-right: 8px, which affects the title width on mobile devices. That makes the h1 to be displayed on two lines when it should be on a single line.
I would recommend implementing a CSS reset or normalize. Specifically, you might want to consider adding the following to your base styles:
body {
margin: 0;
padding: 0;
font-size: 62.5%;
} This will remove default margins and padding, and set the base font size to 62.5% (which equates to 10px if the user hasn't changed their browser's default font size). This approach can help ensure consistent styling across different browsers and devices.
I also suggest applying box-sizing: border-box to all elements. This prevents padding and border from increasing an element's total width and height, making layout calculations more intuitive:
What are you most proud of, and what would you do differently next time?
Me orgulho de ter conseguido, por mais simples que seja, ter finalizado o desafio. Estava com dificuldade em grid e flexbox, mas o desafio me fez pensar um pouco fora da caixa para poder conseguir resolver o problema
What challenges did you encounter, and how did you overcome them?
Superei a dificuldade que estava enfretando com CSS Grid e com Flexbox