Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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.

HTML

              
                <div class="room">
  <div class="window">
    <div class="stars"></div>
    <div class="star"></div>
    <div id="moon" class="moon"></div>
    <div class="cloud"></div>
    <div class="eiffel-tower">
      <div class="platform"></div>
    </div>
    <div class="roof"></div>
    <div class="bush"></div>
  </div>
  <div class="window-sill">
    <div class="cat">
      <div class="head">
        <div class="eyes"></div>
      </div>
      <div class="tail"></div>
    </div>
  </div>
  <div class="info">
    <div class="today">
    <span id="type">Full Moon</span> <span id="count">17 days</span>
    </div>
  </div>
</div>
              
            
!

CSS

              
                :root {
  --wall: #322c3a;
  --sky: #3a2e5d;
  --star: wheat;
  --cat: #131213;
  --frame: #201c26;
  --moon: #eacd97;
  --moon-new: #382c58;
  --frame-shadow: #75637e;
  --cloud: #322751;
  --crater: #f0e4d0; //#d1b787;
}
.room *,
.room *:before,
.room *:after,
.room:before,
.room:after {
  position: absolute;
  box-sizing: border-box;
  margin: auto;
}
 *:before, *:after {
  content: "";
}
.room {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-color: var(--wall);
  background-image: repeating-linear-gradient( to right, #aaa, #aaa 3vh, #bbb 3vh, #bbb 6vh);
  background-blend-mode: multiply;
}
.room:after {
  top: 40vh;
  left: 50%;
  margin-left: -50vh;
  border-bottom: 60vh solid #fff1;
  border-left: 22.5vh solid transparent;
  border-right: 22.5vh solid transparent;
  height: 0;
  width: 100vh;
}

.window {
  height: 70vh;
  width: 58vh;
  top: 15vh;
  left: 0;
  right: 0;
  margin: auto;
  background: var(--sky);
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  overflow: hidden;
  z-index: 1;
}
.window:before {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 3vh solid var(--frame);
  box-shadow: inset 0 0 0 1vh var(--frame-shadow);
}
.window:after {
  width: calc(100% - 6vh);
  height: 3vh;
  border-bottom: 2vh solid var(--frame);
  box-shadow: inset 0 0 0 1vh var(--frame-shadow);
  top: 55%;
  left: 3vh;
  z-index: 5;
}

.window-sill {
  top: 85vh;
  width: 66vh;
  height: 4vh;
  left: 0;
  right: 0;
  border-bottom: 3vh solid var(--frame);
  box-shadow: inset 5vh 0 0 0 #4d3d55, inset -5vh 0 0 0 #4d3d55, inset 0 0 0 1vh var(--frame-shadow);
  z-index: 1;
}

.stars {
  border-radius: 50%;
  width: .125rem;
  height: .125rem;
  background: white;
  left: 30vh;
  top: 10vh;
  box-shadow: -20vh 20vh 0 -1px white, 10vh 10vh 0 1px #fff4, 11vh 11vh 0 -1px #fff;
  z-index: -4;
  filter: drop-shadow(0 0 3px white) drop-shadow(20vh 10vh 0 white) drop-shadow(-23vh -5vh 0 white) drop-shadow(-23vh 5vh 0 white);
}

.cloud {
 width: 6vh;
  height: 2vh;
  background: currentcolor;
  color: var(--cloud);
  top: 23vh;
  left: 20vh;
  border-radius: .5vh;
  box-shadow: -4vh -1.5vh 0 currentcolor, 0 -1.5vh 0 currentcolor, 2vh -1.5vh 0 currentcolor, -10vh 1.5vh 0 currentcolor, -5vh 1.5vh 0 currentcolor, 0vh 1.5vh 0 currentcolor, 5vh 1.5vh 0 currentcolor, -6vh 3vh 0 currentcolor,-8vh 4.5vh 0 currentcolor, -4vh 4.5vh 0 currentcolor, -4vh 4.5vh 0 currentcolor, -4vh 4.5vh 0 currentcolor, 3vh 6vh 0 currentcolor, 1vh 7.5vh 0 currentcolor;
  opacity: .8;
  z-index: -1;
  transform: translate3d(-40vh, 10vh, 0);
  animation: clouds 20s -5s linear infinite;
}
.cloud:before,
.cloud:after {
  box-shadow: inherit;
  background: inherit;
  width: 100%;
  height: 100%;
  transform: translate3d(-30vh, 10vh, 0);
}
.cloud:after {
  transform: translate3d(-60vh, -20vh, 0);
}
@keyframes clouds {
  100% {
    transform: translate3d(90vh, 0, 0);
  }
}

.star {
  top: 30%;
  right: 15vh;
  color: var(--star);
  width: 0;
  height: 0;
  border-right: 1vh solid transparent;
  border-bottom: .7vh solid currentColor;
  border-left: 1vh solid transparent;
  transform: scale(.5) rotate(35deg);
  filter: drop-shadow(-30vh 40vh 0 currentColor) drop-shadow(-15vh 45vh 2px currentColor);
  z-index: -3;
}
.star:before {
  border-bottom: .8vh solid currentColor;
  border-left: .3vh solid transparent;
  border-right: .3vh solid transparent;
  height: 0;
  width: 0;
  top: -.4vh;
  left: -.6vh;
  content: '';
  transform: rotate(-35deg);
}
.star:after {
  top: 0;
  left: -1vh;
  width: 0;
  height: 0;
  border-right: 1vh solid transparent;
  border-bottom: .7vh solid currentColor;
  border-left: 1vh solid transparent;
  transform: rotate(-70deg);
}

.moon {
  width: 8vh;
  height: 8vh;
  border-radius: 50%;
  left: 36vh;
  top: 25vh;
  z-index: -2;
  overflow: hidden;
  background-color: var(--sky);
  &:after {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--moon);
    box-shadow: 0 0 1vh pink;
  }
  &:before {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-image: radial-gradient(circle, var(--crater) 0%, var(--crater) 25%, transparent 25%), radial-gradient(circle, var(--crater) 0%, var(--crater) 20%, transparent 20%),  radial-gradient(circle, var(--crater) 0%, var(--crater) 25%, transparent 25%), radial-gradient(circle, var(--crater) 0%, var(--crater) 25%, transparent 25%), radial-gradient(circle, var(--crater) 0%, var(--crater) 25%, transparent 25%);
    background-position: 0 2.5vh, 4vh 4vh, 4.5vh 1vh, 3vh 3vh, 2vh 1vh;
    background-repeat: no-repeat;
    background-size: 4vh 6vh, 4vh 4vh, 3vh 3vh, 2vh 2vh, 1.5vh 2vh;
    z-index: 2;
    mix-blend-mode: multiply;
    opacity: 1;
  }
}
[class*=moon-new-] {
  box-shadow: -1vh 1vh 2vh -1.5vh #ffc0cb, -1vh -1vh 2vh -1.5vh #ffc0cb, -1.5vh 0 2vh -2vh #ffc0cb85;
}
[class*=moon-full-] {
  box-shadow: 1.5vh 1vh 2vh -2vh #ffc0cb, 1.5vh -1vh 2vh -2vh #ffc0cb, 1.5vh 0 2vh -2vh #ffc0cb85;
}

