Huddle landing page using HTML & CSS

Community feedback

• 

  Abdul•255

  @abdulrahman-rwimPosted almost 3 years ago

  Hi @Yahir-am good job solving this challenge, I've got some feedback for this solution.

  • the background image does not cover the entire page to solve it try this line of code background: var(--violet) url("./images/bg-desktop.svg") no-repeat top left / cover;
  • check out this amazing article on the background property
  • avoid using height especially on images because that makes them stretch
  • wrap the illustration image with div and give it max-width:100% to make sure not to get bigger
  • give your text content a limit width max-width:40% to make sure not to get bigger
  • avoid using width and height on buttons use padding instead ,try this button { display: block; margin-top: 1.5em; padding: 0.7rem 5rem; }
  • I suggest adding transition: color 250ms; to the button and the links, this will make: hover smoother.
  • start with the mobile design first because that makes styling elements easier
  • lastly to fix the accessibility issue remove the script tag from the body and for the icons use this instead put a CDN link inside the head tag you can find it here font awesome CDN link
  • I hope this was helpful for you, other than that, nicely done, happy coding 😄

  Marked as helpful

  0

  ---

  

  Yahir_AM•370

  @Yahir-amPosted almost 3 years ago

  @abdulrahman-rwim thank u so much for your suggestion <3

  0

  

  Abdul•255

  @abdulrahman-rwimPosted almost 3 years ago

  @Yahir-am you're welcome 😄

  0