Skip to content
Submitted 7 months ago

Responsive Huddle Landing Page HTML & CSS

yas-avocad•380
@yas-avocad
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Coloring the icons, but ended up using a filter and a website that gave me the inverse coloring key.

What specific areas of your project would you like help with?

I'm still having problems with the backgrounds. I'm better at adding and positioning them, but the responsiveness is really weird. How do I make the position of the background images absolute?

Community feedback

  • Koda👹•3,830
    @kodan96Posted 7 months ago

    Well, you can try to play around with the values. Maybe try to center the background with background-position: center and set background-attachment: fixed to it as well.. I always have a hard time with this asw.

    1
  • Koda👹•3,830
    @kodan96Posted 7 months ago

    hi there! 🙌

    You can use the background-position property to position your background-image within the frame of the element.

    It accepts logical values like top, bottom, center but you can offset your background as well with background-position-x and background-position-y.

    .cool-element-with-bg {
background-image: url(/images/sick-background.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: top right;
}

    this would position a background-image to the top right corner of the elements frame.

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    1
    yas-avocad•380
    @yas-avocadPosted 7 months ago

    @kodan96 Thanks! So I'm trying this out and it's not doing what I want. The background stretches with the screen. In this exercise, it doesn't look good when going from mobile to desktop.

    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