Skip to content
Submitted about 4 years ago

Mobile first Huddle landing page curved seciton using BEM, Sass, JS

P
tediko•6,680
@tediko
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with curved sections
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello👋!

I ended up placing waves backgrounds in HTML. I tried with pseudo elements but because bg image was stretching, position of backgrounds also was changing and i couldn't position it like i would like to. I know i could use just background property to put them in, but for first background (wave has transparent background) for about__card when i simply put it as background the image and position it on top of that container background has same color as image, so it isn't visible. Instead i could place this bg on .stats container and make it background-position: bottom but i didn't want to put background of one section in other section css. No specific questions but any additional feedback will be appreciated!

Thanks! 😁

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    Hey, wonderful job, once again, tediko! 🙌

    Everything looks great and responds very nicely! 👏 I really like the "shake" animation for the social media icons in the footer of the page! 🤩

    One tiny suggestion I might give is to move the bottom background image (the one just above the footer) down by 1-2px (using a negative margin-bottom or something) to prevent a thin white line from appearing between the background image and the background of the footer when the width of the screen decreases (at least, in Chrome). I remember running into the same issue, too, when I completed this challenge, and IDK why! 🤪

    Keep coding (and happy coding, too)! 😁

    And happy holidays! 🎄

    1
    P
    tediko•6,680
    @tedikoPosted about 4 years ago

    @ApplePieGiraffe Thank you for your feedback. I work on Firefox so i didn't see it, but you're right and there is a issue on Chrome, i'll fix it! ;) Happy holidays, too!

    1
  • Abhik•4,840
    @abhik-bPosted about 4 years ago

    Hello Tediko 👋 , Your solution is just excellent 👏👏

    • scroll based animations are just fantastic,
    • hover states and hover exit states for those cta buttons are amazing🙌
    • it is very responsive
    • your code is very clean

    Excellent job, Keep contributing these awesome solutions 🚀

    1
    P
    tediko•6,680
    @tedikoPosted about 4 years ago

    @abhik-b Thank you for your reply! :)

    1

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