css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="wrapper">
  <div class="wrapper-inner">
    
    <!-- //// TARDIS ///// -->

    <div class="rotating-tardis">

      <div class="tardis-light">

        <div class="front-light light-sides">
          <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-light.svg">
          <div class="light-glow"></div>
        </div>
        <div class="back-light light-sides">
          <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-light.svg">
          <div class="light-glow"></div>
        </div>
        <div class="left-light light-sides">
          <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-light.svg">
          <div class="light-glow"></div>
        </div>
        <div class="right-light light-sides">
          <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-light.svg">
          <div class="light-glow"></div>
        </div>
        <div class="top-light light-sides"></div>
        <div class="bottom-light light-sides"></div>

      </div> <!-- closes tardis-light -->

      <div class="tardis-sides-all">

        <div class="front-side tardis-sides-rectangle">
          <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-body.svg">
        </div>
        <div class="back-side tardis-sides-rectangle">
          <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-body.svg">
        </div>
        <div class="left-side tardis-sides-rectangle">
          <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-body.svg">
        </div>
        <div class="right-side tardis-sides-rectangle">
          <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-body.svg">
        </div>
        <div class="top-side tardis-sides-square"></div>
        <div class="bottom-side tardis-sides-square"></div>

      </div> <!-- closes tardis-sides-all -->
    </div> <!-- closes rotating-tardis -->

    <!-- TARDIS end -->
    
    
    <div class="saturn">
      <div class="saturn__surface"></div>
      <div class="saturn__ring"></div>
      <div class="saturn__ring saturn__ring--bottom"></div>
    </div>

    <div class="invader invader-1"></div>
    <div class="invader invader-2"></div>
    <div class="invader invader-3"></div>
    <div class="invader invader-3"></div>

    <div class="cannon"></div>
      <p class="replay">Play again?</p>
      <p class="message">Open me on a mobile!</p>
    
    <div class="tie">
      <div class="wing wing--left"></div>
      <div class="wing wing--right"></div>
      <div class="laser"></div>
    </div>
    
    
<svg class="star"  width="25%" height="25%" viewBox="0 0 800 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="star_one">
  <path 
        d="M269.915,240.558c0,-33.331 -2.29,-69.289 10.158,-100.856c3.9,-9.892 9.486,-19.219 13.753,-29.147c1.337,-3.111 2.659,-6.745 3.454,-9.947c0.109,-0.439 1.157,-4.401 1.314,-4.114c1.826,3.347 -0.249,10.193 1.205,14.099c12.222,32.85 14.888,63.089 19.117,97.017c0.063,0.5 -1.002,33.127 -0.384,33.339c18.906,6.479 88.913,0 112.974,0c2.731,0 36.801,-2.507 33.262,4.627c-5.694,11.479 -75.233,35.904 -91.005,42.682c-2.319,0.997 -30.518,8.892 -30.519,8.954c-0.013,1.343 39.414,70.541 43.952,92.434c0.132,0.637 2.965,9.086 1.782,9.677c-1.819,0.909 -22.083,-13.021 -24.604,-14.182c-24.235,-11.165 -24.803,-26.987 -45.842,-43.689c-4.176,-3.314 -22.321,-18.706 -24.706,-19.197c-15.026,-3.095 -71.969,27.345 -86.526,35.571c-6.883,3.89 -13.029,6.042 -20.04,9.524c-3.271,1.624 -8.492,10.573 -8.492,6.921c0,-21.625 34.518,-72.572 48.329,-91.902c1.136,-1.589 15.39,-26.892 14.83,-27.34c-2.814,-2.252 -6.431,-4.611 -9.376,-6.87c-16.409,-12.592 -39.083,-21.094 -53.661,-35.672c-1.917,-1.917 -18.764,-23.044 -17.695,-24.238c2.781,-3.105 26.935,9.424 30.237,10.331c11.444,3.144 78.483,41.978 78.483,41.978Z" style="fill:#f4c842;stroke:#f46b41;stroke-width:5px;"/>
    <path d="M370.995,193.009c-1.115,0 2.434,0 3.273,0c8.05,0 15.913,0.168 23.834,-1.682c19.018,-4.442 48.227,6.432 66.924,1.682c33.629,-8.544 59.044,-40.485 93.056,-45.897c23.314,-3.71 44.569,8.224 66.396,0c8.016,-3.02 48.906,-13.23 48.906,-16.909" style="fill:none;stroke:#f46b41;stroke-width:16px;"/>