.moon-new-1,
.moon-new-2,
.moon-new-3,
.moon-new-4,
.moon-new-5,
.moon-new-6,
.moon-new-7,
.moon-full-8,
.moon-full-9,
.moon-full-10,
.moon-full-11,
.moon-full-12,
.moon-full-13,
.moon-full-14 {
  &:after {
    background: var(--sky);
  }
}
.moon-new-1,
.moon-new-2,
.moon-new-3,
.moon-new-4,
.moon-new-5,
.moon-new-6,
.moon-new-7 {
  background: linear-gradient(90deg, var(--moon) 4vh, transparent 0);
}
.moon-full-14,
.moon-full-13,
.moon-full-12,
.moon-full-11,
.moon-full-10,
.moon-full-9,
.moon-full-8 {
  background: linear-gradient(90deg, transparent 4vh, var(--moon) 0);
}
.moon-full-14,
.moon-full-13,
.moon-full-12,
.moon-full-11,
.moon-full-10,
.moon-full-9,
.moon-full-8 {
  &:after {
    box-shadow: inset -1vh 0 1.5vh -1vh pink;
  }
}
.moon-full-14,
.moon-full-13,
.moon-full-12 {
  &:after {
    width: 95%;
    border-radius: 4vh;
  }

}
.moon-full-11 {
  &:after {
    width: 90%;
    border-radius: 4vh 3.5vh 3.5vh 4vh  / 4vh 50% 50% 4vh;
  }
}
.moon-full-10 {
  &:after {
    width: 85%;
    border-radius: 0 3vh 3vh 0  / 0 50% 50% 0;
  }

}
.moon-full-9 {
  &:after {
    width: 76%;
    border-radius: 0 2vh 2vh 0  / 0 50% 50% 0 ;
  }

}
.moon-full-8 {
  &:after {
    width: 60%;
    height: 120%;
    border-radius: 0 1.5vh 1.5vh 0  / 0 50% 50% 0 ;
  }
}
.moon-new-1,
.moon-new-2,
.moon-new-4,
.moon-new-3,
.moon-new-5,
.moon-new-6, 
.moon-new-7,
.moon-full-7,
.moon-full-6,
.moon-full-5,
.moon-full-4,
.moon-full-3,
.moon-full-2,
.moon-full-1 {
  &:after {
    right: 0;
    left: auto;
  }
}
.moon-full-7 {
  &:after {
    width: 50%;
    height: 140%;
    border-radius: 0 50% 50% 0;
  }

}
.moon-full-6 {
  &:after {
    width: 60%;
    height: 140%;
    border-radius: 50%;
  }

}
.moon-full-5 {
  &:after {
    width: 70%;
    border-radius: 2.5vh 0 0 2.5vh  / 50% 0 0 50%;
  }

}
.moon-full-4 {
  &:after {
    width: 75%;
    border-radius: 2vh 0 0 2vh  / 4vh 0 0 4vh;
  }
}
.moon-full-3 {
  &:after {
    width: 86%;
    border-radius: 3vh 0 0 3vh  / 4vh 0 0 4vh;
  }
  
}
.moon-full-2,
.moon-full-1 {
 &:after {
    width: 90%;
    border-radius: 4vh 0 0 4vh;
  }
}
.moon-full {
  box-shadow: 0 0 3vh -1vh pink, 0 0 1.5vh -.25vh pink;
}

