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:

---

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>

---

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!

Comments

[Shayan Mahnam]

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>

[joaaoneto]

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