Project3_re

Tutorials of (Project3_re) by 許皦侖

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Project3_re</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400,500,600'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<div class="daybox">
  <label>
    <input id="switch_weekview" type="checkbox"/>
    <div class="top">
      <div class="b">
        <div class="moon"></div>
        <div class="rain rain1"></div>
        <div class="rain rain2"></div>
        <div class="rain rain3"></div>
        <div class="rain rain4"></div>
        <div class="cloud"></div>
        <div class="cover"></div>
      </div>
      <div class="text_area">
        <div class="location">Ulm</div>
        <div class="weather_type">Rainy</div>
        <div class="temperature">6°C</div>
      </div>
      <div class="info">
        <div class="name">
          <div class="sunrise">sunrise:</div>
          <div class="sunset">sunset:</div>
          <div class="chance_of_rain">Chance of Rain:</div>
          <div class="humidity">Humidity:</div>
          <div class="wind">Wind:</div>
          <div class="feels_like">Feels like:</div>
          <div class="precipitation">Precipitation:</div>
          <div class="pressure">Pressure:</div>
          <div class="visibility">Visibility:</div>
          <div class="uv">UV Index:</div>
        </div>
        <div class="value">
          <div class="sunrise">7:24 AM</div>
          <div class="sunset">4:43 AM</div>
          <div class="chance_of_rain">80%</div>
          <div class="humidity">92%</div>
          <div class="wind">N 1 m/s</div>
          <div class="feels_like">5°C</div>
          <div class="precipitation">0.0 cm</div>
          <div class="pressure">1,026 mb</div>
          <div class="visibility">9.1 km</div>
          <div class="uv">0</div>
        </div>
      </div>
      <svg class="templine">
        <circle cx="28" cy="60" r="3"></circle>
        <circle cx="89" cy="30" r="3"></circle>
        <circle cx="150" cy="45" r="3"></circle>
        <circle cx="211" cy="60" r="3"></circle>
        <circle cx="272" cy="30" r="3"></circle>
        <circle cx="333" cy="45" r="3"></circle>
        <circle cx="394" cy="30" r="3"></circle>
        <polyline class="line" points="0,40 28,60 89,30 150,45 211,60 272,30 333,45 394,30 455,60"></polyline>
      </svg>
      <div class="today">Friday</div>
      <div class="high_temp">8</div>
      <div class="low_temp">3</div>
    </div>
    <div class="middle">
      <div class="time_weather"> 
        <div class="time">Now</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <rect class="rain" x="-18" y="20" width="5" height="10"></rect>
          <rect class="rain" x="-7" y="18" width="5" height="10"></rect>
          <rect class="rain" x="8" y="22" width="5" height="10"></rect>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="temperature">6°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">11PM</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <rect class="rain" x="-18" y="20" width="5" height="10"></rect>
          <rect class="rain" x="-7" y="18" width="5" height="10"></rect>
          <rect class="rain" x="8" y="22" width="5" height="10"></rect>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="temperature">8°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">12PM</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"> </circle>
        </svg>
        <div class="temperature">7°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">1AM</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <circle class="sun" cx="5" cy="-5" r="20"></circle>
          <circle class="moon" cx="-7" cy="7" r="20"></circle>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="temperature">6°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">2AM</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <circle class="sun" cx="0" cy="0" r="20"></circle>
          <circle class="moon" cx="-7" cy="7" r="20"></circle>
        </svg>
        <div class="temperature">8°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">3AM</div>
        <svg class="weather" viewBox="-22 -20 120 120">
          <path class="snow" d="M69.808,56.714l-6.783-3.916l6.076-2.852l-1.821-3.885l-8.787,4.115l-3.552-2.048l6.079-2.845l-1.64-3.511		l1.628-3.474l-6.076-2.845l3.555-2.048l8.791,4.109l1.818-3.885l-6.079-2.845l6.789-3.916l-2.148-3.716l-6.786,3.916l0.57-6.686		l-4.271-0.367l-0.828,9.668l-3.555,2.055l0.579-6.687l-3.692-0.317l-2.356-3.38l-5.506,3.841v-3.848l7.962-5.56l-2.456-3.517		l-5.506,3.841V8.229h-4.286v7.881l-5.503-3.841l-2.456,3.517l7.959,5.56v3.848l-5.503-3.841l-2.27,3.25l-3.956,0.343l0.576,6.686		l-3.343-1.924l-0.828-9.674L17.93,20.4l0.576,6.692l-6.83-3.94l-2.148,3.716l6.83,3.935l-6.076,2.845l1.815,3.885l8.791-4.109		l3.337,1.924l-6.076,2.845l1.674,3.58l-1.687,3.611l6.083,2.851l-3.34,1.924l-8.784-4.115l-1.821,3.878l6.079,2.858l-6.826,3.935		l2.145,3.716l6.823-3.94l-0.576,6.686l4.271,0.367l0.831-9.662l3.343-1.93l-0.579,6.68l4.112,0.349l2.126,3.05l5.503-3.841v4.097		l-7.959,5.56l2.456,3.517l5.503-3.841v7.832h4.286v-7.832l5.506,3.841l2.456-3.517l-7.962-5.56v-4.097l5.506,3.841l2.213-3.175		l3.838-0.33l-0.576-6.68l3.558,2.048l0.828,9.668l4.271-0.368l-0.576-6.686l6.789,3.916L69.808,56.714z M58.362,41.791l-7.95,3.723		l-6.453-3.729l6.443-3.716L58.362,41.791z M49.033,25.387l-0.772,8.965l-6.45,3.723v-7.645L49.033,25.387z M30.123,25.256		l7.402,5.173v7.645l-6.63-3.829L30.123,25.256z M20.566,41.791l8.187-3.829l6.624,3.822l-6.63,3.835L20.566,41.791z M30.132,58.121		l0.76-8.791l6.633-3.829v7.452L30.132,58.121z M49.021,57.99l-7.209-5.036v-7.452l6.453,3.729L49.021,57.99z"></path>
        </svg>
        <div class="temperature">7°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">4AM</div>
        <svg class="weather" viewBox="-22 -20 120 120">
          <path class="snow" d="M69.808,56.714l-6.783-3.916l6.076-2.852l-1.821-3.885l-8.787,4.115l-3.552-2.048l6.079-2.845l-1.64-3.511		l1.628-3.474l-6.076-2.845l3.555-2.048l8.791,4.109l1.818-3.885l-6.079-2.845l6.789-3.916l-2.148-3.716l-6.786,3.916l0.57-6.686		l-4.271-0.367l-0.828,9.668l-3.555,2.055l0.579-6.687l-3.692-0.317l-2.356-3.38l-5.506,3.841v-3.848l7.962-5.56l-2.456-3.517		l-5.506,3.841V8.229h-4.286v7.881l-5.503-3.841l-2.456,3.517l7.959,5.56v3.848l-5.503-3.841l-2.27,3.25l-3.956,0.343l0.576,6.686		l-3.343-1.924l-0.828-9.674L17.93,20.4l0.576,6.692l-6.83-3.94l-2.148,3.716l6.83,3.935l-6.076,2.845l1.815,3.885l8.791-4.109		l3.337,1.924l-6.076,2.845l1.674,3.58l-1.687,3.611l6.083,2.851l-3.34,1.924l-8.784-4.115l-1.821,3.878l6.079,2.858l-6.826,3.935		l2.145,3.716l6.823-3.94l-0.576,6.686l4.271,0.367l0.831-9.662l3.343-1.93l-0.579,6.68l4.112,0.349l2.126,3.05l5.503-3.841v4.097		l-7.959,5.56l2.456,3.517l5.503-3.841v7.832h4.286v-7.832l5.506,3.841l2.456-3.517l-7.962-5.56v-4.097l5.506,3.841l2.213-3.175		l3.838-0.33l-0.576-6.68l3.558,2.048l0.828,9.668l4.271-0.368l-0.576-6.686l6.789,3.916L69.808,56.714z M58.362,41.791l-7.95,3.723		l-6.453-3.729l6.443-3.716L58.362,41.791z M49.033,25.387l-0.772,8.965l-6.45,3.723v-7.645L49.033,25.387z M30.123,25.256		l7.402,5.173v7.645l-6.63-3.829L30.123,25.256z M20.566,41.791l8.187-3.829l6.624,3.822l-6.63,3.835L20.566,41.791z M30.132,58.121		l0.76-8.791l6.633-3.829v7.452L30.132,58.121z M49.021,57.99l-7.209-5.036v-7.452l6.453,3.729L49.021,57.99z"> </path>
        </svg>
        <div class="temperature">8°C</div>
      </div>
    </div>
    <div class="bottom">
      <div class="week_weather">
        <div class="a weekday">Saturday </div>
        <svg class="a weather" viewbox="-50 -50 100 100">
          <rect class="rain" x="-18" y="20" width="5" height="10"></rect>
          <rect class="rain" x="-7" y="18" width="5" height="10"></rect>
          <rect class="rain" x="8" y="22" width="5" height="10"></rect>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="a high_temperature">7</div>
        <div class="a low_temperature">3</div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Sunday </div>
        <svg class="a weather" viewbox="-50 -50 100 100">
          <rect class="rain" x="-18" y="20" width="5" height="10"></rect>
          <rect class="rain" x="-7" y="18" width="5" height="10"></rect>
          <rect class="rain" x="8" y="22" width="5" height="10"></rect>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="a high_temperature">9</div>
        <div class="a low_temperature">5</div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Monday </div>
        <svg class="a weather" viewBox="-22 -20 120 120">
          <path class="snow" d="M69.808,56.714l-6.783-3.916l6.076-2.852l-1.821-3.885l-8.787,4.115l-3.552-2.048l6.079-2.845l-1.64-3.511		l1.628-3.474l-6.076-2.845l3.555-2.048l8.791,4.109l1.818-3.885l-6.079-2.845l6.789-3.916l-2.148-3.716l-6.786,3.916l0.57-6.686		l-4.271-0.367l-0.828,9.668l-3.555,2.055l0.579-6.687l-3.692-0.317l-2.356-3.38l-5.506,3.841v-3.848l7.962-5.56l-2.456-3.517		l-5.506,3.841V8.229h-4.286v7.881l-5.503-3.841l-2.456,3.517l7.959,5.56v3.848l-5.503-3.841l-2.27,3.25l-3.956,0.343l0.576,6.686		l-3.343-1.924l-0.828-9.674L17.93,20.4l0.576,6.692l-6.83-3.94l-2.148,3.716l6.83,3.935l-6.076,2.845l1.815,3.885l8.791-4.109		l3.337,1.924l-6.076,2.845l1.674,3.58l-1.687,3.611l6.083,2.851l-3.34,1.924l-8.784-4.115l-1.821,3.878l6.079,2.858l-6.826,3.935		l2.145,3.716l6.823-3.94l-0.576,6.686l4.271,0.367l0.831-9.662l3.343-1.93l-0.579,6.68l4.112,0.349l2.126,3.05l5.503-3.841v4.097		l-7.959,5.56l2.456,3.517l5.503-3.841v7.832h4.286v-7.832l5.506,3.841l2.456-3.517l-7.962-5.56v-4.097l5.506,3.841l2.213-3.175		l3.838-0.33l-0.576-6.68l3.558,2.048l0.828,9.668l4.271-0.368l-0.576-6.686l6.789,3.916L69.808,56.714z M58.362,41.791l-7.95,3.723		l-6.453-3.729l6.443-3.716L58.362,41.791z M49.033,25.387l-0.772,8.965l-6.45,3.723v-7.645L49.033,25.387z M30.123,25.256		l7.402,5.173v7.645l-6.63-3.829L30.123,25.256z M20.566,41.791l8.187-3.829l6.624,3.822l-6.63,3.835L20.566,41.791z M30.132,58.121		l0.76-8.791l6.633-3.829v7.452L30.132,58.121z M49.021,57.99l-7.209-5.036v-7.452l6.453,3.729L49.021,57.99z"></path>
        </svg>
        <div class="a high_temperature">3</div>
        <div class="a low_temperature">-2</div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Tuesday </div>
        <svg class="a weather" viewBox="-22 -20 120 120">
          <path class="snow" d="M69.808,56.714l-6.783-3.916l6.076-2.852l-1.821-3.885l-8.787,4.115l-3.552-2.048l6.079-2.845l-1.64-3.511		l1.628-3.474l-6.076-2.845l3.555-2.048l8.791,4.109l1.818-3.885l-6.079-2.845l6.789-3.916l-2.148-3.716l-6.786,3.916l0.57-6.686		l-4.271-0.367l-0.828,9.668l-3.555,2.055l0.579-6.687l-3.692-0.317l-2.356-3.38l-5.506,3.841v-3.848l7.962-5.56l-2.456-3.517		l-5.506,3.841V8.229h-4.286v7.881l-5.503-3.841l-2.456,3.517l7.959,5.56v3.848l-5.503-3.841l-2.27,3.25l-3.956,0.343l0.576,6.686		l-3.343-1.924l-0.828-9.674L17.93,20.4l0.576,6.692l-6.83-3.94l-2.148,3.716l6.83,3.935l-6.076,2.845l1.815,3.885l8.791-4.109		l3.337,1.924l-6.076,2.845l1.674,3.58l-1.687,3.611l6.083,2.851l-3.34,1.924l-8.784-4.115l-1.821,3.878l6.079,2.858l-6.826,3.935		l2.145,3.716l6.823-3.94l-0.576,6.686l4.271,0.367l0.831-9.662l3.343-1.93l-0.579,6.68l4.112,0.349l2.126,3.05l5.503-3.841v4.097		l-7.959,5.56l2.456,3.517l5.503-3.841v7.832h4.286v-7.832l5.506,3.841l2.456-3.517l-7.962-5.56v-4.097l5.506,3.841l2.213-3.175		l3.838-0.33l-0.576-6.68l3.558,2.048l0.828,9.668l4.271-0.368l-0.576-6.686l6.789,3.916L69.808,56.714z M58.362,41.791l-7.95,3.723		l-6.453-3.729l6.443-3.716L58.362,41.791z M49.033,25.387l-0.772,8.965l-6.45,3.723v-7.645L49.033,25.387z M30.123,25.256		l7.402,5.173v7.645l-6.63-3.829L30.123,25.256z M20.566,41.791l8.187-3.829l6.624,3.822l-6.63,3.835L20.566,41.791z M30.132,58.121		l0.76-8.791l6.633-3.829v7.452L30.132,58.121z M49.021,57.99l-7.209-5.036v-7.452l6.453,3.729L49.021,57.99z"></path>
        </svg>
        <div class="a high_temperature">4</div>
        <div class="a low_temperature">0</div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Wednesday </div>
        <svg class="a weather" viewbox="-50 -50 100 100">
          <circle class="sun" cx="8" cy="-8" r="20"></circle>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="a high_temperature">8</div>
        <div class="a low_temperature">4 </div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Thursday</div>
        <svg class="a weather" viewbox="-50 -50 100 100">
          <circle class="sun" cx="0" cy="0" r="20"></circle>
        </svg>
        <div class="a high_temperature">12</div>
        <div class="a low_temperature">6</div>
      </div>
    </div>
  </label>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
