Skip to content
Submitted over 1 year ago

Responsive Meet Landing Page

Bogdan Kim•780
@semperprimum
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I would greatly appreciate any feedback you may have!

  • Was deciding if i should use hero images as image elements or as background images. Decided to go with background images
  • Other difficult part was the blue overlay on the footer image. I made it by creating a stacking context and setting a bg image opacity to 0.1. Didn't take me too long, but I'm proud of how it turned out :)

Community feedback

  • Gustavo Gutiérrez•150
    @gustavo2023Posted 11 days ago

    Hi, your solution looks great!

    Here are a couple of suggestions:

    • The media queries for min-width: 60em can be combined to reduce redundancy.
    • Combine selectors with shared styles to reduce repetitions. For example, .btn--primary and .btn--secondary can share the transition: background-color 0.2s ease; property.

    These adjustments will help in making your CSS more maintainable and readable.

    Keep up the good work.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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