The desktop hero view with the split images and text in between was difficult. I would appreciate any advice on how to improve this area.
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;
}
}
#people-left{
display: none;
@media screen and (min-width: 1200px){
display: inline;
position: absolute;
left: -2rem;
top: 0;
height: 30.3rem;
width: auto;
}
}
In the central images I would use a gap of 32px between them.
To apply a overlay in the footer I used this, maybe it can help:
&::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #4D96A9; opacity: 0.8; z-index: 2; }
Cheers!
Proxima vez vou me atentar a deixar o codigo mais estruturado
What challenges did you encounter, and how did you overcome them?Nenhum
What specific areas of your project would you like help with?Nenhuma
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.
Hi,
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.
Cheers!
During this project, I reviewed some concepts related to designing responsive layouts and working with images.
What challenges did you encounter, and how did you overcome them?Overall, the project was manageable.
What specific areas of your project would you like help with?I'm open for reviews and suggestions.
Hi Carlos,
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.
Cheers!
I'm very proud of the hard work I put it to reverse engineer the design image in .xd for accurate measurements.
I'm immensely happy that I've gotten the output so close to the design without a provided figma file.
Now that I have a pro subscription, I'll be relying on the provided .fig files.
It really helps a lot when you no longer need to think about the design layer and just focus on code.
My respect goes out to all the UI/UX designers out there 💓
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 styled this project using SCSS. It was my first styling using this CSS preprocessor. I would appreciate any feedback.
Hi Jaroslav.
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.
The rest looks just like the design, Cheers!
This was the first project that I timed myself on and even when I had forgotten things and had to google answers it still only took me a few hours.
What challenges did you encounter, and how did you overcome them?I had apparently forgotten everything I knew about media queries and had to google it again.
What specific areas of your project would you like help with?How is the responsiveness?
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:
*, *::before, *::after { box-sizing: border-box; }
That's the only things I found to improve, the rest of the card look identical to the design.
Cheers!
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
Eu usaria um height: auto no card para que cresça em altura e o texto não transborde para baixo. Um saludo.
