How to create the numbers and the drawings that surround them with html and css, how could I position the elements in the template easier than the way I did it.
How to improve the code efficiency.
How to improve the look and efficiency of the code.
How to avoid mistakes while building the template and be aware of errors.
How to make it pixel perfect?
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>
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!
