Skip to content
Submitted 3 months ago

Responsive landing page using CSS custom properties

Eli Silk•660
@elisilk
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

What are you most proud of, and what would you do differently next time?

I'm most proud of figuring out how to implement a solution for the hero image, which changes from one image to two and has some absolute positioning. Would love to hear how others implemented this challenge and if people have critiques of the way I did it.

Community feedback

  • edpau•440
    @edpauPosted about 2 months ago

    Nice code. I love your readme, there are a lot of resources, they are very helpful to me.

    I also spent a lot of time on the hero images, I want to make the hero image equal cropping on window resize. I am happy to see you did it on yours. I used Flexbox to handle mine, I tried to use position: absolute as well.

    I thought Flexbox is cleaner, required fewer lines to begin with. But I ended up adding two extra divs around the hero contents, one for the mobile hero images and one for desktop. I am looking for a better solution, please comment on my code.

    Below is the link I learn how to resize an image cropping it equally on each side with CSS. https://stackoverflow.com/questions/35847458/how-to-resize-an-image-cropping-it-equally-on-each-side-with-css

    1
    Eli Silk•660
    @elisilkPosted about 2 months ago

    Hi @edpau,

    Thanks for your comment. That is a super clever way to go about the hero image. I love it.

    I just looked at your solution and made a comment.

    Eli

    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