Skip to content
Submitted about 2 years ago

huddle-landing-page-with-single-introductory-section-master

DN•300
@dradvm
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Congrats on completing this challenge!

    When it comes to backgrounds, the majority of the time, they'll be placed in the Body Element.

    It should look like this:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--Violet) url("./images/bg-desktop.svg") top center / cover no-repeat;
}

    In your huddle class delete everything except display: flex, justify-content: center, and align-items: center; the rest of the code is unnecessary. You'll also want to add a max-width to keep everything in place.

    To clean up your code, you'll want to delete certain classes. Here's an example of how it should look like:

     <body>
    <main>
      <div class="img-section">
        <img src="logo" alt="" />
        <img src="main-img" alt="" />
      </div>
      <div class="text-section">
        <h1>Heading Goes Here</h1>
        <p>Text Goes Here</p>
        <button></button>
      </div>
      <div class="social-media-section"></div>
    </main>
  </body>
    0

Please log in to post a comment

Log in with GitHub

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