.moon-new-14,
.moon-new-13,
.moon-new-12 {
  &:after {
    width: 90%;
    border-radius: 0 3.5vh 3.5vh 0 / 0 4vh 4vh 0;
  }
}

.moon-new-11 {
  &:after {
    width: 85%;
    border-radius: 0 3vh 3vh 0 / 0 4vh 4vh 0;
  }
}

.moon-new-10 {
  &:after {
    width: 75%;
    border-radius: 0 2vh 2vh 0 / 0 4vh 4vh 0;
  }
}

.moon-new-9 {
  &:after {
    width: 60%;
    border-radius: 0 1vh 1vh 0 / 0 4vh 4vh 0;
  }
}

.moon-new-8 {
  &:after {
    width: 50%;
    border-radius: 0;
  }
}
.moon-new-1,
.moon-new-2,
.moon-new-3,
.moon-new-4,
.moon-new-5,
.moon-new-6, 
.moon-new-7 {
  &:after {
    box-shadow: inset 1vh 0 1.5vh -1vh pink;
  }
}
.moon-new-5,
.moon-new-6, 
.moon-new-7 {
  &:after {
    height: 140%;
    width: 60%;
    border-radius: 50%;
  }
}
.moon-new-4,
.moon-new-3 {
  &:after {
    width: 78%;
    border-radius: 2.25vh 0 0 2.25vh / 50% 0 0 50%;
  }
}
.moon-new-2 {
  &:after {
    width: 88%;
    border-radius: 3.25vh 0 0 3.25vh / 50% 0 0 50%;
  }
}
.moon-new-1 {
  &:after {
    width: 96%;
    border-radius: 4vh 0 0 4vh;
  }
}
.moon-new {
  background: var(--moon-new);
  &:after {
    width: 0;
  }
  &:before {
    opacity: .15;
  }
}