<path d="M421.343,296.444c10.148,-10.304 84.318,13.493 100.739,13.493c31.039,0 52.563,-36.851 83.756,-39.463c33.032,-2.767 55.591,2.408 87.696,-4.329c9.354,-1.963 16.643,4.329 24.964,4.329" style="fill:none;stroke:#f46b41;stroke-width:16px;"/>
<path d="M400.963,370.932c3.663,-3.719 23.481,-0.544 27.685,-0.544c20.155,0 47.617,36.804 67.374,41.743c8.154,2.039 29.06,4.455 37.565,10.115c17.651,11.747 42.344,-4.053 62.694,0c23.138,4.608 37.595,2.151 61.249,2.151c9.476,0 15.401,0.878 23.439,3.381c1.994,0.62 12.012,4.889 9.621,4.889" style="fill:none;stroke:#f46b41;stroke-width:16px;"/>
  </g>
  <g id="star_two">
    <path  d="M255.048,236.106c0,-27.459 16.478,-56.966 23.077,-83.615c2.478,-10.01 5.914,-19.189 9.114,-28.83c0.458,-1.378 5.303,-15.735 5.77,-15.276c1.636,1.609 2.979,18.501 4.956,23.341c9.817,24.045 14.466,52.534 14.466,78.421c0,5.922 0.382,11.882 0.382,17.736c0,1.028 0.355,15.563 1.264,15.743c19.108,3.784 66.492,1.866 87.016,0.063c9.599,-0.844 19.419,-0.423 29.092,-0.423c3.083,0 6.166,0 9.249,0c1.612,0 6.447,0 4.835,0c-14.252,0 -27.302,9.76 -39.867,15.294c-18.687,8.229 -39.439,12.94 -58.661,20.107c-3.145,1.172 -29.596,10.465 -29.8,11.392c-0.697,3.16 6.709,11.001 8.403,13.724c8.875,14.264 15.892,29.532 23.995,44.124c4.451,8.016 6.258,17.591 9.141,26.241c1.402,4.205 3.15,12.918 3.15,12.918c0,0 -8.224,-5.336 -11.664,-8.777c-7.351,-7.351 -15.23,-13.882 -22.972,-20.743c-4.867,-4.313 -10.782,-7.493 -15.071,-12.526c-12.19,-14.307 -16.764,-35.76 -29.289,-49.08c-1.924,-2.047 -18.772,14.497 -19.857,15.507c-18.272,17.005 -33.472,36.54 -51.051,54.08c-4.94,4.929 -10.568,9.735 -15.921,14.217c-1.645,1.378 -2.818,3.162 -4.328,4.662c-0.847,0.841 -2.233,3.991 -2.233,2.798c0,-27.283 22.126,-64.224 32.887,-89.378c3.416,-7.984 7.219,-15.391 12.007,-22.602c0.682,-1.028 7.978,-11.641 7.526,-11.833c-28.566,-12.148 -56.442,-35.227 -79.636,-55.757c-0.595,-0.527 -1.058,-1.198 -1.686,-1.686c-6.146,-4.783 -11.045,-10.702 -15.222,-17.042c-0.113,-0.171 -1.359,-1.692 -1.223,-1.846c1.083,-1.23 20.71,8.71 22.469,9.444c21.467,8.966 55.765,22.093 55.765,22.093c0,0 21.71,10.346 25.992,14.629c1.655,1.655 7.925,2.88 7.925,2.88Z" style="fill:#f4c842;stroke:#f46b41;stroke-width:5px;"/>
    <path d="M370.995,193.009c-1.115,0 2.434,0 3.273,0c8.05,0 15.913,0.168 23.834,-1.682c19.018,-4.442 37.506,-8.631 56.203,-13.381c33.629,-8.544 68.367,-2.156 102.379,-7.568c23.314,-3.71 45.967,-15.042 67.794,-23.266c8.016,-3.02 48.906,-13.23 48.906,-16.909" style="fill:none;stroke:#f46b41;stroke-width:16px;"/>
<path d="M421.343,296.444c10.148,-10.304 65.958,-8.195 82.379,-8.195c31.038,0 61.862,5.934 93.055,3.322c33.032,-2.766 64.652,-18.689 96.757,-25.426c9.354,-1.963 16.643,4.329 24.964,4.329" style="fill:none;stroke:#f46b41;stroke-width:16px;"/>
<path d="M400.963,370.932c3.663,-3.719 23.481,-0.544 27.685,-0.544c20.155,0 47.617,-4.939 67.374,0c8.154,2.039 22.337,26.551 30.842,32.211c17.652,11.747 37.947,15.594 58.296,19.647c23.139,4.608 48.716,2.151 72.37,2.151c9.476,0 15.401,0.878 23.439,3.381c1.994,0.62 12.012,4.889 9.621,4.889" style="fill:none;stroke:#f46b41;stroke-width:16px;"/>
  </g>
    
</svg>
    
    
  </div> <!-- closes wrapper-inner -->
</div> <!-- closes wrapper -->




            
          
!
            
              /* Cassie added Saturn */
.saturn {
  position: absolute;
  width: 100px;
  height: 100px;
  padding: 3.5px;
  border-radius: 100px;
  background: linear-gradient(-10deg, #006dff, rgba(0, 0, 0, 0));
  left: 10%;
  top: 120px;
  transform-origin: center;
  animation: floating 5s ease-in-out infinite alternate;
}

.wrapper.has-deviceOrientation .saturn {
  left: 40%;
  top: 200px;
}

.saturn__ring, .saturn__ring--bottom {
  width: 125px;
  height: 30px;
  left: -15px;
  top: 35px;
  position: absolute;
  border: 5px solid #02f9f9;
  border-top: 5px solid transparent;
  border-radius: 100%;
  transform: rotate(10deg);
}

.saturn__ring--bottom {
  border-top: 5px solid #02f9f9;
  z-index: -1;
}

.saturn__surface {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: linear-gradient(-169deg, #00ffff, #02f9e2e6, #f959fb, 80%, #0ddeffeb, rgba(0, 0, 0, 0));
  box-shadow: 5px -3px 40px 0px rgba(245, 194, 249, 0.75);
}

@keyframes floating {
  0% {
    transform: translate(0, 0) rotate(0deg)
  }

  50% {
    transform: translate(-10%, -10%) rotate(-10deg)
  }

  50% {
    transform: translate(10%, 10%) rotate(10deg)
  }
}

/* Alice added Invaders */
.invader-1 {
  left: 0;
}

.invader-2 {
  left: 10%;
}

.invader-3 {
  left: 20%;
}

.invader-4 {
  left: 0%;
}

.invader {
  position: absolute;
  bottom: 50%;
  height: 5px;
  width: 5px;
  animation: invasion 7s alternate infinite;
  box-shadow:
    20px 0 #6AF52A,
    50px 0 #6AF52A,
    25px 5px #6AF52A,
    45px 5px #6AF52A,
    20px 10px #6AF52A,
    25px 10px #6AF52A,
    30px 10px #6AF52A,
    35px 10px #6AF52A,
    40px 10px #6AF52A,
    45px 10px #6AF52A,
    50px 10px #6AF52A,
    15px 15px #6AF52A,
    20px 15px #6AF52A,
    30px 15px #6AF52A,
    35px 15px #6AF52A,
    40px 15px #6AF52A,
    50px 15px #6AF52A,
    55px 15px #6AF52A,
    10px 20px #6AF52A,
    15px 20px #6AF52A,
    20px 20px #6AF52A,
    25px 20px #6AF52A,
    30px 20px #6AF52A,
    35px 20px #6AF52A,
    40px 20px #6AF52A,
    45px 20px #6AF52A,
    50px 20px #6AF52A,
    55px 20px #6AF52A,
    60px 20px #6AF52A,
    10px 25px #6AF52A,
    20px 25px #6AF52A,
    25px 25px #6AF52A,
    30px 25px #6AF52A,
    35px 25px #6AF52A,
    40px 25px #6AF52A,
    45px 25px #6AF52A,
    50px 25px #6AF52A,
    60px 25px #6AF52A,
    10px 30px #6AF52A,
    20px 30px #6AF52A,
    50px 30px #6AF52A,
    60px 30px #6AF52A,
    25px 35px #6AF52A,
    30px 35px #6AF52A,
    40px 35px #6AF52A,
    45px 35px #6AF52A
}

@keyframes invasion {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(900px);
  }
}

/* Mark added stars */
.wrapper-inner::before,
.wrapper-inner::after {
  content: '';
  animation: zoom-stars 20s infinite linear;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image:
    radial-gradient(#eee, rgba(255, 255, 255, .02) .1em, transparent 2em),
    radial-gradient(#eee, rgba(255, 255, 255, .02) .1em, transparent 1em),
    radial-gradient(white, rgba(255, 255, 255, .05) .2em, transparent 5em),
    radial-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .03) .2em, transparent 4em),
    radial-gradient(#eee, rgba(255, 255, 255, .02) .1em, transparent 2em),
    radial-gradient(#eee, rgba(255, 255, 255, .02) .1em, transparent 1em),
    radial-gradient(#eee, rgba(255, 255, 255, .05) .2em, transparent 5em),
    radial-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .03) .2em, transparent 4em);
  background-size: 11em 13em, 9.7em 9.7em, 94.9em 94.9em, 16.3em 16.7em,
    9em 7em, 11.3em 11.3em, 73.9em 73.9em, 17.7em 17.9em;
  background-position: 0 0, -4.3em -6.7em, -1.3em -2.7em, -7em -89em,
    11em 11em, -1.3em -2.7em, -4.3em -6.7em, -17em -9em;
}

.wrapper-inner::after {
  animation-delay: -10s;
}

@keyframes zoom-stars {
  0% {
    transform: scale(1);
    opacity: 0
  }

  50% {
    opacity: 1
  }

  100% {
    transform: scale(2);
    opacity: 0
  }
}

/* Pete let you look around on mobile */
html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.wrapper {
  background: #13122d;
  width: 100vw;
  overflow: hidden;
}

.wrapper-inner {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url(https://i.postimg.cc/D0VHYtGg/moon.jpg) transparent repeat-x center bottom -60px;
  background-size: contain;
  transition: background-position 250ms;
}

@media (min-height: 450px) {
  .wrapper-inner {
    background-position: center bottom;
  }
}

.wrapper.has-deviceOrientation .wrapper-inner {
  width: 300vw;
  height: 150vh;
  background-size: 200vw;
  /* canvas (wrapper-inner) width minus viewport (wrapper) width */
}

.message {
  display: inline-block;
  position: fixed;
  top: 0;
  right: 1rem;
  background: rgba(255, 255, 255, 0.4);
  padding: 0.5rem;
  z-index: 3;
  font-size: 0.75rem;
}

/* Michelle added some resistance */
.cannon {
  height: 5px;
  width: 10px;
  position: absolute;
  bottom: 20%;
  left: 45%;
  box-shadow:
    30px 10px 0 0 #6AF52A,
    25px 15px 0 0 #6AF52A,
    30px 15px 0 0 #6AF52A,
    35px 15px 0 0 #6AF52A,
    25px 20px 0 0 #6AF52A,
    30px 20px 0 0 #6AF52A,
    35px 20px 0 0 #6AF52A,
    10px 25px 0 0 #6AF52A,
    15px 25px 0 0 #6AF52A,
    20px 25px 0 0 #6AF52A,
    25px 25px 0 0 #6AF52A,
    30px 25px 0 0 #6AF52A,
    35px 25px 0 0 #6AF52A,
    40px 25px 0 0 #6AF52A,
    45px 25px 0 0 #6AF52A,
    50px 25px 0 0 #6AF52A,
    5px 30px 0 0 #6AF52A,
    10px 30px 0 0 #6AF52A,
    15px 30px 0 0 #6AF52A,
    20px 30px 0 0 #6AF52A,
    25px 30px 0 0 #6AF52A,
    30px 30px 0 0 #6AF52A,
    35px 30px 0 0 #6AF52A,
    40px 30px 0 0 #6AF52A,
    45px 30px 0 0 #6AF52A,
    50px 30px 0 0 #6AF52A,
    55px 30px 0 0 #6AF52A,
    5px 35px 0 0 #6AF52A,
    10px 35px 0 0 #6AF52A,
    15px 35px 0 0 #6AF52A,
    20px 35px 0 0 #6AF52A,
    25px 35px 0 0 #6AF52A,
    30px 35px 0 0 #6AF52A,
    35px 35px 0 0 #6AF52A,
    40px 35px 0 0 #6AF52A,
    45px 35px 0 0 #6AF52A,
    50px 35px 0 0 #6AF52A,
    55px 35px 0 0 #6AF52A,
    5px 40px 0 0 #6AF52A,
    10px 40px 0 0 #6AF52A,
    15px 40px 0 0 #6AF52A,
    20px 40px 0 0 #6AF52A,
    25px 40px 0 0 #6AF52A,
    30px 40px 0 0 #6AF52A,
    35px 40px 0 0 #6AF52A,
    40px 40px 0 0 #6AF52A,
    45px 40px 0 0 #6AF52A,
    50px 40px 0 0 #6AF52A,
    55px 40px 0 0 #6AF52A;
}

.cannon-shot {
  border-left: 6px solid #6AF52A;
  position: absolute;
  /* top: 55%;  */
  bottom: 20%;
  height: 10px;
  left: 50%;
  visibility: hidden;
}

.replay {
  display: inline-block;
  position: fixed;
  margin:auto;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  background: rgba(255, 255, 255, 0.4);
  padding: 0.5rem;
  font-size: 2rem;
  z-index: 1;
  visibility: hidden;
}

/* Tristan added TIE Figher */
.tie {
  position: absolute;
  top: 10%;
  right: 10%;
  transform: translateY(-10%) scale(.15) rotate(25deg);
  width: 100px;
  height: 100px;
  background-color: #898c89;
  border-radius: 50%;
  animation: bumpyspaceride 5s linear infinite;
}

.tie::before,
.tie::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleX(1.2);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  height: 25px;
  width: 0;
}

.tie::before {
  left: -45px;
  border-right: 60px solid #898c89;
}

.tie::after {
  right: -45px;
  border-left: 60px solid #898c89;
}

.wing {
  height: 300px;
  width: 15px;
  position: absolute;
  background-color: #898c89;
  top: 50%;
  transform: translateY(-50%);
}

.wing--left {
  left: -60px;
}

.wing--right {
  right: -60px;
}

.laser {
  width: 5px;
  height: 50px;
  background-color: #4de847;
  opacity: 0;
  border-radius: 2px;
  box-shadow: 1px 1px 5px #4de847,
             -1px -1px 5px #4de847;
  transform: rotate(-45deg);
  position: absolute;
  z-index: 1;
  top: 60%;
  opacity: 0;
  left: 40%;
  animation: lasers infinite .5s linear;
}

.laser::after {
  width: 5px;
  height: 50px;
  background-color: #4de847;
  opacity: 0;
  border-radius: 2px;
  box-shadow: 1px 1px 5px #4de847,
             -1px -1px 5px #4de847;
  transform: rotate(-45deg);
  display: block;
  transform: rotate(45deg);
  position: relative;
  opacity: 1;
  top: -10px;
  right: -20px;
  animation: secondlaser infinite .5s linear;
  animation-delay: .45s;
  content: '';
}

@keyframes lasers {
  0% {
    opacity: 0;
    transform: rotate(-45deg);
  }
  
  10% {
    opacity: 1;
  }
  
  100% {
    transform: rotate(-45deg) translateY(100px);
  }
}

@keyframes secondlaser {
  0% {
    opacity: 0;
    transform: rotate(0);
  }
  
  10% {
    opacity: 1;
  }
  
  100% {
    transform: rotate(0) translateY(100px);
  }
}

@keyframes bumpyspaceride {
  0% {
    transform: translateY(-10%) scale(.15) rotate(25deg);
  }
  
  15% {
    transform: translateY(-5%) scale(.17) rotate(15deg);
  }
  
  55% {
    transform: translateY(-15%) translateX(10px) scale(.17) rotate(-15deg);
  }
  
  75% {
    transform: translateY(0) scale(.15) rotate(0deg) translateX(-5px);
  }
  
  100% {
    transform: translateY(-10%) scale(.15) rotate(25deg);
  }
}


/* /// Anwen added TARDIS /// */

.rotating-tardis {
  position: absolute;
  width: 100px;
  height: 100px;
  perspective: 600px;
  margin-left: 10vw;
  animation: flying-tardis 7s linear infinite;
}
.tardis-sides-all {
  width: 100px;
  animation: rotate-tardis 7s linear infinite;
  transform-style: preserve-3d;
  margin-top: 100px;
}
.tardis-sides-rectangle {
  position: absolute;
  width: 100px;
  height: 200px;
}
.tardis-sides-square {
  position: absolute;
  width: 100px;
  height: 100px;
}
.front-side {
  transform: translateZ(50px);
}
.back-side {
  transform: rotateY(180deg) translateZ(50px);
}
.left-side {
  transform: rotateY(-90deg) translateX(-50px);
  transform-origin: left;
}
.right-side {
  transform: rotateY(90deg) translateX(50px);
  transform-origin: right;
}
.top-side {
  transform: rotateX(-90deg) translateY(-50px);
  transform-origin: top;
  background: #215785;
}
.bottom-side {
  transform: rotateX(90deg) translateY(50px);
  transform-origin: bottom;
  background: #215785;
}

.tardis-light {
  animation: rotate-tardis 7s linear infinite;
  transform-style: preserve-3d;
}
.light-sides {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 70px;
  left: 40px;
}
.light-glow {
  position: absolute;
  width: 16px;
  height: 20px;
  top: 4px;
  left: 2px;
  background: yellow;
  animation: light-flash 0.6s linear infinite;
}
.front-light {
  transform: translateZ(10px);
}
.back-light {
  transform: rotateY(180deg) translateZ(10px);
}
.left-light {
  transform: rotateY(-90deg) translateX(-10px);
  transform-origin: left;
}
.right-light {
  transform: rotateY(90deg) translateX(10px);
  transform-origin: right;
}
.top-light {
  transform: rotateX(-90deg) translateY(-10px);
  transform-origin: top;
  background: #215785;
}
.bottom-light {
  transform: rotateX(90deg) translateY(10px);
  transform-origin: bottom;
  background: #215785;
}

@keyframes rotate-tardis {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes flying-tardis {
  0% {
      transform: scale(0) rotate(-20deg);
      left: 20vw;
  }
  50% {
      transform: scale(1) rotate(0deg);
      left: 30vw;
  }
  100% {
      transform: scale(0) rotate(25deg);
      left: 50vw;
  }
}

@keyframes light-flash {
  0% {
    box-shadow: 0 0 0px yellow;
    opacity: 0.2;
  }
  50% {
    box-shadow: 0 0 50px yellow;
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0px yellow;
    opacity: 0.2;
  }
}
/* TARDIS end */

/*  shooting star */
.star {
  position: absolute;
  z-index: -1.5px;
  right: -800px;
  top: -100px;
  animation: shootingStar 10s linear 3s infinite normal;
}

.noShow {
  display: none;
}

@keyframes shootingStar {
    0% {
      right: -800px;
      top: -100px;
      transform: scale(1);}
    100% {
      right: 1200px;
      top: 150px;
      transform: scale(0.1);
  }
}
/* shooting star end */
            
          
!
            
              // Pete: look around on mobile, if supported
(function() {

  // assume device doesn't report orientation unless proven otherwise
  // this allows us to update styles and behaviour only if supported
  var hasDeviceOrientationInited = false;

  // elements to scroll:
  // for vertical scroll, some devices support `document.documentElement`
  // while others use `document.body` so to be safe we support both
  // for horizontal scroll, for consistency we use the main page wrapper el
  var scrollVerticalEl;
  var scrollVerticalElAlt;
  var scrollHorizontalEl;

  // the wrapper element surrounds all page content
  // we use this to calculate some positioning
  var wrapperEl;
  var wrapperHeight = 0;
  var wrapperWidth = 0;

  // the canvas element surrounds page content too
  // but extends beyond the visible border (to allow horizontal movement)
  // we use this to calculate some positioning too
  var canvasEl;
  var canvasWidth = 0;

  // device orientation - default to portrait
  var isLandscape = false;
  var isRotatedClockwise = false;

  // message element, to update the text for mobile
  var messageEl;

  // method called on page load to init behaviour
  function load() {
    initElements();
    calculateCanvasDimensions();
    calculateDeviceOrientation();
    initScroll();
  }

  // find all useful DOM elements
  function initElements() {
    scrollVerticalEl = document.documentElement;
    scrollVerticalElAlt = document.body;
    scrollHorizontalEl = document.querySelector('.wrapper');
    wrapperEl = document.querySelector('.wrapper');
    canvasEl = document.querySelector('.wrapper-inner');
    messageEl = document.querySelector('.message');
  }

  // gather canvas dimensions, to be used later in calculations
  function calculateCanvasDimensions() {
    wrapperHeight = wrapperEl.offsetHeight;
    wrapperWidth = wrapperEl.offsetWidth;
    canvasWidth = canvasEl.offsetWidth;
  }

  // calculate whether the device is landscape or portrait
  function calculateDeviceOrientation(e) {
    isLandscape = document.documentElement.clientHeight < document.documentElement.clientWidth;
    isRotatedClockwise = window.orientation === -90;
  }

  // set initial scroll position
  function initScroll() {
    var top = 0;
    var left = 0;
    setScroll(top, left);
  }

  // update scroll position
  function setScroll(top, left) {
    scrollVerticalEl.scrollTop = top;
    scrollVerticalElAlt.scrollTop = top;
    scrollHorizontalEl.scrollLeft = left;
  }

  // further initialisation logic from first device orientation event
  //
  // browsers report that they support device orientation
  // even when they don't contain a giroscope,
  // so for the first device orientation event,
  // set up site to support them
  function initDeviceOrientation() {
    wrapperEl.classList.add('has-deviceOrientation');
    hasDeviceOrientationInited = true;

    // with the addition of a new class on the body element,
    // styles may now be different for devices that support device orientation,
    // so re-evaluate dimensions
    calculateCanvasDimensions();

    messageEl.textContent = `Have a look around!`;
  }

  // recalculate values based on major device rotation
  // (e.g. landscape to portrait or vice versa)
  function handleOrientationChange() {
    // allow time for the screen layout to readjust first
    setTimeout(function() {
      calculateCanvasDimensions();
      calculateDeviceOrientation();
    }, 500);
  }

  // update scroll position based on orientation change event
  function handleOrientationEvent(event) {
    if (!hasDeviceOrientationInited) {
      initDeviceOrientation();
    }

    // calculate orientation
    // need to switch beta/gamma if device is in landscape mode
    var alpha = calculateAlpha(event);
    var beta = calculateBeta(event);

    // calculate scroll position from orientation
    var top = calculateVerticalScroll(beta);
    var left = calculateHorizontalScroll(alpha);
    setScroll(top, left);
  }

  // calculate alpha based on device orientation
  function calculateAlpha(event) {
    var alpha = event.alpha;

    // landscape adjustments
    if (isLandscape) {
      // clockwise rotation
      if (isRotatedClockwise) {
        // above the horizon
        if (event.gamma < 0) {
          alpha = alpha + 180;
          if (alpha > 360) {
            alpha = alpha - 360;
          }
        }

        // anti-clockwise rotation
      } else {
        // above the horizon
        if (event.gamma > 0) {
          alpha = alpha - 180;
          if (alpha < 0) {
            alpha = alpha + 360;
          }
        }
      }
    }

    return alpha;
  }

  // calculate beta based on device orientation
  // and fix range values accordingly
  function calculateBeta(event) {
    var beta;

    // landscape adjustments
    // beta (gamma) values change at the horizon
    if (isLandscape) {
      beta = event.gamma;

      // clockwise rotation
      // below the horizon, -90 (close to horizon) down to 0 (face up)
      // above the horizon, 90 (close to horizon) down to 0 (face down)
      if (isRotatedClockwise) {
        if (beta < 0) { beta = 180 - Math.abs(beta); }

        // anti-clockwise rotation
        // below the horizon, 90 (close to horizon) down to 0 (face up)
        // above the horizon, -90 (close to horizon) down to 0 (face down)
      } else {
        if (beta > 0) { beta = 180 - beta; }
        if (beta < 0) { beta = Math.abs(beta); }
      }

    // portrait adjustments
    } else {
      beta = event.beta;
    }

    return beta;
  }

  // calculate new vertical scroll position
  // beta: degree in the range [-180,180]
  // convert beta value to a value within page height range
  function calculateVerticalScroll(beta) {
    var topRange = mapRange(beta, 180, 0, wrapperHeight, 0);
    return Math.round(Math.abs(topRange));
  }

  // calculate new horizontal scroll position - based on alpha value
  // alpha: degree in the range [0,360]
  function calculateHorizontalScroll(alpha) {
    var availableWidth = canvasWidth - wrapperWidth;
    var alphaMax = 360;
    var ratio = alpha / alphaMax;
    return availableWidth - Math.round(availableWidth * ratio);
  }

  // map a value from one [min-max] range to another [min-max] range
  function mapRange(value, fromMin, fromMax, toMin, toMax) {
    return (value - fromMin) * (toMax - toMin) / (fromMax - fromMin) + toMax;
  }

  // init listeners
  if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', handleOrientationEvent);
  }
  window.addEventListener('orientationchange', handleOrientationChange);

  load();

})();

// Michelle - press left / right cursor and space to fire

(function() {
var pane = $('.wrapper-inner'),
    cannon = $('.cannon'),
    hits = 0,
    aliens = $('.invader').length;
    w = pane.width() - 60,
    d = {},
    x = 3;
    y = 3;

function shoot() {
  var $shot = $('<div class="cannon-shot"></div>');
  $('.wrapper-inner').append($shot);
  $shot.css({
    visibility: 'visible',
    left: cannon.position().left + 30,
    top: cannon.position().top,
  });
}

// capture keyboard events
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
// for mobiles. TODO: Needs cannon movement
$(window).mousedown(function(e) {
  cannon.css({ left: e.pageX });
  shoot();
})

// press space to fire
setInterval(function() {
  if(d[32]) { shoot(); }
}, 350);

// game loop
setInterval(function() {
  // cannon movement
  function newv(v,a,b) {
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
     return n < 0 ? 0 : n > w ? w : n;
  }
  cannon.css( {
    left: function(i,v) { return newv(v, 37, 39); },
  });

  function overlap(rect1, rect2) {
    return !(rect1.right <= rect2.left - 10 ||
      rect1.left >= rect2.right + 10 ||
      rect1.bottom <= rect2.top - 10 ||
      rect1.top >= rect2.bottom + 10);
  }

  // can non shot movement
  var cannonShot = $('.cannon-shot');
  cannonShot.each(function(){
    var shot = $(this)[0];
    var rect = $(this)[0].getBoundingClientRect();
    if(rect.top < 0) { $(this).remove() }
    else { $(this).css({ top: rect.top - y }); }
    // detect hit
    $('.invader').each(function(){
      if($(this).css('visibility') !== 'hidden' &&
        overlap(rect, $(this)[0].getBoundingClientRect())) {
        $(this).css({ visibility: 'hidden' });
        shot.remove();
        hits = hits + 1;
      }
    })
  })

  // game over?
  if (hits >= aliens) {
    $('.replay').css({ visibility: 'visible'});

    function restart() {
      hits = 0;
      $('.replay').css({ visibility: 'hidden'});
      $('.invader').css({ visibility: 'visible'});
    }

    $('.replay').click(function(){ restart(); });
    if(d[13]) { restart(); }
  }

}, 20);


})();

//shooting star
const star_one = document.getElementById("star_one");
const star_two = document.getElementById("star_two");

let whatClass = true;

setInterval(function() {
	if (whatClass===false) {
		star_two.classList.add("noShow");
    star_one.classList.remove("noShow");
	} else {
		star_one.classList.add("noShow");
    star_two.classList.remove("noShow");
	}
	whatClass=!whatClass;
}, 80);

// Your code here...
(function() {

  // ...

})();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console