Profile Card Component Using HTML & CSS - Flex Layouts

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

BACKGROUND iMAGE 📸:

• Looks like the background images has not been set yet, So let me share my css snippet which helps you to easily apply the background color with the background svg they provided to place perfectly as same as design.

• Add the following style rule to your css, after completing these steps you can experience the changes.

body {
background: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
background-position: right 52vw bottom 35vh, left 48vw top 52vh;
background-repeat: no-repeat, no-repeat;
background-color: hsl(185deg, 75%, 39%);
}

• Tip, Don't forget to generate a new screenshot after editing the css file

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hi Ragu-The-Developer

Congrats on completing the challenge 🎉.

I've found that you have used multiple h1 mainly for the name, and in the footer. Generally for each page there must only be a single h1 heading and the headings must always be in order from h1 through h6 in order. I would suggest using h1 for the name but for the footer-items p element should suffice. Secondly you've used the b element , I'm not sure if it is deprecated but I think that you can add font-weight in the style and use a p element instead. Also if you want the image to stay on top of the top-background of the container as in the challenge you can add the following properties:

.profile {
position: relative;
bottom: 50px;
display: flex;
justify-content: center;
border-radius: 50%;
border: 5px solid white;
margin-left: 35%;
}

Hope it helps