DEV Community

Thaísa Vieira
Thaísa Vieira

Posted on

6 1 1 1 1

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>
Enter fullscreen mode Exit fullscreen mode

And that's the result I got:

My solution for CSSBattle daily target (28/06/2024)

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?

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (2)

Collapse
 
tpp profile image
Larry • Edited

Very Informative!
I didn't know CSSBattle, I'll give it a try !
Thank you for your post :)

Collapse
 
thaisavieira profile image
Thaísa Vieira

CSSBattle is a good website for understanding what every property does and feeling confident to build things on your own. I hope to see you in the next Frontend Challenge from DEV Community on the CSS Art category. Keep learning and sharing knowledge!

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay