Submitted 2 months ago

Huddle landing page with a single introductory section

#pure-css

Lutfi Ismail•130

@lutfiismail52

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

How to make elements with CSS class .wrapper can be aligned as in the design, what code do I need to fix/add? Here is more or less an example of my code:

<div class="wrapper">
        <div class="top-section">
          <img src="./images/illustration-mockups.svg" alt="hero image">
        </div>
        <div class="bottom-section">
          <h1 class="jargon">Build The Community <br> Your Fans Will Love</h1>
          <p class="description">
            Huddle re-imagines the way we build communities. You have a voice, but so does your audience.
            Create connections with your users as you engage in genuine discussion.
          </p>
          <button class="btn-register">Register</button>
          <div class="social-media">
            <i class="fa-brands fa-facebook-f"></i>
            <i class="fa-brands fa-instagram"></i>
            <i class="fa-brands fa-twitter"></i>
          </div>
        </div>
</div>

@media screen and (min-width: 768px) {
  .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    margin: 28px 0;
  }
}

For those of you who took the time to give me feedback, I say thank you and appreciate it. 😊

Please log in to post a comment

Community feedback

Yacoub AlDweik•2,930
@YacoubDweik
Posted 2 months ago
Hey! Good job!

Always check the console to see if there are some errors, here you have one that you couldn't load the bg-image for some reason.

About your question you have two ways (or even more) you can do this, the first one is that you can think of those icons like they are in another standalone div (or footer if you want to use the right HTML element), then you can just give that footer flex and you justify content to the the end of the footer (the footer is a block element so its width is 100% by default).

OR

You can still use your current structure but you have to align items to the top, then for that bottom section you have to wrap all content (except those icons) in a div, then you have to give it styles like this, the min-height is up to you in that way that make your design looks like the solution, you have to take into account how it looks in another screens as well:
```
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
```
keep it up!

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