CSS quests | Flying Rocket by Manuel Matuzovic

Flying Rocket by

Manuel Matuzovic

On: 14 Aug 2016

<div class="wrapper">
  <div class="mountain mountain__one"></div>
  <div class="mountain mountain__two"></div>
  <div class="mountain mountain__three"></div>
  <div class="mountain mountain__four"></div>

  <div class="star star__1"></div>
  <div class="star star__2"></div>
  <div class="star star__3"></div>
  <div class="star star__4"></div>
  <div class="star star__5"></div>
  <div class="star star__6"></div>
  <div class="star star__7"></div>

  <div class="rocket">
    <div class="rocket__part rocket__top"></div>

    <div class="rocket__part rocket__leaf rocket__topleft"></div>
    <div class="rocket__part rocket__leaf rocket__topright"></div>
    <div class="rocket__part rocket__leaf rocket__centerleft"></div>
    <div class="rocket__part rocket__leaf rocket__centerright"></div>
    <div class="rocket__part rocket__leaf rocket__bottomleft"></div>
    <div class="rocket__part rocket__leaf rocket__bottomright"></div>

    <div class="rocket__part rocket__center"></div>
    <div class="rocket__part rocket__stem"></div>
  </div>
  
  <div class="moon"></div>
</div>

<div class="definition">
  <strong>rocket noun (PLANT)</strong>
  a plant whose long green leaves are used in salads
</div>

.mountain {
  border-style: solid;
  border-width: 160px 20px 20px 160px ;
  border-color: #dedede transparent transparent #789 ;
  bottom: -100px;
  width: 0;
  height: 0;
  transform: rotate(45deg);
  position: absolute;
}
.mountain__one {
  left: 0px;
  z-index: 3;
  bottom: -180px;
}
.mountain__two {
  left: 220px;
  z-index: 2;
}
.mountain__three {
  border-width: 200px 5px 5px 240px;
  bottom: -120px;
  left: 90px;
  z-index: 1;
  transform: rotate(39deg);
}
.mountain__four {
  left: 130px;
  z-index: 3;
  bottom: -155px;
}
.star {
  transform: rotate(45deg);
  width: 4px;
  height: 4px;
  background: #ffffff;
  position: absolute;
  box-shadow: 0 0 4px #ffffff;
  animation: twinkle 1.4s infinite alternate;
}
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
.star__1 {
  bottom: 200px;
  left: 50px;
}
.star__2 {
  bottom: 240px;
  left: 80px;
}
.star__3 {
  bottom: 310px;
  left: 140px;
}
.star__4 {
  bottom: 210px;
  left: 340px;
}
.star__5 {
  bottom: 180px;
  left: 400px;
}
.star__6 {
  bottom: 270px;
  left: 380px;
}
.star__7 {
  bottom: 310px;
  left: 20px;
}
.rocket {
  width: 30px;
  height: 200px;
  position: absolute;
  left: 210px;
  bottom: 140px;
  transform: rotate(45deg);
  z-index: 1;
}
.rocket__part {
  position: absolute;
  background: green;
  border-radius: 50%;
}
.rocket__top {
  width: 30px;
  height: 100px;
}
.rocket__leaf {
  z-index: 10;
}
.rocket__leaf:before {
  position: absolute;
  left: 50%;
  bottom: -1px;
  margin-left: -2px;
  width: 2px;
  background: linear-gradient(45deg, rgba(103, 177, 103, 0.8) 0%, rgba(103, 177, 103, 0) 100%);
  height: 90%;
  content: "";
  display: block;
}
.rocket__topleft {
  width: 10px;
  height: 50px;
  left: -10px;
  top: 44px;
  transform: rotate(-30deg);
}
.rocket__topleft:before {
  background: linear-gradient(45deg, rgba(103, 177, 103, 0.5) 0%, rgba(103, 177, 103, 0) 100%);
  bottom: -8px;
  margin-left: 1px;
  transform: rotate(-5deg);
}
.rocket__topright {
  width: 12px;
  height: 70px;
  left: 25px;
  top: 30px;
  transform: rotate(25deg);
}
.rocket__topright:before {
  background: linear-gradient(45deg, rgba(103, 177, 103, 0.5) 0%, rgba(103, 177, 103, 0) 100%);
  bottom: 0px;
}
.rocket__centerleft {
  width: 12px;
  height: 60px;
  left: -5px;
  top: 84px;
  transform: rotate(-20deg);
}
.rocket__centerleft:before {
  background: linear-gradient(45deg, rgba(103, 177, 103, 0.5) 0%, rgba(103, 177, 103, 0) 100%);
  bottom: -8px;
  margin-left: 0;
}
.rocket__centerright {
  width: 15px;
  height: 60px;
  left: 22px;
  top: 78px;
  transform: rotate(22deg);
}
.rocket__centerright:before {
  background: linear-gradient(45deg, rgba(103, 177, 103, 0.5) 0%, rgba(103, 177, 103, 0) 100%);
  bottom: -3px;
}
.rocket__bottomleft {
  width: 8px;
  height: 40px;
  left: 5px;
  top: 129px;
  transform: rotate(-30deg);
}
.rocket__bottomleft:before {
  bottom: 4px;
}
.rocket__bottomright {
  width: 8px;
  height: 40px;
  left: 23px;
  top: 124px;
  transform: rotate(30deg);
  z-index: 10;
}
.rocket__center {
  width: 20px;
  height: 100px;
  border-radius: 50%;
  bottom: 20px;
  left: 50%;
  margin-left: -10px;
}
.rocket__stem {
  background: linear-gradient(45deg, #67b167 0%, rgba(103, 177, 103, 0) 100%);
  width: 3px;
  height: 110%;
  left: 50%;
  bottom: -25px;
  margin-left: -1.5px;
  transform: skewX(20deg) skewY(4deg) rotate(20deg);
}
.definition {
  max-width: 460px;
  background: rgba(255, 255, 255, 0.5);
  padding: 0.2em 0.4rem;
  position: absolute;
  bottom: 0;
  z-index: 100;
  font-size: 13px;
  left: 0;
  box-sizing: border-box;
  right: 0;
  margin: auto;
  text-align: center;
}
.wrapper {
  height: 100%;
  width: 490px;
  position: relative;
  margin: 0 auto;
}
.moon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  right: 20px;
  bottom: 220px;
  background: rgba(255, 255, 255, 0.7);
}
body {
  background: #123456;
  font-family: sans-serif;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
* {
  box-sizing: border-box;
}

CSS