Submitted 10 months ago

Huddle landing page with a single introductory section (HTML and CSS)

Stanley Orabueze•310

@Udonna-cell

Preview site View code

This is a solution for...Huddle landing page with a single introductory section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

solvman•1,650

@solvmanPosted 10 months ago

Very well done! 👍 Congratulation! 🎉

I love ❤️ how you use semantic HTML 🚀

I found a couple of minor bugs. First, your mobile background does not stretch from the initial size. The second issue happens on extremely short and wide aspect ratios; Your <footer> gets pushed up to the middle of the page because of having height: 100vw on your <body> with the media query. I proposed the following solutions. You could fix the first issue by giving 100% size for the background like so:

body {
  background: url("./images/bg-mobile.svg") 
  background-color: var(--Violet);
  background-repeat: no-repeat;
  background-size: 100%; /* Will apply 100% of a container to the x-axis */
  padding: 2rem;
}

Remember to set background-size to cover with the media query and fix the footer issue:

@media only screen and (min-width: 767px) {
    body {
        background-image: url("./images/bg-desktop.svg");
        background-size: cover; /* reset 100% initially set above */
        height: max(100vh, 750px); /* making sure hight is either 100vh or at least 750px */
        padding: 1rem 4rem;
    }

Otherwise, it is a very well-put-together project! 🥳 You've done an excellent job! 👏

Stanley Orabueze•310

@Udonna-cellPosted 10 months ago

@solvman thanks 👍

Please log in to post a comment

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