.cat {
  color: var(--cat);
  background: currentcolor;
  height: 20vh;
  width: 22vh;
  bottom: 0;
  border-radius: 6vh 50%  0 0;
}
.tail {
  width: 22vh;
  height: 0;
  color: inherit;
  bottom: 0;
  left: 100%;
  border: 3vh solid;
  border-left: 0;
  border-top: 0;
  border-radius: 0  0 5vh 0;
  animation: tail 10s infinite;
}
.tail:after {
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  background: var(--cat);
  top: -1.5vh;
  right: -3vh;
  
}
@keyframes tail {
  10%, 30% {
  height: 6vh;
  width: 15vh;
  }
  20%, 35%, 75%, 100% {
  height: 0;
  width: 22vh;
  }
  60% {
    height: 4vh;
    width: 20vh;
  }
}
.head {
  background: inherit;
  left: 0;
  bottom: 10vh;
  width: 10vh;
  height: 18vh;
  border-radius: 5vh 5vh 0 0;
  animation: head-move 6s -2s infinite alternate;
}
.head:before,
.head:after {
  width: 0;
  height: 0;
  top: -1.6vh;
  border-bottom: 6vh solid;
}
.head:before {
  border-right: 7vh solid transparent;
  animation: ears-move-l 6s infinite alternate;
}
.head:after {
  border-left: 7vh solid transparent;
  right: 0;
  animation: ears-move-r 6s infinite alternate;
}

.eyes {
  border-radius: 50%;
  width: 1vh;
  height: 1vh;
  background: var(--frame-shadow);
  top: 4vh;
  left: 3vh;
  z-index: 1;
  box-shadow: 3vh 0 0 var(--frame-shadow);
  animation: eyes-move 6s -.5s infinite alternate;
}

@keyframes head-move {
  25%, 100% {
    transform: translate3d(0, 5vh, 0)
  }
}

@keyframes ears-move-l {
  25%, 100% {
    transform: translate3d(1vh, -.5vh, 0)
  }
}
@keyframes ears-move-r {
  25%, 100% {
    transform: translate3d(-.5vh, -.5vh, 0)
  }
}

@keyframes eyes-move {
  25%, 100% {
    transform: translate3d(2.5vh, -1vh, 0)
  }
}

.eiffel-tower {
  color: #2f244c;
  width: 20vh;
  height: 8vh;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 0 0 1.5vh currentcolor;
  border: 3vh solid;
  border-bottom: none;
  bottom: 8vh;
  right: 0;
  z-index: -2;
}
.eiffel-tower:before,
.eiffel-tower:after {
  height: 40vh;
  width: 10vh;
  bottom: 6vh;
  border: 2.5vh solid;
}
.eiffel-tower:before {
  left: -1.75vh;
  border-left: none;
  border-top: none;
  border-radius: 0 0 100% 0;
}
.eiffel-tower:after {
  right: -1.75vh;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 100%;
}
.platform {
  width: 4vh;
  height: 3vh;
  background: currentcolor;
  top: -40vh;
  left: 0;
  right: 0;
  box-shadow: 0 36vh 0 .5vh, 4vh 36vh 0 .5vh, 6.5vh 36vh 0 .5vh, -4vh 36vh 0 .5vh, -6.5vh 36vh 0 .5vh, 0 27vh 0 0, -3vh 27vh 0 0, 3vh 27vh 0 0;
  &:after {
    width: .75vh;
    height: 2vh;
    background: currentcolor;
    top: -3vh;
    left: 0;
    right: 0;
  }
}

