Skip to content
Submitted about 1 year ago

Responsive Huddle Landing Page HTML & CSS

yas-avocad•360
@yas-avocad
A solution to the Huddle landing page with a single introductory section challenge
Preview (opens in new tab)Code (opens in new tab)

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?

Code

Please log in to post a comment

Log in

Community feedback

  • Koda👹•3,830
    @kodan96

    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.

  • Koda👹•3,830
    @kodan96

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

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