landing page using border radius css specifity

Solution retrospective
While coding I had some issues my images where loading in my vs code but it wasn't loading in my live url
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ecemgo
Some recommendations regarding your code that could be of interest to you.
HTML
In order to fix the accessibility issues:
- You need to replace
<div class="box">
with the<main class="box">
tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly. - Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you need to use a
<h1>
element in the<main>
tag. You can add<h1>
to the title in this way:<h1>Improve your front-end skills by building projects</h1>
element.
CSS
- If you want to center it easily, you can use flexbox in the
body
and if you want, you can give the recommended color to the background in this way:
body { background-color: hsl(212, 45%, 89%); font-family: "Outfit", sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
- then, you don't need to use margin to
.box
. This.box
is the updated version:
.box{ background-color:white ; border-radius: 20px; box-sizing: content-box; max-width: 250px; height: 400px; padding-bottom: 40px; }
Hope I am helpful. :)
Marked as helpful - You need to replace
- @georgebleyer
Hello,
Congratulations on completing this challenge. Here are some tips on how to align your card. In your .body put this code:
display:grid; place-items:center; min-height: 100vh;
You can use Flex Grid to align the card to.
In your code try to use <h1>, <h2> and <p> to have a better code other than use just the <span>
I hope it helped.
Marked as helpful
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