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

3 Column Preview Card with Flexbox and Button Animation

Lars 60

@htmlars

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any advice for clean code, accessibility are welcome.

Community feedback

Daniel 860

@Ghravitee

Posted

Hello #Lars, congrats on completing this challenge. All you have to do to change the text color is to add the "color" property to the anchor tag itself which should have a class of it's own, preferably button. Before you do so, I'll advice the following:

  • For accessibility reasons, don't nest your anchor tag inside a button, screen readers won't know what it is. Your code will thus look like so: <a class="button" href="#">Learn More</a> In your style sheet simply make your previous button tag a class that corresonds to the new class button (just add a dot to the already existing button tag), this will give your anchor tag all the properties of the button. For hover: .button:hover { background: transparent; color: #fff; }

  • For responsiveness, avoid using definite heights and widths. You should allow your content determine the size of your cards. Also avoid using units like px as much as possible. Instead make use of rems and ems

  • Make your code more effective by using classes for your paragraphs and headings.

I hope you find this helpful. Happy coding

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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