Responsive card component using tailwind css and flex box
Design comparison
Solution retrospective
How to set height of a div tag as per the changing height of the viewport ? This is my first solution so looking for best practices which are used and how can I improve my code ?
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @im-abhijit, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
1.You need to include the title of your PAGE. Do that inserting in the <head> the tag <title> →
<title>Product Preview Component - Front End Mentor</title>2.Add the website favicon inserting the svg image inside the
<head>.<link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">3.You made your html structure entirely with
div blocksbut these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use<article>instead of the<div>.4.Improve the card's overall look by adding the rounded borders to the component and also the image using
border-radius: 15px- Add rounded borders to the left side of the image with
border-radius: 15px 0px 0px 15px; - Then do the same thing for the component but in the opposite borders
border-radius: 0px 15px 15px 0px;
👨💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
✌️ I hope this helps you and happy coding!
0 - Add rounded borders to the left side of the image with
Please log in to post a comment
Log in with GitHub
Join 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