Skip to content
Submitted over 3 years ago

Mobile first - added animations for fun on desktop

Mallory•120
@azerroth11
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I hope you like my solution, I tried to have a final result as close to the original as I could.

I also added some slight animations using CSS only for the cards on the desktop version so I could make the project mine and even funnier to code ! As always, I'm looking forward to your feedback to keep improving :)

Thanks in advance for your suggestions !

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Mallory! 👋

    Congrats on finishing another challenge! Your solution looks very good and also responds well. I really like this hover effect. Here's my few tips:

    • You should wrap your main heading into one heading element instead of using two. If you want to style some text within that heading other way just wrap that part into <span> element. Like this - <h1>Reliable, efficient delivery <span>Powered by Technology</span></h1>
    • Try to make your page more responsive. Now you have only version for mobile and desktop, nothing between. For example on tablet resolution yo can use two columns. Use Responsive Design Mode to see how your website behaves on different devices. To toggle it press CTRL+SHIFT+M on Firefox, and CTRL+SHIFT+C on Chrome.

    Good luck with that, have fun coding! 💪

    1

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