Design comparison
Solution retrospective
All Feedback is highly welcome π€
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! π Here are some suggestions to help improve your code: πΎ
- Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.
Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.
https://www.joshwcomeau.com/css/custom-css-reset/
https://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
- 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
- This challenges requires the use of two images π for different breakpoints. The
picture
element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:π
https://www.w3schools.com/html/html_images_picture.asp
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!ππ
Marked as helpful0 - @HassiaiPosted almost 2 years ago
Replace <div class="container"> with the main tag, <h2> with <p> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/
Give .main a fixed width value instead of a percentage width value. e.g.:
.main{width: 800px;}
give the img a max-width of 100% and display: block.Add a background-color of soft-violet , background-blend-mode: multiply and opacity: 0.7 to .image, there is no need for .overlay when you apply this.
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful 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