Submitted over 2 years ago

Profile Card Component

Jay• 260

@Hyuuga81

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This was an interesting challenge. Couldn't figure out the background pattern. Any advice? Thanks in advance.

Community feedback

xZAYEDx• 250

@xZAYEDx

Posted over 2 years ago

Read my code in my GitHub, you will understand how I added the background pattern.

-- Link to my GitHub (https://github.com/xZAYEDx/profile-card-component-main

-- The code I used 👇🏽

-- background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: right 52vw bottom 35vh, left 48vw top 52vh;

Marked as helpful

Jay• 260

@Hyuuga81

Posted over 2 years ago

@xZAYEDx Worked perfectly man! Thanks for the plug. I understand what was affected. Will check out your code and mdn to figure out how it worked. Appreciate it.

xZAYEDx• 250

@xZAYEDx

Posted over 2 years ago

@Hyuuga81 your most welcome!😀

Naveen Gumaste• 10,460

@NaveenGumaste

Posted over 2 years ago

Hello Jay ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

Always use h1 first and then h2, h3 and so on

Here is how to add bg img properly👇

background-image: url("add the file location here");
 background-repeat: no-repeat;

happy Coding😀

Marked as helpful

Jay• 260

@Hyuuga81

Posted over 2 years ago

@Crazimonk Thanks for the feedback. I understand about the heading order now and am integrating it on my next project. Much appreciated.

Please log in to post a comment

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