Skip to content
Submitted almost 4 years ago

Mobile first, simple animations (Sass)

Grzegorz Sterczewski•680
@gsterczewski
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any feedback is always welcome. I have some doubts about layout in some resolutions ( e.g .1024 x 1366), since there is a lot of space at the bottom. Also, I'm wondering if those simple transitions that I added doesn't feel out of place.

Community feedback

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

    Hey, there, Grzegorz Sterczewski! 👋

    Good job on this challenge! 👏 Your solution looks good and is responsive! 👍

    I have just a few more suggestions to improve your solution. 😉

    • Changing the value of the background-size property from contain to cover in the desktop layout of the site will ensure that the background image always fills up the entire area of the viewport.
    • Adding a max-width to the main container or wrapper will prevent the content of the page from stretching out too far on extra-large screens.

    Keep coding (and happy coding, too)! 😁

    1
  • Web Frog•1,840
    @MasterDev333Posted almost 4 years ago

    Hello, Grzegorz! Nice solution. I love your animations. One suggestion, it would be great if you increase some padding for social icons. Now, it's a little difficult to select. Anyway, it's really great. Look forward to seeing other solutions from you. Happy coding~ :)

    1
    Grzegorz Sterczewski•680
    @gsterczewskiPosted almost 4 years ago

    Hello @MasterDev333 Thank you for checking in. I will implement your suggestion as soon as I can. Great tip! Cheers!

    0
  • tediko•6,680
    @tedikoPosted almost 4 years ago

    Hello, Grzegorz! 👋

    Congratulations on finishing another challenge! Your solution responds quite well! What i would suggest is:

    • On mobile resolutions i would change padding on your .hero element. Maybe something about padding: 0 1.5rem.
    • Alternative text on .hero-img says nothing to user. It is better to leave alt attribute empty for decorative images.
    • I would use anchor tag for .hero-btn instead of button. Buttons are for actions and your Register button will navigate user to another page.

    Good luck with that, have fun coding! 💪

    1
    Grzegorz Sterczewski•680
    @gsterczewskiPosted almost 4 years ago

    Hello @tediko ! Thanks for taking the time to check my soulution and for the tips. I've implemented your suggestions. Cheers!

    0

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