Meet Landing Page

Community feedback

• 

  P

  Carl•1,215

  @CarlHummPosted 28 days ago

  Hi Gabe, well done on your solution!

  Here are a couple of areas that could be improved

  1. Group content and ensure it's centered within the correct columns

  When I expand the page I noticed some elements are not aligned correctly in the call to action section, namely the heading appears at the bottom left, paragraph center and buttons bottom right. This is because unlike the avatar images they haven't been explicitly placed and are following a normal grid placement for each element.

  One way you could solve this is to group these elements under a single container and then place them in the center. Given your current design this could look like the following.

      <div class="call-to-action__text">
      <h1>Group Chat for Everyone</h1>
        <p>Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.</p>
        <div class="call-to-action__text-links">
          <a class="call-to-action__download button" href="#">Download v1.3</a>
          <a class="call-to-action__info button" href="#">What is it?</a>
        </div>
      </div>
  
  
  

  By default this element should sit in the center, but if it doesn't you can use the same method to style it.

  
  .call-to-action__text {
  grid-column: 2 / 3;
  }
  
  

  2. Close Alt Attribute on Right Image

  <img class="call-to-action__image-desktop call-to-action__image-desktop--right" src="./assets/desktop/image-hero-right.png" alt="A collage of portraits featuring smiling Meet users>  
  

  Aside from this I noticed on your right side image you have forgotten to close your quotes for the alt attribute.

  Conclusion

  Hope this advice helped, not entirely sure in regards to the picture element but I believe it cant handle multiple images in that way.

  Edit: I just noticed you had an identical element named call-to-action__text, I guess the alt attribute messed up the markup :)

  Marked as helpful

  0