Submitted about 3 years ago

3-column-preview-card-component-main

Chevalier Antoine• 670

@SeyBoo

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello !

Any idea on how i can improve it ?

Community feedback

Grace• 27,670

@grace-snow

Posted about 3 years ago

Looks nice, just a few issues with the html

remove empty ids
you can only have one h1 per page
those buttons should be anchor tags

If you place transparent border on the buttons nothing will move when you click them and the white border appears. A small thing but nice to stop that little jump

Hope these help. Nice work!

Chevalier Antoine• 670

@SeyBoo

Posted about 3 years ago

Hey thanks for your report i completly forget too remove the id ^^.

I wasn't know for the h1 i make them h2 instead.

I thought that a button was more easy to style

Grace• 27,670

@grace-snow

Posted about 3 years ago

@SeyBoo it's not about styling it's about semantics. Buttons are for actions like opening a modal, submitting a form etc, making a change to data or the dom on current page. Anchor tags are for navigation.

In this case, learn more would almost certainly be an anchor tag (link)

I hope that clarifies

Chevalier Antoine• 670

@SeyBoo

Posted about 3 years ago

Oh okay thanks you i really dont thinks about it !

It's updated and i know that for my future project thanks a lot !

Rayane• 1,935

@RayaneBengaoui

Posted about 3 years ago

Hello Chevalier Antoine,

Congrats for completing the challenge ! 😁

I'd like to suggest :

When hovering your buttons, the content is pushed away and the card extends. It's because you add a border to the button when it originally doesn't have one. The border is part of the 'Box-model', so to avoid this behavior you could add border: solid 2px hsla(0, 0%, 100%, 0.75) to your buttons.
Here in the design the text is spaced, you could do this by using the property line-height.
Also, you could add the property transition to your buttons to make the transition smoother and cursor: pointer to make them look clickable.

Overall, well done for the challenge and happy coding ! 😃

Chevalier Antoine• 670

@SeyBoo

Posted about 3 years ago

@RayaneBengaoui Hey thanks for your return !

Good idea for the border i fixed it thanks !

I add more line-height 1.25rem -> 1.5rem.

For the button i forgot to add the cursor ^^. And for the animation good idea i wasn't on the design so i dont dare to do.

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