Skip to content
Submitted almost 5 years ago

Landing Page With Responsive Margins/Padding And Gradient Animations

ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Fylo dark theme landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey, everybody!

This was an exciting challenge from which I learned a lot! 😃

I tried adding to the responsiveness of this site by setting many of the margins/paddings in percentages or vw units and only using min-width in my media queries (for my first time).

I also learned how to color the link text with a gradient (courtesy of the clip-path property 😁) and made this subtle but awesome gradient-animation-hover-effect on the buttons using pseudo-elements! 🎉

Feedback is definitely welcomed and appreciated!

(Also, if you would suggest any improvements to my actual code that would be cool).

Happy coding! 👍

Code

Please log in to post a comment

Log in

Community feedback

  • Rahimullah Sharifi•155
    @Octagon-King

    Love How you have done this project but the only thing I'm stuck on is the dark background under the curve-bg image. I have tried many ways but couldn't make it to work. when resize it just goes up and doesn't stick under the curve-bg image. I don't know what I'm doing wrong. The only way I could have think that work will be media queries which I have to use for every px which gonna take a lot of queries.

  • Matt Studdert•13,611
    @mattstuddert

    Love the extra details you've added on this challenge! 😍 What would you say were your major learning outcomes from completing this project? How did you get on with using min-width instead of max-width media queries?

    Your code looks good overall and your layout looks great on the responsive side of things. I'd recommend taking a look at the solution report and trying to clear up the accessibility errors.

    Awesome work! 👍

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