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 component - Made with simple Html & Css

@maarten-mobron

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


• How do I get the attribution to center? It's now slightly of centered to the right.

• Any tips or tricks are welcome.

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Maarten,

You've smashed it, really well done!

A few thoughts:

  • I add transition: ease .3s; to your <button> styles for a smooth hover affect
  • I think you just need to remove a few properties and keep it simple:
.attribution {
    /* bottom: 0; */
    /* position: fixed; */
    /* width: 100%; */
    text-align: center;
    font-size: 0.6875rem;
    margin-top: 50px;

Marked as helpful

0

@maarten-mobron

Posted

@darryncodes Hey, Thanks for the tip! I've implemented it :) For the '.attribution' I found when I add 'left: 0;' it gets rid of the small amount of free space and centers it perfectly.

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