Skip to content
Submitted almost 3 years ago

Meet Landing Page with ReactJs and TailwindCSS

react, tailwind-css, next
James•130
@jte0711
A solution to the Meet landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I tried to make it responsive according to the Figma file, but when I go for a smaller size for laptop size, it breaks (the picture especially). How do you manage the image used in the hero so that they can adjust according to the resizing?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Emmilie Estabillo•5,580
    @emestabillo

    Hey James, nice job! Have you tried object-fit: contain to control the stretch of the images?

    A few other things I noticed:

    1. The document is missing its top level heading. The large header text should be an h1
    2. Interactive elements should be a tags or buttons instead of divs
    3. I personally would increase the breakpoint for desktop. The 'What is it' button and the 4 images in the next section look like they're breaking layout at 1024px.
    4. The footer text should be left-aligned on desktop.

    Hope this helps!

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