Submitted 3 months ago

Card with hover interactions

Jacqueline Bento•20

@jacquebento

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I enjoyed practicing hover and I want to learn more about focus.

What challenges did you encounter, and how did you overcome them?

I had difficulty implementing focus because in my research it was only used in inputs, so I was unable to apply it to the project and I hope to understand this better in the future.

What specific areas of your project would you like help with?

Please let me know if I did something wrong.

In what element can I add the focus property?

Community feedback

Marzia Jalili•4,250

@MarziaJaliliPosted 3 months ago

Hey there!

Some sort of suggestion:

set the code below in the body selector to center the card:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Make sure that the card is the only child element of the <body>.

If not wrapp everything nested inside <body> with the <main> element. It will look something like this:

<body>
  <main>
    <!-- every element nested inside -->
  </main>
</body>

Other than this your solution is spot on!

Keep up the grind🫡

P
Boris•3,990
@makogeborisPosted 3 months ago
Great work, some suggestions

All content should be wrapped within landmarks. Wrap a main tag around the .card and a footer for the .attribution

Change the width of the .card to max-width and should be defined in rem

It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.

Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

Font-sizes should be defined in rem

Hope this helps, Good luck!
0
P
Serhii Derkach•50
@SerhiiDerPosted 3 months ago
all good mate, good job
0

Please log in to post a comment

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