Flexbox and absolute position

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello Nira!

  Your solution looks great!

  I noticed that you created separate containers to create the background pattern. That works and it's very creative!

  But if you want to see another approach with fewer code lines, here it is:

  • Apply this to the body:

    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;
  

  While doing this project, I learned that it's possible to use more than one image at the same time as backgroung and also manipulate their position individually.

  I hope it helps!

  Other than that, you did an excelent job!

  Marked as helpful

  1

  ---

  

  Nira•130

  @dhafindzahinPosted 11 months ago

  @danielmrz-dev

  Wow that's really cool!

  Seem to be resposive to because it's using the viewport unit. I definitely need to learn this, thanks you so much!

  1
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  Hey, it looks great to me! I think you did it correctly. In my browser window it looks fine, when I use the browser element inspector it may move a little when I resize the screen width. I think this is because of the way you placed the background images.

  In any case, it is still a correct solution, I leave you my solution in case you want to see how I solved it.

  Marked as helpful

  0
• 

  Nira•130

  @dhafindzahinPosted 11 months ago

  TBH I should have spent more time on the stat section, looking at that few pixel different really bother me🙄.

  0