DEV Community

Cover image for CSSBattle | #1 Simply Square
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on • Edited on

CSSBattle | #1 Simply Square

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #1 Simply Square challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.


Challenge:

Simply Square Challenge


Solution:

<div class="container">
  <div class="block"></div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    background: #5d3a3a;
    width: 100%;
    height: 100%;
  }
  .block {
    background: #b5e0ba;
    width: 200px;
    height: 200px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

Top comments (0)