.stars
.tardis-container
  .tardis
    .tardis__light
      .tardis__top-light
      .tardis__bottom-light
    .tardis__top
    .tardis__top-top
    .tardis__second-tier
    .tardis__inner.tardis__inner--left
    .tardis__side.tardis__side--left
      .tardis__roof
        .tardis__dark-sign
          p Police
          p Public call
          p Box
      .tardis__doors
        .tardis__door.tardis__door--left
          .tardis__window
          .tardis__panel
          .tardis__panel
          .tardis__panel
        .tardis__door.tardis__door--right
          .tardis__window
          .tardis__panel
          .tardis__panel
          .tardis__panel
    .tardis__step.tardis__step--left
    .tardis__inner.tardis__inner--right
    .tardis__side.tardis__side--right
      .tardis__roof
        .tardis__dark-sign
          p Police
          p Public call
          p Box
      .tardis__doors
        .tardis__door.tardis__door--left
          .tardis__window
          .tardis__panel
          .tardis__panel
          .tardis__panel
        .tardis__door.tardis__door--right
          .tardis__window
          .tardis__panel
          .tardis__panel
          .tardis__panel
    .tardis__step.tardis__step--right
    .tardis__inner.tardis__inner--front
    .tardis__side.tardis__side--front
      .tardis__roof
        .tardis__dark-sign
          p Police
          p Public call
          p Box
      .tardis__doors
        .tardis__door.tardis__door--left.tardis__door--has-handle
          .tardis__window
          .tardis__panel.tardis__panel--with-plaque
            .tardis__plaque
              p
                span.high police telephone
                span
                  span.large free
                  span for use of
                  span.large public
                span.small Advice & assistence obtainable immediately
                span.small Officer & cars respond to all calls
                span.large.high pull to open
          .tardis__panel
          .tardis__panel
        .tardis__door.tardis__door--right.tardis__door--has-handle
          .tardis__window
          .tardis__panel
          .tardis__panel
          .tardis__panel
    .tardis__step.tardis__step--front
    .tardis__inner.tardis__inner--back
    .tardis__side.tardis__side--back
      .tardis__roof
        .tardis__dark-sign
          p Police
          p Public call
          p Box
      .tardis__doors
        .tardis__door.tardis__door--left
          .tardis__window
          .tardis__panel
          .tardis__panel
          .tardis__panel
        .tardis__door.tardis__door--right
          .tardis__window
          .tardis__panel
          .tardis__panel
          .tardis__panel
    .tardis__step.tardis__step--back
    .tardis__bottom
View Compiled
@import url("https://fonts.googleapis.com/css?family=Lato:700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
* {
  font-family: Lato, Helvetica, sans-serif;
  box-sizing: border-box;
}

$dark: #04060a;
$tardis-base: #19293e;
$tardis-lighter: #2f5063;
$light: #5dc4ef;
$window: #d1b998;
$plaque: #12151e;

@mixin center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Star function by https://codepen.io/saransh/pen/BKJun ✨
// n is number of stars required
@function multiple-box-shadow ($n) {
  $value: '#{random(2000)}px #{random(2000)}px #fff';
  @for $i from 2 through $n {
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #fff';  
  }
  @return unquote($value);
}

$shadows-small: multiple-box-shadow(700);
$shadows-medium: multiple-box-shadow(200);
$shadows-large: multiple-box-shadow(100);

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  perspective: 800px;
  @media (max-width: 750px) {
    perspective: 1000px;
  }
  overflow: hidden;
  background: radial-gradient(circle at 100% 0, hotpink, rebeccapurple 40%, midnightblue);
  // @include center-content;
}

.stars {
  width: 2px;
  height: 2px;
  box-shadow: $shadows-medium;
  border-radius: 100%;
  animation: animate-stars 150s infinite;
  &::before, &::after {
    content: '';
    position: absolute;
    box-shadow: $shadows-small;
    width: 1px;
    height: 1px;
    border-radius: 100%;
    animation: animate-stars 250s infinite;
  }
  &::after {
    width: 4px;
    height: 4px;
    box-shadow: $shadows-large;
    animation: animate-stars 500s infinite;
  }
}

