CSS Battles: 100% match at daily target (28/06/2024)

It has been a while since I've used some minutes from my side job to solve daily targets from CSSBattles, it's quite relaxing and fun drawing those different and colorful designs. Usually, I have less than thirty minutes to complete the challenge and today I got a 100% match.

Here's the source code:

<div class='container'>
  <div class=rectangle-1></div>
  <div class='rectangle-2'></div>
  <div class='rectangle-3'></div>
  <div class='rectangle-4'></div>
</div>
<style>
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  .container {
    width: 100%;
    height: 100%;
    background-color: #6592CF;
  }

.rectangle-1, .rectangle-2, .rectangle-3, .rectangle-4{
    background-color:#243D83;
    position: relative;
}

.rectangle-2,.rectangle-4{
    width:110px;
    height:150px;
}

.rectangle-1{
  width:280px;
  height:90px;
  left:60px;
}
  .rectangle-2{
    top:60px;
    left:60px;
  }
  .rectangle-3{
    width:60px;
    height:90px;
    bottom:30px;
    left:170px;
  }
  .rectangle-4{
    left:230px;
    bottom:180px;
  }
</style>

And that's the result I got:

Since I started looking for other users' solutions I've seen them using properties like box-shadow, as you can see in the video below:

It's important to note that while my solution got almost 800 characters, others who used box-shadow had 200 characters maximum, so my goal for the next week will be to learn how to use box-shadow for drawing shapes and improve my daily target performance.

The CSSBattle site is user-friendly and the code output has the advantage of showing the difference between what you are building and what you need/would like to achieve (target). Also, they provide the hex codes for the colors present in the project and the functionality to share the results on Twitter. Would you like to join?