Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Landing Page With Responsive Margins/Padding And Gradient Animations

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! πŸŽ‰

ApplePieGiraffe’s questions for the community

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! πŸ‘

Community feedback

@Octagon-King

Posted

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.

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@Octagon-King

Hey, Octagon-King! I suggest trying to use CSS background images to add and position the curvy background in the hero section of this challenge. If you add it to the section containing the hero image and text, you can add background-position: bottom to make the background stick to the bottom of the section and background-size: cover to ensure that it always covers the entire width of the screen. πŸ˜‰

Hope that helps. πŸ™‚

(And let me know if you have any more questions.) πŸ‘

0

P
Matt Studdertβ€’ 13,591

@mattstuddert

Posted

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! πŸ‘

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@mattstuddert

Thank you very much!

Using min-width rather max-width really helped me think about how my page would look on a smaller screen before I got to thinking about the desktop layoutβ€”which was good for a change for me. I'd say this project most helped me learn about making my sites look better on more screen sizes in neater, more concise code. 😊

I'll do as you suggested and take a look at the solution report and try to clear it up (something I sometimes forget to do). 😁

1

P
Matt Studdertβ€’ 13,591

@mattstuddert

Posted

@ApplePieGiraffe awesome, yeah that's one of the things I like about working mobile-first as well. Looking forward to seeing your next one!

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!