Design comparison
Solution retrospective
hi , this my first challenge am not sure with the text are i dont found the right font can much the same in the example
Community feedback
- @AshongAbdallah06Posted 10 months ago
Hi. You can copy this link into your html file
***<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;400;700&display=swap" rel="stylesheet">***And then in the body, call
font-family: 'Outfit', sans-serif;
.Marked as helpful2 - @danielmrz-devPosted 10 months ago
Hello @aziz712!
Your solution looks great!
I have a suggestion for improvement:
- For semantic reasons, use
<main>
to wrap the main content instead of a<div>
.
π This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
Marked as helpful1@aziz712Posted 10 months agohello @danielmrz-dev thank you for your help its so important for me just can you explain more please why main
1 - For semantic reasons, use
- @ledesmxPosted 10 months ago
Hi @aziz712 π
Great job on your solution!
Here are some recommendations for you:
- There is a better approach to try to center the card. You can use Flexbox along with
justify-content: center;
andalign-items: center;
to center anything. For this approach is necessary to set the height to 100% of the viewport, I suggest usingmin-height: 100vh;
to achieve this, like so:
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; /*Add this*/ }
- Make sure to remove the
margin-top
of the.box
. - Lastly, I suggest adding a
box-shadow
to the.box
to add a subtle pretty shadow surrounding the card.
In summary, I suggest adding this code:
body { min-height: 100vh; } .box { box-shadow: 0 5px 15px 10px rgba(0, 0, 0, .1); }
And removing this one:
.box { margin-top: 10%; } @media only screen and (max-width: 375px) { body { margin-top: 110px; display: flex; flex-direction: row; } }
I hope this helps a little.
Well done for the rest.
Marked as helpful1 - There is a better approach to try to center the card. You can use Flexbox along with
- @BlackpachamamePosted 10 months ago
Greetings! you have done a great job π
π Some accessibility and semantics recommendations for your HTML
- To improve the semantics of your HTML, you can change your
<div class="box">
to a<main class="box">
- I recommend doing a small
reset
to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector*
, with this you will make your site look the same in all browsers - I leave you the task of researching the
reset CSS
and thebox-sizing: border-box
- If you didn't apply the reset, you can add
margin: 0
to yourbody
, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply themargin
again using media querys - Instead of using
margin
to center your content in the center of the screen, you can use theflexbox
properties in thebody
:
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Marked as helpful0 - To improve the semantics of your HTML, you can change your
Please log in to post a comment
Log in with GitHubJoin 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