Submitted over 2 years ago

Profile card component using HTML / CSS

accessibility, node, semantic-ui, stylus

Aadarsh Rai•20

@aadarsh-rai

A solution to the Profile card component challenge

Preview Code

Solution retrospective

Any tips to make this code even better... especially I wanted to make the background top - bottom pattern responsive but I didn't know how to do that And also I did not knew how to present that inner card layout so, I presented div using background color instead of the pattern card layout.

Any feedback you will provide me will be helpful for my growth towards my Frontend developer journey... Thank you!

Code

Please log in to post a comment

Community feedback

Karrar Hussein•220
@Karrar-Hussein
Posted over 2 years ago
Nice solution, for your card image instead of using a div with a background color you just need to add an img tag with the image provided <img src="bg-pattern-card.svg"> and give it width: 100% and also don't forget to add an overflow: hidden to your card container to keep the edges round.

And for your circles pattern rather than adding them in html you just need to set them as two background images and position them with the right values using the background-position property, it should be something like this:
```
body {
  background-color: var(--clr-Dark-cyan);
  background-image: url(images/bg-pattern-top.svg),
                    url(images/bg-pattern-bottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: right 49vw bottom 45vh, left 49vw top 50vh;
}
```
That should fix your problems✨

Happy coding😁🔥
Marked as helpful
Aadarsh Rai•20
@aadarsh-rai
Posted over 2 years ago
I do not know much about the background property.... I did as you told me and it worked... Thank you very much for your help... ^_^

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