Design comparison
Solution retrospective
Please tell me how to fix bad value problem.
Community feedback
- @efecollinsPosted about 2 years ago
Hello Yashvir Singh, great work you've done here. Thumbs up!
In addition to the corrections @correlucas pointed out. These are some things you could do to fix your project's accessibility and HTML validation issues.
Accessibility
- Add the attribute
role="main"
to<div class="profile">
. This makes your document have one main landmark.
HTML Validations
-
For your images,
bg-pattern-card.svg
andimage-victor.jpg
. Use your internal CSS for the styling, rather than inline. The syntax you used is deprecated. -
Change this
<hr width="100%" height="1px" style="margin-top: 8%;">
to<hr style="margin-top: 8%;height: 1px; width: 100%;">
I hope this helps and I wish you a happy coding journey!
0 - Add the attribute
- @correlucasPosted about 2 years ago
👾Hello Yashvir Singh, congratulations for your new solution!
Nice solution and nice code! I can see that you paid a lot of attention to your code/design. If you don’t mind I’ve some tips for you:
First of all remove some unnecessary div to hold some content and add
<main>
to the block holding everything. I saw that you've usedmargins
andposition relative
to give the container its alignment, this works but is really tricky to control all the content. My advice for your is to useflexbox
to create this alignment. To make this alignment, first of all putmin-height: 100vh
to thebody
to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.BODY { min-height: 100vh; background-color: hsl(185, 75%, 39%); background-image: url(./images/bg-pattern-top.svg) , url(./images/bg-pattern-bottom.svg); background-repeat: no-repeat , no-repeat; background-size: 1500px 1200px , 1250px 1300px; background-position: -600px -600px , 880px 480px; display: flex; align-items: center; justify-content: center; }
✌️ I hope this helps you and happy coding!
0
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