Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

using css flexbox

Enis67 140

@Enis67

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


didnt know how to handle with background images need help and advice

Community feedback

HelalAbood 200

@HelalAbood

Posted

Hello, I guess you need to change your h1 to h3 or h4 for Victor Crest! Try to small the font-size too.

Hope you find this feedback helpful!

0
P
visualdennis 8,375

@visualdenniss

Posted

Hello Enis,

Regarding background, simply remove that div with the img, instead you can have two images with background, e.g.:

Add these to the body itself:

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

Hope you find this feedback helpful!

0

Enis67 140

@Enis67

Posted

@visualdenniss I removed the images with its containers and putted the code that you've written in my css body element, nothing happened.

0
P
visualdennis 8,375

@visualdenniss

Posted

@Enis67 Because you have not adjusted the relative path, looks like you have deployed with github.io, so i guess that causes the issue with background images.

Try this:

  • background: url(https://enis67.github.io/Frontend-Mentor-Profile-card-component/images/bg-pattern-top.svg),url(https://enis67.github.io/Frontend-Mentor-Profile-card-component/images/bg-pattern-bottom.svg);

this has now worked for me.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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