@charset "UTF-8";
html, body {
  width: 100%;
  height: 120%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #212121;
}

* {
  position: relative;
  font-family: "Hind Vadodara", sans-serif, "微軟正黑體";
  font-size: 14px;
}

.daybox {
  width: 50%;
  max-width: 400px;
  overflow: hidden;
  background-color: #FAFAFA;
  border-radius: 8px;
  box-shadow: 0px 0px 20px;
}
.daybox:hover .middle {
  height: 90px;
}
.daybox:hover .templine {
  opacity: 0.2;
}
.daybox:hover .bottom {
  height: 240px;
}

label {
  cursor: pointer;
}

.top {
  height: 300px;
  background: linear-gradient(20deg, #19283D, #1D678F);
  background-size: 100% 300%;
  animation: daylight 5s both;
}
@keyframes daylight {
  0% {
    background-position: 100% 30%;
  }
  100% {
    background-position: 100% 100%;
  }
}
.top .b {
  opacity: 1;
  transition: 0.5s;
}
.top .b .moon {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  left: 275px;
  top: 60px;
  background-color: #FFED69;
}
.top .b .cloud {
  width: 130px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 100px;
  border-radius: 25px;
  background-color: #FAFAFA;
  box-shadow: 0px 0px 10px;
  animation: clouddrift 20s infinite;
}
.top .b .cloud:before {
  content: "";
  dispaly: block;
  width: 65px;
  height: 65px;
  position: absolute;
  left: 30px;
  bottom: 25px;
  border-radius: 100%;
  background-color: #FAFAFA;
  box-shadow: 0px 0px 10px;
}
.top .b .cover {
  width: 130px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 100px;
  border-radius: 25px;
  background-color: #FAFAFA;
  animation: clouddrift 20s infinite;
}
@keyframes clouddrift {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}
.top .b .rain {
  width: 4px;
  height: 20px;
  transform: rotate(30deg);
  display: inline-block;
  background-color: #B5BEFF;
  animation: raindrop30 1s infinite linear;
}
@keyframes raindrop30 {
  0% {
    transform: rotate(30deg) translateY(-10px);
  }
  100% {
    transform: rotate(30deg) translateY(30px);
    opacity: 0;
  }
}
.top .b .rain1 {
  left: 240px;
  top: 140px;
}
.top .b .rain2 {
  left: 250px;
  top: 160px;
  animation-delay: 0.2s;
}
.top .b .rain3 {
  left: 260px;
  top: 140px;
  animation-delay: 0.6s;
}
.top .b .rain4 {
  left: 270px;
  top: 160px;
  animation-delay: 0.4s;
}
.top .text_area {
  display: inline-block;
  position: absolute;
  left: 60px;
  top: 30px;
  color: #FAFAFA;
}
.top .text_area .location {
  font-size: 60px;
  font-weight: 500;
  line-height: 60px;
}
.top .text_area .weather_type {
  font-size: 15px;
  text-align: center;
  color: rgba(250, 250, 250, 0.6);
  top: 5px;
}
.top .text_area .temperature {
  font-size: 60px;
  font-weight: 800;
  text-align: center;
}
.top .today {
  position: absolute;
  left: 12px;
  bottom: 3px;
  color: rgba(250, 250, 250, 0.8);
}
.top .high_temp {
  position: absolute;
  left: 350px;
  bottom: 3px;
  color: rgba(250, 250, 250, 0.8);
}
.top .low_temp {
  position: absolute;
  left: 380px;
  bottom: 3px;
  color: rgba(250, 250, 250, 0.4);
}
.top .templine {
  position: absolute;
  width: 100%;
  height: 75px;
  bottom: 15px;
  fill: #FAFAFA;
  stroke: #FAFAFA;
  stroke-width: 2px;
  left: 0px;
  transition: 0.5s;
}
.top .templine .line {
  fill: none;
}
.top .info {
  position: absolute;
  color: #FAFAFA;
  opacity: 0;
  transition: 0.5s;
}
.top .info .name {
  text-align: right;
  left: 200px;
}
.top .info .value {
  text-align: left;
  left: 300px;
  bottom: 209px;
}

.middle {
  width: 120%;
  background-color: #FAFAFA;
  height: 20px;
  transition: 2s;
}
.middle .time_weather {
  width: calc(400px / 6.5 - 4px);
  text-align: center;
  display: inline-block;
  color: #2B2B2B;
}
.middle .time_weather .time {
  font-size: 14px;
  letter-spacing: 1px;
}
.middle .time_weather svg {
  width: 100%;
  max-width: 40px;
  height: 40px;
  top: 3px;
}
.middle .time_weather svg .cloud {
  fill: #B0B0B0;
}
.middle .time_weather svg .rain {
  fill: #B5BEFF;
  animation: raindrop 2s infinite;
}
@keyframes raindrop {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
.middle .time_weather svg .sun {
  fill: #FFED69;
}
.middle .time_weather svg .snow {
  fill: #A8A8A8;
}
.middle .time_weather svg .moon {
  fill: #FAFAFA;
}

.rain:nth-child(4) {
  transition-delay: 1s;
}

.bottom {
  height: 10px;
  background: linear-gradient(-20deg, #B0B0B0, #545454);
  color: #FAFAFA;
  overflow: hidden;
  transition: 2s;
  transition-delay: 0.5s;
  border-radius: 0px 0px 8px 8px;
}
.bottom .week_weather {
  width: 100%;
  max-width: 400px;
  top: 0px;
  height: 40px;
}
.bottom .week_weather .a {
  position: absolute;
}
.bottom .week_weather .weekday {
  top: 10px;
  left: 10px;
}
.bottom .week_weather svg {
  width: 35px;
  height: 35px;
  top: 2px;
  left: 180px;
  margin: 0px;
  padding: 0px;
}
.bottom .week_weather svg .cloud {
  fill: #FAFAFA;
}
.bottom .week_weather svg .rain {
  fill: #B5BEFF;
  animation: raindrop 2s infinite;
}
@keyframes raindrop {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
.bottom .week_weather svg .sun {
  fill: #FFED69;
}
.bottom .week_weather svg .snow {
  fill: #FAFAFA;
}
.bottom .week_weather .high_temperature {
  left: 350px;
  top: 10px;
}
.bottom .week_weather .low_temperature {
  left: 380px;
  top: 10px;
  color: rgba(250, 250, 250, 0.4);
}

#switch_weekview {
  display: none;
}

#switch_weekview:checked + .top .info {
  opacity: 1;
}
#switch_weekview:checked + .top .b {
  opacity: 0.1;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Project3_re ) is write by 許皦侖, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © 許皦侖