Responsive Landing page Using HTML and CSS only
Design comparison
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
Naruto 🔥🔥
- Your use of headings is incorrect, the
h1
is only allowed to be used once per page.
- 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
- Implement a Mobile First approach 📱 > 🖥
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
- 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/
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful1 - Your use of headings is incorrect, the
- @catherineisonlinePosted almost 2 years ago
Hey, for the image to match the color, I did something like this, I hope that helps, size might not fit your solution but you can adapt it depending on your own code:
<div class="image-container"> img class="main-image" src="images/image-header-mobile.jpg" alt=""> </div> .image-container { display: inherit; position: relative; width: 100%; border-radius: 0 10px 10px 0; background-color: hsl(277, 64%, 61%); } .main-image { width: 100%; height: 100%; position: relative; background-size: cover; border-radius: 0 10px 10px 0; mix-blend-mode: multiply; opacity: 0.75; }
IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩
Marked as helpful1@vishanthan8055Posted almost 2 years ago@catherineisonline Hey Catherine, Thanks for your suggestion. It was really helpful. I ask you a favour, Can you guide me in sizing all the elements in a page? If possible please guide me.
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