Profile Card Component

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 and image-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!

👾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 used margins and position relative to give the container its alignment, this works but is really tricky to control all the content. My advice for your is to use flexbox to create this alignment. To make this alignment, first of all put min-height: 100vh to the body 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 and display: flex e flex-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!