Submitted about 3 years ago

use of display flex for the layout of elements

Elise Rousseau• 685

@SarahHenriette

Preview site View code

This is a solution for...

Huddle landing page with curved sections

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello ! 👋

I did this project over a day. I am open to all suggestions 🙂

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 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)! 😁

Elise Rousseau• 685

@SarahHenriette

Posted about 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 🙂

InduRajput• 120

@InduRajput

Posted about 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??

Elise Rousseau• 685

@SarahHenriette

Posted about 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 😉

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord