Profile card component using SASS

Please log in to post a comment
Log in with GitHubCommunity feedback
- @Bayoumi-dev
Hey Siddhi, It looks good!...
- I suggest you put the status of the profile card into the
list item
to add moresemantics
to your project,Div
's don't do much for semantics but a list is much more meaningful..:
<ul class="stats"> <li><span class="stats-num">80K</span>Followers</li> <li><span class="stats-num">803K</span>Likes</li> <li><span class="stats-num"> 1.4K</span>Photos</li> </ul>
Hope this is helpful to you... Keep coding👍
Marked as helpful - I suggest you put the status of the profile card into the
- @najeeb-anwari
Hello Siddhi Nandaniya, I hope you are doing great. Your design is not bad but here is what I think you should do to solve some of the issues.
- The images takes up to much space because they are so big
- You need to set the svg images as the background of the body tag instead of making it absolute.
- Set the
backgournd-image
usingurl()
function. Set size of the image usingbackground-size
and also position the images as the required design usingbackground-position
. - To change mobile background images to desktop background images, use media queries.
- If you want , you can check out my solution to understand how I did it. https://www.frontendmentor.io/solutions/profile-card-component-using-flexbox-83ibOV7fgW
I hope this is helpful. 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