Skip to content
Submitted almost 4 years ago

Responsive landing page using HTML/CSS and also grid, flexbox

Elena Martinez•80
@nenamartinez
A solution to the Meet landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My first premium challenge! Here are the two things I would really like help with:

  1. The background-image properties and responsive design-- how can I make it look right? I will be looking at other people's solutions to try and figure it out but feedback here would be great too.

  2. The number lollipops. I managed to do it by using a 'before' pseudo-element and a vertical bar special character, but it doesn't look the same as the design. (Too thick, short). How to accomplish this?

Thanks all!

Code

Please log in to post a comment

Log in

Community feedback

  • Gabriel Sales•120
    @gabriel-salesh

    For the number lollipops, instead of giving the ::before element the vertical bar special character, you can leave the content empty and give it height, width and a background color, that way you can have control over how thick and long you want it to be. Like this:

    .number::before {
content: "";
background-color: grey;
height: 100px;
width: 1px; /* or however thick you want it to be */
}

    Cheers.

    Marked as helpful
  • Elena Martinez•80
    @nenamartinez

    That's much easier than what I did, for some reason it didn't occur to me to just set a size and background! Thank you so much, I'll be fixing the code! Thanks!!

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