Meeting Landing Page

Community feedback

• 

  Mikhil Desai•200

  @mike15395Posted 4 months ago

  @Arnotts33 Congratulations on completing this challenge!

  To be honest i have also completed this challenge but my solution is also not perfect, but still i would like to help you with some points that i understood.

  1. First section: hero image is of tablet but displayed on desktop screen. You can easily handle this by writing following code: HTML

   <header>
        <div class="logo">
          <img src="./assets/logo.svg" alt="logo" class="logo-image">
        </div>
        <div class="header-section">
  
  
          <div class="image-left-container">
            <img src="./assets/desktop/image-hero-left.png" alt="image-hero-left" class="image-hero-left-desktop">
           
          </div>
          <img src="./assets/tablet/image-hero.png" alt="image-hero-tablet" class="image-hero-tablet">
          <div class="header-text">
            <div class="main-header-text">Group Chat for Everyone</div>
          
            <p class="header-paragraph">Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.</p>
            <div class="header-buttons">
              <button class="header-download">Download <span>v1.3</span></button>
              <button class="header-what">What is it?</button>
            </div>
          </div>
          <img src="./assets/desktop/image-hero-right.png" alt="image-hero-right" class="image-hero-right-desktop">
        
        </div>
  

  CSS

  .image-hero-tablet{
      display: none;
  }
  @media all and (max-width:820px) {
  .header-section{
          display: grid;
          grid-template-columns: repeat(1,auto);
          grid-template-rows: auto auto-fill;
          grid-template-areas: 
          "hero-image"
          "header-text";
             
      }
      .image-hero-left-desktop,.image-hero-right-desktop{
        display: none;
      }
      
      .image-hero-tablet{
          display: block;
          grid-area: hero-image;
          place-self: center; 
      }
      .header-text{
          grid-area: header-text;
          width: min-content;
          place-self: center; 
            
      }
      .main-header-text{
          font-size: 52px;
      }
    
  }
  

  2.Using css for stlying 01 and 02 numbers It's good that you have written css for stlying numbers as per design but you can directly export image of it from figma file directly and then use it in <img></img>. This will save a lot of time writing css.

  3.code structure: Well written code but can be improved further by deleting unwanted empty files like initial.css in styles folder and updating readme as per template.

  I hope above points will improve your solution further.

  Keep Learning! Happy Coding:)

  0