Submitted over 1 year ago

Profile card component

maroiane• 150

@maroiane2

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

_nehal💎• 6,710

@NehalSahu8055

Posted over 1 year ago

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

To properly center the card on the page.
USING FLEXBOX

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

USING GRID

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

Use max-width instead of width to make your card responsive.
You forget to add cursor: pointer; on button. It will be more user-friendly to add it.

I hope you find this helpful.

Happy coding😄

Marked as helpful

maroiane• 150

@maroiane2

Posted over 1 year ago

@NehalSahu8055 Oh thank you I will take advantage of that

_nehal💎• 6,710

@NehalSahu8055

Posted over 1 year ago

Also

➨ Use Semantics for proper design of your code.

<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>

or alternatively

<body>
<div class="container" role="main">
/html code goes here: 📃
</div>
</body>

I hope you find this helpful.

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