DEV Community

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

Posted on

2

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more