dyvmJXp

dyvmjxp.markdown

dyvmJXp

A Pen by Maris on CodePen.

License.

index.html

<div id="container">
  <div id="centered">
    <div id="date">
      <span id="date-text">
        06.25.21
      </span>
    </div>
    <div id="countdown">
      <div class="segment" id="days">
        <div class="number">
          <span>10</span>
        </div>
        <div class="text">
          <span>DAYS</span>
        </div>
      </div>
      <div class="segment" id="hours">
        <div class="number">
          <span>10</span>
        </div>
        <div class="text">
          <span>HOURS</span>
        </div>
      </div>
      <div class="segment" id="minutes">
        <div class="number">
          <span>10</span>
        </div>
        <div class="text">
          <span>MINUTES</span>
        </div>
      </div>
      <div class="segment" id="seconds">
        <div class="number">
          <span>10</span>
        </div>
        <div class="text">
          <span>SECONDS</span>
        </div>
      </div>
    </div>
  </div>
</div>

script.js

const count = countdown( new Date(2021, 6, 25), function(ts) {
  console.log(ts);
  document.getElementById("days").getElementsByClassName("number")[0].children[0].innerHTML = ts.days;
  document.getElementById("hours").getElementsByClassName("number")[0].children[0].innerHTML = ts.hours;
  document.getElementById("minutes").getElementsByClassName("number")[0].children[0].innerHTML = ts.minutes;
  document.getElementById("seconds").getElementsByClassName("number")[0].children[0].innerHTML = ts.seconds;
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/countdown/2.6.0/countdown.min.js"></script>

style.scss

@use 'sass:math';

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,800&display=swap');

$factor: 3;

* {
  user-select: none;
}

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixid=MnwyMzY1MzF8MHwxfGFsbHx8fHx8fHx8fDE2MjI3NzY0OTM&ixlib=rb-1.2.1);
  // border: solid 2px white;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center; 
  #centered {
    width: 1000px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    background-color: #B9D8D3;
    #date {
      width: 100%;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center; 
      background-color: #B9D8D3;
      #date-text {
        font-family: Jost;
        font-size: 200px;
        color: #16443e;
      }
    }
    #countdown {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      .segment {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column nowrap;
        font-family: Jost;
        font-size: 50px;
        color: #16443e;

        &#days .text {
          font-size: 38px !important;
        }

        &#hours .text {
          font-size: 30px !important;
        }

        &#minutes .text {
          font-size: 24px !important;
        }

        &#seconds .text {
          font-size: 22px !important;
        }

        div {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .number {
          font-size: 100px;
          height: 90px;
        }
        .text {
          font-size: 50px;
          height: 30px;
        }
      }
    }
  }
}