landing page with flex-box

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @ESAUALEX2021, congratulations for your new solution!

  I saw that you;re having some troubles to place the two circles as a background, so I'll give you some tips:

  To add the circles (bottom/top) in the background, the best way is by using background-image to manage it since adding them to the body you make sure it will be under everything, see the properties below and see that the comma inside each properties declare the single modification for each circle separated.

  😎HERE'S YOUR CODE FIXED AND WITH THE CIRCLES POSITIONED

  body {
  
      background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
      background-repeat: no-repeat, no-repeat;
      background-position: top -284px left -9px, bottom -216px right -58px;
      display: flex;
  
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      text-rendering: optimizeSpeed;
      font-family: 'Kumbh Sans', sans-serif;
      background-size: contain;
      background-color: var(--Dark-cyan);
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Esau•80

  @ESAUALEX2021Posted about 2 years ago

  @correlucas thanks, your help helped me

  0