Submitted almost 3 years ago

Mobile First Responsive Profile Card Component

@christian-prasetya

A solution to the Profile card component challenge

Solution retrospective

The most difficult part of this project is building the background image, everytime it exits from the devtools, the background keep missing, is there any advice about this?

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Melvin Aguilar 🧑🏻‍💻•61,020
@MelvinAguilar
Posted almost 3 years ago
Hi @christian-prasetya 👋, good job on completing this challenge! 🎉

In your SCSS file update the path of the images to this:
```
background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
```
Remember that when you compile styles from SCSS to CSS, the referenced styles file is in another location (/dist/style.css).

Also, remove the background-size and you can use these positions to place it like in the design:
```
background-position: right 52vw bottom 35vh, left 48vw top 52vh;
```
Good job, and happy coding!
Marked as helpful

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