Design comparison
Solution retrospective
This challenge was super fun and fast, I got a good result in a short time.
Community feedback
- @hitmorecodePosted over 1 year ago
Congratulations well done. I have a few tips for you. When you have components which are identical, it is better to use classes instead of id. The layout and style of all four cards are identical, if you use class you only have to style one card and it will apply to all four cards. This will save you time writing your CSS.
When using id you have to style every single card separately and with this you will repeat the same lines of code multiple times.
For example if you look at the CSS for id secao-esquerda, box-top, box-bottom, secao-direita, they are all the same. You can change it to this:
<div class="secao" id="esquerda"> <div class="secao" id="box-top"> <div class="secao" id="bottom"> <div class="secao" id="direita">
#you only have to write this one time and it will apply to all four cards .secao { display: flex; align-items: center; flex-direction: column; justify-content: space-between; background-color: white; width: 350px; padding: 30px; margin: 20px; border-radius: 5px; transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); box-shadow: rgba(28, 34, 26, 0.082) 0 8px 15px; } **because the top borders are not the same, you can style them separately #esquerda { border-top: 3px solid hsl(180, 62%, 55%); } #box-top { border-top: 3px solid hsl(0, 78%, 62%); } #box-bottom { border-top: 3px solid hsl(34, 97%, 64%); } #direita { border-top: 3px solid hsl(212, 86%, 64%); }
The same goes for the <p>. If you give all <p> inside the cards a class
<p class="card-description">
**you only have to write this one time and it will be the same for all <p> inside all cards .card-description { font-size: 14px; margin-top: 10px; color: hsl(229, 6%, 66%); }
Marked as helpful0@victoriamnxPosted over 1 year agoSometimes I've tried to do it like this but I'm apprehensive about not being able to style specific things for each component, but thank you very much for the tip, I'll try to put it into practice in my future projects :)
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord