Meet landing page html css

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 .

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 🧑‍💻☕😊 !*

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!

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! 🎉