In this article, we'd solve a CSS battle challenge [click here for this exact challenge].

To solve this challenge, we'd split the process in 3 stages.

1 the background

The colours to be used in here are already provided, so our duty is to use them appropriately. For this design, our background colour is "#DA30D4". To handle the background, we'd use the "body" tag to handle the background.
We'd be using flex to make sure that everything is centred, both vertically and horizontally.

body{
    background-color: #DA30D4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }

Add the above styles in the styles tag

2 Create a wrapper that holds the four circles.

In this section, go ahead and add a class name of 'wrapper' in the existing DIV, then 4 children

<div class='wrapper'>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
</div>
<style>
  body{
    background-color: #DA30D4;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrapper{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr ;
    gap: 20px;
  }
  .circle{
    background-color: #0C0C49;
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }
</style>

copy and paste the section for this needed part

3 the last part of this is the box at the outermost layer. Like, the top level.

For this section, set the position to absolute, this will permit the box to sit over the wrapper as the items have all been assigned to be centred by the body. Change the colour as required, and you've got a catch in your hook

<div class='wrapper'>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
</div>
<div class='box'></div>
<style>
  body{
    background-color: #DA30D4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  .wrapper{
    width: 100px;
    height: 220px;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr ;
    padding: 1px;
    gap: 20px;
  }
  .circle{
    background-color: #0C0C49;
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }
  .box {
    width: 120px;
    height: 120px;
     background-color: #DA30D4;
    position: absolute;
  } 
</style>

Here is the result from this snippet

This is the end of this article.

If you have this final snippets posted in, you are ready to hit the ** submit and smile at your 100% **

You can also choose to watch me code this live on youtube here
Also do well to drop a like and subscribe, here and on youtube.
You're done.
Challenge solved and defeated.

Stay tuned for more articles like this, as we go through and debug some bugs and some errors in our day-to-day development. Both simple and complex bugs.
Cheers!!😊