Css Position absolute

Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Vinit1234
Great work @GeorgeGit1 !! Here are a few tips that you'd like to consider:
- Using semantic tags instead of divs will improve the meaning of your website structure. Here's a sample structure:
<header> <nav class="logo"> <img src="./assets/logo.svg" alt="Website logo"> </nav> </header> <main> <section class="heading"> <div class="hero-image"> </div> </section> <section class="main-text"> <div class="buttons"></div> </section> <section class="middle-content"> <div class="lice"></div> <div class="images"> </section> </main> <footer> <div class="lice lice-2"></div> <div class="footer-text"></div> </footer>
-
If the footer is meant for entire page you can keep it separate from the main tag, as mentioned above.
-
You can retain the proportion of the images by avoiding applying explicit widths and heights (and using max-width instead) as:
.images img { /* width: 100%; */ /* height: 100%; */ border-radius: 5px; max-width: 100%; }
- You can position the circled number 2 to overlap the footer by adding properties as:
.lice-2{ position: relative; } .circle-2{ position: absolute; bottom: -30px; } .line-2{ position: absolute; bottom: 27px; }
*Disclaimer :These are just suggestions. Feel free to modify them as per your requirements.
Rest looks good to me. Well done!!
Keep coding, Keep growing. 👋
Hope you find some of this useful, if so please remember to click the "mark as helpful" button. Thank you!👋👋👋
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