Some flex ,margins and overlays

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello @thanosballo,

  I have some suggestions regarding your solution :

  • Use landmark <main> to wrap the body content.HTML5 landmark elements are used to improve navigation

  • You can use an ordered list <ul> for the stats this class="footer".

  • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

  • Height 100vh on this is causes the content to be cut off on mobile. Change to min-height. This also allows the body to to grow taller if the content outgrows the visible page.

  /* remove this */
  .imagecontainer::before {
      position: relative;
  }
  
  

  • To improve the image overlay effect you should use blend modes. you can use background color, Use mix-blend mode and opacity to make it more like the design.

  • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs Check the responsiveness again .

  Overall , your solution is good, Hopefully this feedback helps.

  00

  Marked as helpful
• 

  Dev Rathore•2,540

  @GitHub-dev12345

  Posted over 3 years ago

  You want To reduce Accessibility Change this code:

  <div class="bigcont"> to <main> (Used main tag);

  00
• 

  Dev Rathore•2,540

  @GitHub-dev12345

  Posted over 3 years ago

  Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design Used This CSS Code:

  transform : scale(0.8); this property decrease the size of card. 😉

  large size for increase the number of scale & small size for decrease the number of scale

  I hope you find this helpful

  00