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

One more

@Jorggyh

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Oi Jefferson, tudo bem? Parabéns pelo desafio!

Vi que você aplicou o background svg usando duas pelo footer com <img> mas nesse caso o melhor jeito seria através do body pelo css com background-image e importar os dois circulos.

Você pode adicionar esses dois círculos como plano de fundo, adicionando-o ao corpo com duas propriedades chaves, background-image e background-position, observe que a vírgula dentro de cada propriedade declara a única modificação para cada círculo separado.

body {
    background-color: hsl(185deg, 75%, 39%);
    background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top -500px left -400px, bottom -700px right -250px;
}

👋 Espero que essas dicas tenham sido úteis e continue codando!

Marked as helpful

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