Skip to content
Submitted over 1 year ago

Meet Landing Page

Lucas Marchesoti Franco•270
@lmarchesoti
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 almost got it XD

I know of one code smell and one bug:

  1. I couldn't load the footer image from CSS to apply the transparency to the correct image, so I added all three and hid the ones I wasn't using.
  2. The second section separator will stay below the footer. I tried to use absolute positioning but it didn't work :/

I'd be thankful if anyone could help me with either of these points!

Community feedback

  • markus•2,250
    @markuslewinPosted over 1 year ago

    Did you try the code inside the comment? It looks good to me, except the selector is probably meant to be written footer::before.

    Usually, you'd write responsive stylesheets mobile-first, and then add the tablet/desktop rules with media queries. That way, you don't have to repeat shared styles in each stylesheet:

    footer::before {
/* mobile declarations */
}

@media (min-width: 768px) {
footer::before {
/* tablet declarations */
}
}

/* desktop */
@media (min-width: 1300px) {
}

    You could have the section separator stay where it is, but with a larger z-index than the footer. Don't forget to give the circle a background color, so that you can actually see it on top of the footer!

    .section-divider {
position: relative;
z-index: 1;
}

.section-number {
background: white;
}
    Marked as helpful
    1
    Lucas Marchesoti Franco•270
    @lmarchesotiPosted over 1 year ago

    @markuslewin ahhh! I had tried that! But I didn't give the circle a white background, so I couldn't see it :(

    Thanks for pointing that out to me! You're awesome! :)

    And I'll try the mobile-first approach on my next project!

    1
    markus•2,250
    @markuslewinPosted over 1 year ago

    @lmarchesoti Haha, I did the same 😁

    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