use of display flex for the layout of elements

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Greetings, Elise Rousseau! 👋

  It's nice to see you complete another challenge so soon! 😀 Well done on this one! 👍

  A few things I suggest are,

  • Getting rid of the extra white space beneath the footer at the bottom of the page (there seems to be some overflow happening down there). In the mobile layout, the background of the footer doesn't seem to extend all the way to the bottom of the page, meaning some of the elements in the footer aren't visible.
  • Turning the social media icons in the footer of the page into links by wrapping each of them in an anchor tag.
  • Adding some left/right padding to the email input element in the footer of the page.
  • Adding a hover state to the buttons on the page would be a nice touch! 😉

  Hope those pointers help. 🙂

  Keep coding (and happy coding, too)! 😁

  2

  ---

  

  Elise Rousseau•685

  @SarahHenriettePosted over 3 years ago

  @ApplePieGiraffe Hi ! 😁

  I always enjoy working on projects 🙂

  Thank you for taking the time to look at my work and thank you for your always relevant suggestions. 👍

  and yes it helps me a lot 🙂

  1
• 

  InduRajput•120

  @InduRajputPosted over 3 years ago

  Hi Sarah . . Good work on this challenge.. :)

  Even I am trying this challenge out, currently stuck with the curved background part. How did you manage to get that can you help me with that??

  0

  ---

  

  Elise Rousseau•685

  @SarahHenriettePosted over 3 years ago

  @InduRajput Hi 🙂,

  Thank you 👍

  For my part, I have the figma model from the project so I just re-recorded all of the backgrounds. 😅

  But I tried to do it again only with the curved edges. And you can use the ":: before" and ":: after" css pseudo-elements.

  For example: in the "grow together" part you have your container which includes the image and the text and on this container you can use ":: before" to put the image of the top border and a ":: after" for the lower border. it will also be necessary to put the container in relative position and the ":: before" and ":: after" in absolute position. And adjust the placement with up and down

  This is the solution I found but there may be better ones.😊

  Do not let go especially and good luck for this challenge 😉

  0