Submitted 8 months ago

Profile Card component usando flex

João Paulo• 70

@JoaoPaul-S

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

A colocação do background foi um pequeno desafio no começo, tanto que ele não está idêntico ao que o projeto pede, talvez eu devesse ter mexido mais no background position? ter utilizado o background size de forma diferente? Está certo ter colocado duas background images? Agradeceria um feedback sobre isso.

Placing the background was a bit of a challenge at first, so much so that it's not identical to what the project requires, maybe I should have messed with the background position more? Have you used a background? Is it okay to have placed two background images? I would appreciate feedback on this.

Community feedback

raya• 2,850

@rayaatta

Posted 8 months ago

Hello 👋JoaoPaul-S, your solution is awesome 😉.

The backgrounds can be be a bit confusing 😒 but they are possible.

Here's how you can get the solution looking closer to the design. Replace

background-image: url(Images/bg-pattern-bottom.svg);
    background-position: top 380px left 590px;
    background-image: url(Images/bg-pattern-top.svg);

With

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

To the css for body.

I hope this helps 🙃

Happy coding ✌️

Marked as helpful

João Paulo• 70

@JoaoPaul-S

Posted 8 months ago

@rayaatta Really quite confusing, I had already tried to include two images in the background in the same property but it didn't work, the whole issue of positioning the background is strange, but this helped a lot. I've already made the necessary modifications, although I think my work on the background it has become more charming lol, really, thank you very much, this will still help me a lot in the future.😊✌

raya• 2,850

@rayaatta

Posted 8 months ago

I am glad I helped@JoaoPaul-S

Daniel 🛸• 44,230

@danielmrz-dev

Posted 8 months ago

Fala @JoaoPaul-S!

Seu projeto ficou ótimo!

Esse background com os círculos é um pouco difícil mesmo, mas você pode fazer ele desse jeito aqui:

  background-color: var(--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 52vw bottom 35vh, left 48vw top 52vh;

Espero que ajude!

Fora isso, você fez um ótimo trabalho!

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