Submitted over 3 years ago

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

tediko• 6,580

@tediko

Preview site View code

This is a solution for...

Huddle landing page with curved sections

HTML
CSS

2junior

View challenge

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

@ApplePieGiraffe

Posted over 3 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! 🎄

tediko• 6,580

@tediko

Posted over 3 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!

Abhik• 4,840

@abhik-b

Posted over 3 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 🚀

tediko• 6,580

@tediko

Posted over 3 years ago

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

Please log in to post a comment

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