Responsive card component using HTML and CSS flexbox
Design comparison
Solution retrospective
I initially wanted to make both the desktop and mobile images have the same class, but I discovered that I couldn't keep the linear-gradient
background if I changed the url for each version of the site. In addition, the mobile version of the site uses a height
of 28% for the image div which kind of felt like a random value, so I'm wondering if there might be a better approach.
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- Do not forgot to check your FEM report, to see what is incorrect and update your code with it. Before moving on to the next challenge.
- For improved accessibility 📈 for your content, it is best practice to use
em
formedia-queries
. Using these unit gives users the ability to scale elements up and down, relative to a set value.
- Your HTML should have a
main
element that will assist in identifying the main content of your site. For this project, themain
element will serve as the component’s container.
More Info:📚
- Your
attribution
should be wrapped in afooter
element instead of adiv
.
- To get the image to look like the FEM example, you are going to want to use the
mix-blend-mode
along with themultiply
value and include aopacity
with the value of 0.8.
- The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a
paragraph
element.
- The statistics at the bottom are a list, so it should be built using an
unordered List
element.
More Info:📚
MDN <ul>: The Unordered List element
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful1
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