<body>
  <div class="flex center full-height min-height-100vh full-width white black-bg">
    <div class="absolute top flex align-top center full-width">
      <div id="pause" class="btn btn-white">⏸️ Mute</div>
      <div id="play" class="btn btn-white hidden">⏯️ Back to the 80s!</div>
    </div>
    <div id="kitt" class="flex center">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
      <div class="five"></div>
      <div class="six"></div>
      <div class="seven"></div>
      <div class="eight"></div>
      <div class="nine"></div>
      <div class="ten"></div>
    </div>
    <div class="text-center absolute bottom bubble">
      <p>Sorry Michael, 404, my GPS seems to be lost</p>
      <div>Go ◀️ in your browser history or
      <a href="codepen.io/antoine007" class="btn btn-white" style="text-decoration:none;">Go Home</a></div>
    </div>
    
  </div>
</body>
<audio id="audio" preload="true" loop autoplay>
  <source id="audiosource" src="https://s3.eu-west-2.amazonaws.com/motorama.com/KnightRider.mp3" type='audio/mpeg; codecs="mp3"'/>
</audio>
html {
  --bar-color: #FF0000;
}
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

body {
  font-family: "Montserrat", Arial, sans-serif;
  width: 100vw;
  min-height: 100vh;
  margin: 0;
}

.min-height-100vh {
  height: 100vh;
}

.full-width {
  width: 100%;
}

.flex {
  display: flex;
}

.flex.center {
  justify-content: center;
  align-items: center;
}

.absolute {
  position: absolute;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.text-center {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn-white {
  color: #000;
  background-color: #FFF;
}

.white {
  color: #FFF;
}
.black-bg{
  background-color:#000;
}
.hidden{
  display:none; 
}

.bubble{
  padding: 10px;
  border: 1px solid white;
  border-radius: 20px;
  margin-bottom:5px;
}
.bubble:after {
    content: "";
    position: absolute;
    top: -30px;
    left: 45%;
    border: 15px solid transparent;
    border-bottom-color: white;
    display: block;
    width: 0;
  }

#kitt {
  --kitt-width: 1240px;
  width: var(--kitt-width);
  height: calc(var(--kitt-width)/15.5);
}
@media (max-width: 1300px) {
  #kitt {
    --kitt-width: 1150px;
  }
}

@media (max-width: 800px) {
  #kitt {
    --kitt-width: 700px;
  }
}

@media (max-width: 500px) {
  #kitt {
    --kitt-width: 480px;
  }
}

.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight,
.nine,
.ten {
  width: calc(var(--kitt-width)/12);
  height: calc(var(--kitt-width)/15.5);
  background: var(--bar-color);
  margin: 0;
  display: inline-block;
  box-shadow: 0 0 30px var(--bar-color), inset 0 0 5px rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0 0 30px var(--bar-color), inset 0 0 5px rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
}

.one {
  animation-name: first;
  -webkit-animation-name: first;
}

.two {
  animation-name: second;
  -webkit-animation-name: second;
}

.three {
  animation-name: third;
  -webkit-animation-name: third;
}

.four {
  animation-name: fourth;
  -webkit-animation-name: fourth;
}

.five {
  animation-name: fifth;
  -webkit-animation-name: fifth;
}

.six {
  animation-name: sixth;
  -webkit-animation-name: sixth;
}

.seven {
  animation-name: seventh;
  -webkit-animation-name: seventh;
}

.eight {
  animation-name: eighth;
  -webkit-animation-name: eighth;
}

.nine {
  animation-name: ninth;
  -webkit-animation-name: ninth;
}

.ten {
  animation-name: tenth;
  -webkit-animation-name: tenth;
}

@keyframes first {
  0% {
    opacity: 0.2;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes second {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes third {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fourth {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fifth {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sixth {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes seventh {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0.2;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes eighth {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0.2;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ninth {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0.2;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

@keyframes tenth {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
document.getElementById("pause").onclick = function () {
  var audio = document.getElementById("audio")
  audio.pause()
  audio.currentTime = 0
  document.getElementById("pause").style.display = "none"
  document.getElementById("play").style.display = "block"
}
document.getElementById("play").onclick = function () {
  var audio = document.getElementById("audio")
  audio.play()
  document.getElementById("play").style.display = "none"
  document.getElementById("pause").style.display = "block"
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js