.roof {
  width: 16vh;
  height: 12vh;
  color: #221b35;
  background: currentcolor;
  bottom: 3vh;
  left: 36vh;
	//right: 0;
	z-index: -1;
	filter: drop-shadow(-10vh 5vh 0 currentcolor) drop-shadow(-25vh 2vh 0 currentcolor) drop-shadow(-12vh -5vh 0 #352b53) drop-shadow(0vh 4vh 3vh #a18b9f);
  &:before {
    width: 1.25vh;
    height: 3vh;
    top: -5.5vh;
    left: 3vh;
    background: currentcolor;
    box-shadow: 6vh .5vh 0 0 currentcolor, 8vh 0 0 0 currentcolor, 2vh 1vh 0 0 currentcolor;
  }
  &:after {
    border-style: solid;
    border-color: transparent transparent currentcolor transparent;
    border-width: 0 2vh 4vh 2vh;
    height: 0;
    bottom: 100%;
    width: inherit;
  }
}

.bush {
  width: 15vh;
  height: 10vh;
  color: #131515;
  background: currentcolor;
  border-radius: 50vh 50vh 0 0;
  bottom: 1vh;
  right: 0;
  box-shadow: -6vh 2vh 0 -2vh currentcolor, -12vh 2vh 0 -2vh currentcolor, -18vh 3vh 0 -3vh currentcolor, -22vh 3vh 0 0vh currentcolor, -32vh 3vh 0 2vh currentcolor;
  z-index: -1;
}

.info {
  top: 45vh;
	right: calc(50% - 46vh);
	z-index: 0;
	width: 15vh;
	height: 20vh;
	background: #443f4a;
	border-radius: 0 0 0 0;
	text-align: center;
	box-shadow: -2px 4px 0 -2px #221e28, 0px 8px 0 -4px #36333a, 0px 12px 0 -6px #1a171e;
  color: #111;
  &:after {
    width: 1vh;
    height: 1vh;
    background: currentcolor;
    border-radius: 50%;
    top: 1vh;
    box-shadow: 0 0 .125vh .25vh #56505d;
  }
}
.today {
  width: 100%;
	height: 85%;
	top: 15%;
	background: inherit;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	box-shadow: inset 0 .25vh #56505d;
	display: flex;
	justify-content: center;
	align-items: center;
  flex-direction: column;
	border-top: .3275vh dashed #1b171f;
  font-family: Limelight, serif;
  font-size: 3.5vh;
  padding: 1vh;
  span {
    position: static;
  }
}
              
            
!

JS

              
                const today = moment().format('YYYY-MM-DD')

const fullMoonDays = ['2020-03-09','2020-04-08', '2020-05-07', '2020-06-05', '2020-07-05', '2020-08-03', '2020-09-02', '2020-10-01', '2020-10-31', '2020-11-30', '2020-12-30']
const newMoonDays = ['2020-02-23','2020-03-24', '2020-04-23', '2020-05-22', '2020-06-21', '2020-07-20', '2020-08-19', '2020-09-17', '2020-10-16', '2020-11-15', '2020-12-14']

const nextFull = fullMoonDays.find(el => moment(el, 'YYYY-MM-DD').format('YYYY-MM-DD') >= today )
const nextNew = newMoonDays.find(el => moment(el, 'YYYY-MM-DD').format('YYYY-MM-DD') >= today)

const diff = moment(nextFull).diff(today, 'days')
const diffNew = moment(nextNew).diff(today, 'days')

const type = diff < diffNew ? "Full Moon" : 'New Moon'
const diffText = Math.min(diff, diffNew) > 1 ? `${Math.min(diff, diffNew)} days` : Math.min(diff, diffNew) === 1 ? `1 day` : ''

let className = ''
if (diff < diffNew) {
  className = diffNew > 0 ? `moon-full-${diff}` : 'moon-full'
} else {
  className = diffNew > 0 ? `moon-new-${diffNew}` : 'moon-new'
  
}
//className = 'moon-full-6'
const MOON = document.getElementById("moon")
const TYPE = document.getElementById("type")
const COUNT = document.getElementById("count")
MOON.classList.add(className)
TYPE.innerHTML = type
COUNT.innerHTML = diffText


              
            
!
999px

Console