Responsive clipboard landing page using desktop first approach

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job in completing this project. Viewing at your solution, I would like to recommend the following for you...

  • It's advisable to use one footer tag for the whole content. Refactor this part into...

  <footer class="footer">
        <div class="footer-info">
           ....
        </div>
         <p class="attribution">
          .....
        </p>
  </footer> 
  

  • Include description with the alt in img tags
  • Add the hover state of the button, links and icons. For the buttons, add background: hsla(171, 52%, 58%, 1); in .btn-ios and background: hsla(232, 100%, 77%, 1); in .btn-mac. The hover state in the footer content should have the background: hsla(171, 52%, 58%, 1); in the icons and links.
  • Refactor the footer list, wrap individually the items in contact-part with a tags
  • Increase the breakpoints with max-width: 768px into max-width: 902px. The buttons and images are staking in this part.
  • Remove the background image in the header and media query, placed it on the body rule set instead. Add background-size: contain;.

  Above all, you did good with implementing the design. Hope this helps and Keep it going!

  Marked as helpful

  2

  ---

  

  sanket kumar•300

  @sanketcharanpahadiPosted almost 3 years ago

  @RioCantre Thanks for your help and feedback, Thank You.

  1
• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  I advise against sizing down your base font size. There is no reason you need 1 rem to equal 10px, and by doing this you are introducing huge potential accessibility problems for some users. Let the defaults remain.

  Marked as helpful

  1

  ---

  

  sanket kumar•300

  @sanketcharanpahadiPosted almost 3 years ago

  @grace-snow Thanks for pointing out the mistakes , I will never do them again.

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hi

  You need to look up how and when to write img alt text. The most important content on the whole page is the logo but you've hidden that with blank alt. Yet you've written unreadable text for other images that aren't so important. And all the logos (again, meaningful content) are hidden again.

  Marked as helpful

  1
• 

  Ahmed ibrahim•370

  @Ahmedhassanin12Posted almost 3 years ago

  perfection 👌✔

  1