DEV Community

Cover image for CSSBattle | #30 Horizon
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on

CSSBattle | #30 Horizon

Welcome to CSSBattle Challenges!

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


Challenge:

Horizon Challenge


Solution:

<div class="container">
  <div class="layer one"></div>
  <div class="layer two"></div>
  <div class="layer three"></div>
  <div class="layer four"></div>
</div>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: repeat(1fr, 6);
  }
  .layer {
    width: 100%;
  }
  .one {
    background: #F7EC7D;
  }
  .two {
    background: #E38F66;
  }
  .three {
    background: #AA445F;
  }
  .four {
    background: #62306D;
  }
  .one, .two {
    grid-row: span 1;
  }
  .three, .four {
    grid-row: span 2;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Key Takeaway(s):

  • using display grid to align children elements vertically
  • using span property within display grid for children elements to take up spaces evenly

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

Top comments (2)

Collapse
 
shayanmahnam profile image
Shayan Mahnam • Edited

box shadow

<div></div>
<style>
  div {
    width: 100vw;
    height: 50px;
    background: #F7EC7D;
    position:absolute;
    left:0;
    top:0;
    box-shadow:0 50px #E38F66,0 100px #AA445F,0 150px #AA445F,0 200px #62306D,0 250px #62306D;
  }
</style>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joaaoneto profile image
joaaoneto

almost hit it with one tag, i dont know why its 99% but i think its because of the percentages