Design comparison
Solution retrospective
I would appreciate any suggestions you might have.
Community feedback
- @gmqrk247Posted about 2 years ago
Hey!
Great work! One little hint, if you put a transparent border on the button on it's normal state, you can avoid the growing and shrinking with the hover effect. just like this:
.btn{border:2px solid transparent}
Marked as helpful0@AtulKumar0001Posted about 2 years ago@gmqrk247 I really appreciate your suggestion. It really helped me. I was also wondering why my cards' size was growing and shrinking. Could you tell me why it was happening?
0@gmqrk247Posted about 2 years ago@AtulKumar0001 the hover effect border added extra pixels to the button. So on hover, those extra pixels pushed out everything around just by that tiny bit. Adding a transparent border on normal state means those pixels are already there, you just can't see it because it's transparent. But you could have set it to the same color as the background. I hope I've answered your question. Keep up the learning ๐
Marked as helpful0@AtulKumar0001Posted about 2 years ago@gmqrk247 Thanks for answering my question๐.
0 - @UrbanskiDevPosted about 2 years ago
Hello Atul kumar !
Congratulation for finishing this project
- In your html file, I recommend you to modify your
<div class="container">
by a<section>
, a div tag has no meaning in html while section does have one !
I give you a link about section tag, and html semantics in general to learn more about it :
- In your css file, you can define variable to make it easier to maintain, like color definition :
:root{ --var-name:hsl(31, 77%, 52%); } .card1{ background-color:var(--var-name); }
I give a link to learn more about them :
I hope it helps you, keep learning and happy coding !
Marked as helpful0@AtulKumar0001Posted about 2 years ago@UrbanskiDev Hey Thanks for your suggestion. I get what you are trying to say, and I should replace my other div with a <section> semantic element or something else, but what should I replace my div with since my .container is not a section?
0@UrbanskiDevPosted about 2 years ago@AtulKumar0001
Let's make it together to see what I meant with my previous comment !
<section class="container"> <div class="wrap"> <article class="card1 cards"> <header> <picture class="picture"> <img src="icon-sedans.svg" alt="" /> </picture> <h1 class="heading">Sedans</h1> </header> <p class="para"> Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip. </p> <button class="btn btn-1">Learn More</button> </article> <article class="card2 cards"> <header> <picture class="picture"> <img src="icon-suvs.svg" alt="" /> </picture> <h1 class="heading">SUVs</h1> </header> <p class="para"> Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures. </p> <button class="btn btn-2">Learn More</button> </article> <article class="card3 cards"> <header> <picture class="picture"> <img src="icon-luxury.svg" alt=""> </picture> <h1 class="heading">Luxury</h1> </header> <p class="para"> Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style. </p> <button class="btn btn-3">Learn More</button> </article> </div> </section>
What I did is one way to structure it, but there's multiple way to do it which can be good too.
It allows you to structure your page in a better way, because as I was saying in my previous comment, a div has no meaning, while these tags provide more semantic information.
One thing to keep in mind, using div is not a bad thing, but sometimes, there's a better tag to use, which has more meaning than using a div.
Don't hesitate to ask if you have new questions !
Marked as helpful0@AtulKumar0001Posted about 2 years agoOnce again, thank you for your help @UrbanskiDev. I will try to avoid using divs. I don't have any questions right now, and I don't want to waste your time with meaningless doubts. ๐ .
0 - In your html file, I recommend you to modify your
- @correlucasPosted about 2 years ago
๐พHello Atul kumar, congratulations for your first solution!๐ Welcome to the Frontend Mentor Coding Community!
Your solution seems fine, you did a really good job wrapping the content for these 3 cards. Something you can improve here is to use a
single class
to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class. Add a margin of aroundmargin: 20px
to avoid the card touching the screen edges while it scales down.โ๏ธ I hope this helps you and happy coding!
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