Reactjs

Community feedback

• 

  Muhammad Shajjar•1,100

  @muhammadshajjarPosted about 3 years ago

  Hi congrats on completing your first FEM challenge, It looks good and behaves well on all viewports

  To your quesiton;

  Your background image is placed where it has to be, Use correct background color on body which is hsl(225deg 100% 94%) (very pale blue) And don’t need to use gradients on the background image, use as it is. Then your background looks like to the design You confused yourself in overlays, I have a little simple solution for you, Use background color in body and use background image in the body too here is my solution hope it would help you in this case

  Some other suggestions that would help you to improve your design

  • change should behave as it controls something, and for controlling I prefer to use button for navigating somewhere it is good to go with a
  • Aoid using width and height, you used width on your .card-container, using hard code would cause some issues, I know in this solution your design is not very much affected form this, but in future projects, this habit falls you in the cumbersome scenarios. Try max-width and min-height instead
  • You should need to add some semantic markers to designate sections of the page as the header, navigation, main content, and footer e.g:


  <main>
  <section> 
  </section>
  </main>
  <footer>
  </footer>
  

  Marked as helpful

  1