Step layout

by KhuyenNH

HTML

<div class="step">
  <div class="stepItem active">
    <div class="stepItemBox">
      <div class="stepItemInner">
        <div class="stepText">Code</div>
      </div>
    </div>
  </div>
  <div class="stepItem">
    <div class="stepNotification">1</div>
    <div class="stepItemBox">
      <div class="stepItemInner">
        <div class="stepText">Eat</div>
      </div>
    </div>
  </div>
  <div class="stepItem">
    <div class="stepItemBox">
      <div class="stepItemInner">
        <div class="stepText">Sleep</div>
      </div>
    </div>
  </div>
  <div class="stepItem unActive">
    <div class="stepItemBox">
      <div class="stepItemInner">
        <div class="stepText">Bugs</div>
      </div>
    </div>
  </div>
</div>

SCSS

$orange2: #ff8c00;
$orange3: #ffe7ca;
$orange4: #ffb760;
$orange5: #fdd6a3;
$orange6: #fee7ca;
$yellow2: #ffeac2;
$yellow3: #fffaf0;

@import 'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css';
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap");

.step {
  display: flex;
  padding: 20px;
  font-family: "Open Sans", sans-serif;

  &Item {
    position: relative;
    width: calc(25% - 21px);
    text-align: center;
    color: $orange2;
    cursor: pointer;

    &:not(:first-child) {
      margin-left: 28px;

      &::after {
        content: "\f101";
        font-family: "FontAwesome";
        position: absolute;
        top: calc(50% - 16px);
        left: -28px;
        width: 33px;
        height: 22px;
        font-size: 30px;
        color: $orange2;
        z-index: 3;
      }
    }

    &:first-child {
      .stepItemBox {
        &:before {
          display: none;
        }
      }
    }

    &:last-child {
      .stepItemBox {
        &::after {
          display: none;
        }
      }
    }

    .stepItemBox {

      &::before,
      &::after {
        color: $orange4;
        border-color: $orange4;
      }
    }

    &.active {
      .stepItemInner {
        background: $yellow2;
      }

      .stepItemBox {
        &::after {
          color: $orange4;
          border-color: $orange4;
        }
      }
    }

    &.unActive {
      filter: grayscale(100%);
      text-decoration: line-through;
      z-index: 2;
    }
  }

  &ItemInner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: $yellow3;
    border: 1px solid $orange4;
    border-radius: 4px;
    padding: 30px 25px;
    min-height: 150px;
    transition: 0.4s;

    &:hover {
      background: $orange5;
    }
  }

  &ItemBox {
    position: relative;
    overflow: hidden;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top:...