DEV Community 👩‍💻👨‍💻

Cover image for CSSBattle | #16 Eye of the Tiger
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on

CSSBattle | #16 Eye of the Tiger

Welcome to CSSBattle Challenges!

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


Challenge:

Eye of the Tiger Challenge


Solution:

<div class="container mostly-black-bg">
  <div class="outer-layer center-x-y">
    <div class="circle outer center-x-y mostly-black-bg">
      <div class="circle middle center-x-y">
        <div class="circle mini mostly-black-bg"></div>
      </div> 
    </div>
  </div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .mostly-black-bg {
    background: #0B2429
  }
  .center-x-y {
    display: grid;
    place-items: center;
  }
  .circle {
    border-radius: 50%;
  }
  .outer-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 200px;
    height: 200px;
    background: #998235;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
  }
  .outer {
    width: 180px;
    height: 180px;
  }
  .middle {
    width: 140px;
    height: 140px;
    background: #F3AC3C;
  }
  .mini {
    width: 50px;
    height: 50px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Key Takeaway(s):

  • use utility classes for shared, reusable CSS properties
  • use display grid to center elements vertically and horizontally

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

Top comments (0)

🌚 Life is too short to browse without dark mode