.tardis {
  animation: turn 12s linear infinite;
  display: flex;
  margin-top: 25vh;
  transform: rotateX(-5deg) rotateY(1turn) translateZ(1px);
  transform-style: preserve-3d;
  backface-visibility: visible;
  &__top {
    position: absolute;
    background: darken($tardis-base, 10%);
    width: 200px;
    height: 200px;
    transform: rotateX(90deg) translateZ(130px) rotateZ(1deg);
    backface-visibility: visible;
  }
  &__top-top {
          position: absolute;
      width: 200px;
      height: 200px;
      background: radial-gradient(
        circle at 50%,
        $tardis-lighter,
        $tardis-base 0%,
        darken($tardis-base, 5%)
      );
      transform: rotateX(90deg) translateZ(160px);
      clip-path: polygon(0 15px, 15px 15px, 15px 0, 185px 0, 185px 15px, 100% 15px, 100% 185px, 185px 185px, 185px 100%, 15px 100%, 15px 185px, 0 185px);
    backface-visibility: visible;
  }
    &__second-tier {
    &::before {
      content: '';
      position: absolute;
      width: 200px;
      height: 200px;
      background: lighten($tardis-base, 5%);
      transform: rotateX(90deg) translateZ(145px);
      clip-path: polygon(0 5px, 5px 5px, 5px 0, 195px 0, 195px 5px, 100% 5px, 100% 195px, 195px 195px, 195px 100%, 5px 100%, 5px 195px, 0 195px);
    }
  }
  &__inner {
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 200px;
      height: 200px;
      top: -60px;
      left: 0;
      right: 0;
      height: 30px;
      z-index: 1;
      background: darken($tardis-base, 10%);
      --z: 85px;
    }
    &::after {
      height: 20px;
      background: hotpink;
      top: -45px;
      --z: 95px;
      background: $tardis-base;
    }
      &--left {
        &::before, &::after {
          transform: rotateY(-90deg) translateZ(var(--z));
        }
      }
      &--front {
        &::before, &::after {
          transform: translateZ(var(--z));
          background: darken($tardis-base, 20%);        
        }
      }
      &--right {
        &::before, &::after {
          transform: rotateY(90deg) translateZ(var(--z));
        }
      }
      &--back {
        &::before, &::after {
          transform: rotateY(-180deg) translateZ(var(--z));
          background: darken($tardis-base, 20%);
        }
      }
  }
  &__side {
    position: absolute;
    background: linear-gradient(
      -145deg,
      $tardis-lighter,
      $tardis-base 60%,
      darken($tardis-base, 10%)
    );
    width: 200px;
    height: 350px;
    padding-top: 10px;
    @include center-content;
    flex-direction: column;
    transition: transform 0.4s ease-out;
    --scale: 1;
    @media (max-width: 750px) {
      --scale: 0.5;
    }
    transform: scale(var(--scale)) translate(0, 0);
    transform-origin: center;
    &--left {
      transform: rotateY(-90deg) translateZ(100px);
    }
    &--front {
      transform: translateZ(100px);
    }
    &--right {
      transform: rotateY(90deg) translateZ(100px);
    }
    &--back {
      transform: rotateY(-180deg) translateZ(100px);
    }
  }
  &__light {
    @include center-content;
    position: absolute;
    transform-style: preserve-3d;
    top: -80px;
    left: 100px;
    width: 20px;
    height: 20px;
    background-image: linear-gradient($light 20%, #fff 80%);
    box-shadow: 0 0 20px white;
    animation: pulse-turn 12s linear infinite reverse;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      width: 2px;
      height: 100%;
      background: $dark;
    }
    &::before {
      left: 3px;
    }
    &::after {
      right: 3px;
    }
  }
  &__top-light {
    position: absolute;
    top: -10px;
    left: 0px;
    width: 20px;
    height: 10px;
    background: $dark;
    border-radius: 50% 50% 0 0;

  }
  &__bottom-light {
    position: absolute;
    bottom: 0;
    left: -2px;
    width: 24px;
    height: 6px;
    background: $dark;
  }
  &__roof {
    @include center-content;
    position: absolute;
    top: -30px;
    width: calc(100% + 10px);
    background-image: linear-gradient(
      to right,
      $tardis-lighter,
      $tardis-lighter 5px,
      $tardis-base 5px,
      $tardis-base calc(100% - 5px),
      $tardis-lighter calc(100% - 5px)
    );
    height: 30px;
    &::before,
    &::after {
      content: "";
      position: absolute;
    }
    &::before {
      width: calc(100% - 20px);
      left: 10px;
      top: -15px;
      height: 15px;
      background-image: linear-gradient(
        to right,
        darken($tardis-base, 3%),
        darken($tardis-base, 3%) 15px,
        darken($tardis-base, 20%) 15px,
        darken($tardis-base, 10%) 16px,
        darken($tardis-base, 1%) 20px,
        darken($tardis-base, 1%) calc(100% - 15px),
        $tardis-base calc(100% - 15px),
        darken($tardis-base, 25%) calc(100% - 15px),
        darken($tardis-base, 3%) calc(100% - 12px)
      );
    }
    &::after {
      width: calc(100% - 40px);
      left: 20px;
      top: -30px;
      height: 15px;
      background: $tardis-base;
      background-image: none;
    }
  }
  &__dark-sign {
    @include center-content;
    position: relative;
    width: calc(100% - 40px);
    height: 20px;
    border: 3px $tardis-lighter solid;
    background: $dark;
    color: #fff;
    text-shadow: 0px 0px 10px #ffffff;
    text-transform: uppercase;
    p {
      width: 40%;
      flex-grow: 1;
      font-size: 15px;
      text-align: right;
      &:nth-of-type(3) {
        width: 35%;
        text-align: left;
      }
      &:nth-of-type(2) {
        font-size: 7px;
        line-height: 0.95;
        width: 25%;
        flex-grow: 0;
        text-align: center;
      }
    }
  }
  &__doors {
    @include center-content;
    width: calc(100% - 40px);
    height: 100%;
    border: 2px solid $tardis-base;
    &::before {
      content: "";
      position: absolute;
      top: 10px;
      bottom: 1px;
      width: 6px;
      background-image: linear-gradient(
        to right,
        darken($tardis-base, 10%),
        $tardis-base 1px,
        $tardis-base calc(100% - 1px),
        lighten($tardis-base, 10%) calc(100% - 1px)
      );
    }
  }
  &__door {
    width: 50%;
    height: 100%;
    padding: 10px;
    &--has-handle {
      &:nth-of-type(2) {
        position: relative;
        &::before,
        &::after {
          content: "";
          position: absolute;
        }
        &::before {
          top: calc(50% - 20px);
          left: 5px;
          width: 2px;
          height: 20px;
          background-image: linear-gradient(
            to bottom,
            silver,
            darken(silver, 20%) 20%,
            darken(silver, 20%) 80%,
            silver
          );
          border-radius: 2px;
        }
        &::after {
          width: 4px;
          height: 4px;
          top: calc(50% - 40px);
          left: 4px;
          border-radius: 50%;
          background: silver;
        }
      }
    }
  }
  &__window,
  &__panel {
    width: 100%;
    height: calc(100% / 4 - (50px / 4));
  }
  &__window {
    position: relative;
    background: $window;
    background-image: linear-gradient(
      to bottom,
      transparent,
      transparent calc(100% / 2),
      darken($window, 40%),
      transparent calc(100% / 2 + 2px),
      transparent calc(100% / 2 + 2px)
    );
    border: 2px solid darken($light, 40%);
    box-shadow: inset -2px -1px 1px darken($window, 10%);
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(
        to right,
        transparent,
        transparent calc(100% / 3),
        darken($window, 40%),
        transparent calc(100% / 3 + 2px),
        transparent calc(100% / 3 + 2px),
        transparent calc(100% / 3 * 2),
        darken($window, 40%),
        transparent calc(100% / 3 * 2 + 2px)
      );
    }
  }
  &__panel {
    border: 1px solid $tardis-base;
    margin-top: 10px;
    box-shadow: inset -2px -1px 2px darken($tardis-base, 10%);
    &--with-plaque {
      padding: 6px;
      position: relative;
      &::before,
      &::after {
        content: "";
        position: absolute;
      }
      &::before {
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background-image: linear-gradient(
          to bottom,
          transparent,
          transparent 20%,
          silver 20%,
          silver calc(20% + 6px),
          transparent calc(20% + 6px),
          transparent calc(80% - 6px),
          silver calc(80% - 6px),
          silver 80%,
          transparent 80%
        );
      }
      &::after {
        top: calc(50% - 8px);
        left: 2px;
        width: 2px;
        height: 16px;
        background-image: linear-gradient(
          to bottom,
          silver,
          darken(silver, 20%) 20%,
          darken(silver, 20%) 80%,
          silver
        );
        border-radius: 2px;
      }
    }
  }
  &__plaque {
    display: flex;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, $plaque, lighten($plaque, 5%));
    p {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0;
      padding: 3px;
      height: 100%;
      color: white;
    }
    span {
      display: block;
      font-size: 4px;
      text-align: center;
      text-transform: uppercase;
      line-height: 1;
      &.large {
        font-size: 5px;
      }
      &.high {
        font-family: Oswald, sans-serif;
        font-size: 5px;
      }
      &.small {
        font-size: 2.5px;
        line-height: 1.2;
      }
    }
  }
  &__step {
    position: absolute;
    top: 350px;
    left: -5px;
    width: 210px;
    height: 20px;
    background-image: linear-gradient(
      to right,
      darken($tardis-base, 10%),
      darken($tardis-base, 1%) calc(100% - 15px),
      $tardis-base calc(100% - 15px)
    );
    &--left {
      transform: rotateY(-90deg) translateZ(105px);
    }
    &--front {
      transform: translateZ(105px);
    }
    &--right {
      transform: rotateY(90deg) translateZ(105px);
    }
    &--back {
      transform: rotateY(-180deg) translateZ(105px);
    }
  }
  &__bottom {
    &::after {
      content: '';  
      position: absolute;
      left: -5px;
      background: lighten($tardis-base, 2%);
      width: 210px;
      height: 210px;
      transform: rotateX(90deg) translateZ(-245px);      
    }
  }
}

@keyframes turn {
  from {
    transform: rotateX(-20deg) rotateY(1turn) translateZ(1px);
  }
  to {
    transform: rotateX(-20deg) rotateY(0) translateZ(1px);
  }
}

@keyframes pulse-turn {
  from {
    box-shadow: 0 0 50px white;
    transform: rotateX(0deg) rotateY(1turn);
  }
  to {
    box-shadow: 0 0 10px white;
    transform: rotateX(0deg) rotateY(0);
  }
}

@keyframes animate-stars{
  from	{
    transform: translateY(0px);
  }
  to {		
    transform: translateY(-2000px);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.