Skip to content
Submitted 11 months ago

Meet landing page html css

P
🔅 Yuliya 🐈•330
@O-Julia-O
A solution to the Meet landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Finally, I placed the image with faces on the page similarly, as shown in the design.

What challenges did you encounter, and how did you overcome them?

Challenges related to layouts, flexboxes, and grids. Difficulties in understanding the best names for blocks and elements.

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

Hi everyone ✋

Feedback on my website's layout and suggestions for improvement

I would appreciate your feedback on both its layout and the usage of HTML tags. I'm particularly interested in whether I've used the correct tags for structuring content and any suggestions for improving the layout.

What a better way to put the circle with number

How better to place the image with faces

I used a div block and css background-image for that, but I'm interested in knowing if there is a better way to place it on a webpage.

Here is a snippet of the code I'm using:

HTML:

CSS:

.image_faces {
    background-image: url("./assets/tablet/image-hero.png");
    width: 100%;
    height: 200px;
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: top center;
}

Please help with naming blocks and elements in HTML.

Thanks a lot in advance:) Any feedback is important :)

Code

Please log in to post a comment

Log in

Community feedback

  • Amjad Shadid•810
    @amjadsh97

    very excellent work!!

    *small notes:

    1- I think you can use button element instead of this code. because button element is semantic. so it will be accessible.

    <div class="button button-cyan" role="button"> <a href="#">Download <span>v1.3</span></a> </div> <button>Download <span>v1.3</span></button>

    2- when you add flex to element by default it take flex-direction:row, so there is no need to add it. .wrapper { display: flex; flex-direction: row;}

    3- please add alternative text to img elements to make it more accessible element .

  • Ralph Virtucio•710
    @ralphvirtucio

    Hi O-Julia-O,

    Great job on completing this challenge!

    Your approach to the hero images is impressive! I'm considering refactoring mine because I couldn't quite implement it to match the design 🥲😅. I would suggest including the images in the HTML for accessibility since they are profiles of persons.

    For semantic HTML, I would also recommend removing the section with the class footer from the main element and creating a separate footer element for it.

    I noticed that your footer isn't exactly like the design. There are many ways to approach the footer styling. What I did was set the background color to match the design and then created a ::before pseudo-element for the background image.

    I also observed that the active state of your buttons isn't working.

    Lastly, I suggest including a README.md file in your repository. It’s a great habit to have as it communicates important information about your project.

    CODE UP 🧑‍💻☕😊 !*

  • P
    Nico•330
    @Nico243

    Hey cool code. I'm running through this challenge now and I'm wondering. Why aren't people using grid for this one? What is your reason for using flexbox and no grid for the overall container?

    Thanks in Advance!

  • solvman•1,650
    @solvman

    Great job! 🎊

    I have a small suggestion about placing the hero image for you. It is not responsive as it sits right now. One way to do it is to have three images on the page, show the left and right images on the desktop design, with the center image hidden, and hide the left and right images for the smaller size and only show the center image. HTML layout for that might look something like this:

     <section class="hero">
        <img
          src="./assets/desktop/image-hero-left.png"
          alt
          class="hero__img-desktop"
          aria-hidden="true"
        />
        <img
          src="./assets/tablet/image-hero.png"
          alt
          width="820"
          height="303"
          class="hero__img"
          aria-hidden="true"
        />
        <div class="hero__content">
          <h1 class="hero__title">
            Group Chat<br />
            for Everyone
          </h1>
          <p class="hero__text wrapper wrapper--sm">
            Meet makes it easy to connect with others
            <span class="no-wrap">face-to-face</span> virtually and collaborate
            across any device.
          </p>
          <nav>
            <button class="button">Download <span>v1.3</span></button>
            <button class="button button--sm button--accent">
              What is it?
            </button>
          </nav>
        </div>
        <img
          src="./assets/desktop/image-hero-right.png"
          alt
          class="hero__img-desktop"
          aria-hidden="true"
        />
      </section>

    You may utilize display: none, display: block and media query to hide and show different images for various screen sizes:

    
.hero__img-desktop {
  display: none;
}

.hero__img {
  width: 108%;
  height: auto;
  position: relative;
  left: -4%;
}


@media screen and (min-width: 968px) {
  .hero__img {
    display: none;
  }

  .hero__img-desktop {
    display: block;
    width: 33%;
    height: auto;
    position: relative;
  }

  .hero__img-desktop:first-child {
    left: -3%;
  }

  .hero__img-desktop:last-child {
    right: -3%;
  }
}

    I hope you find it useful! Great job otherwise! 🎉

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