Our reporter did not find any issues in this project! 🎉
Submitted
Landing Page With Responsive Margins/Padding And Gradient Animations
P
ApplePieGiraffe• 30,105
@ApplePieGiraffe
Design comparison
Reports
Accessibility report (0)
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
Rahimullah Sharifi• 155
@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
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!