Skip to content
Submitted about 3 years ago

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

Elena Martinez•80
@nenamartinez
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

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!

Community feedback

  • Gabriel Sales•120
    @gabriel-saleshPosted about 3 years ago

    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
    2
  • Elena Martinez•80
    @nenamartinezPosted about 3 years ago

    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!!

    0

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