Profile Card Component Using HTML & CSS - Flex Layouts
Design comparison
Solution retrospective
Hey There I Have Completed This Project But Backgrounds And Other stuffs like profile merge in background along with footer contents were little messy.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
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 thebackground 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!
0 - @rohitd99Posted over 1 year ago
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 singleh1
heading and the headings must always be in order fromh1
throughh6
in order. I would suggest usingh1
for the name but for the footer-itemsp
element should suffice. Secondly you've used theb
element , I'm not sure if it is deprecated but I think that you can addfont-weight
in the style and use ap
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
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