Week 5 Homework Team P’Getty G.C (Copy 4689)

✨ นายดรณ์ นุตเวช

<!DOCKTYPE html>
<html>
  <head>
    <title>HAPPY FAMILY</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
    <style>
      body{
  background-image: url("https://cdn.mos.cms.futurecdn.net/HuGGeENt6kGyixe3hT9tnY.jpg");
  background-size: 150%;
  animation: gradient 60s ease infinite;
}
@keyframes gradient {
	0%{
		background-position: 0%;
	}
  100%{
    background-position: 100%;
  }
}
.h1{
   color: #FFFFFF;
   font-family: 'Russo One', sans-serif;
   font-weight: normal;
   text-align: center;
   font-size: 4em;
}
.h2 {
  color: #FFFFFF;
  font-family: 'Russo One', sans-serif;
  font-weight: normal;
  text-align: center;
  font-size: 2em;
}

.canvas{
  width: 800px;
  height: 500px;
  background: black;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -250px 0px 0px -400px;
  border-style: solid;
  border-color: Cornsilk;
  border-width: 8px;
  animation: fly 5s ease infinite;
}

.bg{
  width: 800px;
  height: 500px;
  position: absolute;
}

.sun{
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: absolute;
  bottom: 70px;
  left: 25px;
  animation: hithere 2s ease infinite;
}

.mercury{
  width: 80px;
  height: 80px;
  background: ;
  border-radius: 50px;
  position: absolute;
  bottom: 80px;
  left: 193px;
  animation: dueng 2s ease infinite;
}

.venus{
  width: 80px;
  height: 80px;
  background: ;
  border-radius: 50px;
  position: absolute;
  bottom: 232px;
  left: 167px;
  animation: dueng 2s ease infinite;
}

.earth{
  width: 80px;
  height: 80px;
  background: ;
  border-radius: 50px;
  position: absolute;
  bottom: 145px;
  left: 285px;
  animation: dueng 2s ease infinite;
}
.mars{
  width: 80px;
  height: 80px;
  background: ;
  border-radius: 50px;
  position: absolute;
  bottom: 300px;
  left: 300px;
  animation: dueng 2s ease infinite;
}
.jupiter{
  width: 80px;
  height: 80px;
  background: ;
  border-radius: 50px;
  position: absolute;
  bottom: 245px;
  left: 413px;
  animation: dueng 2s ease infinite;
}
.saturn{
  width: 80px;
  height: 80px;
  background: ;
  border-radius: 50px;
  position: absolute;
  bottom: 125px;
  right: 175px;
  animation: dueng 2s ease infinite;
}
.uranus{
  width: 80px;
  height: 80px;
  background: ;
  border-radius: 50px;
  position: absolute;
  top: 60px;
  right: 160px;
  animation: dueng 2s ease infinite;
}
.neptune{
  width: 80px;
  height: 80px;
  background: ;
  border-radius: 50px;
  position: absolute;
  top: 130px;
  right: 52px;
  animation: dueng 2s ease infinite;
}
@keyframes dueng {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-15px);}
	60% {transform: translateY(-15px);}
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}
.txt{
  width: 500px;
  height: 80px;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 33px;
  position: absolute;
  top: 35px;
  left: 40px;
  animation: shake 4.5s ease infinite;
}
@keyframes shake {
	50%{transform: translateX(40px);}
	100%{transform: translateX(0px);}
}
.pluto{
  width: 80px;
  height: 80px;
  background: ;
  border-radius: 50px;
  position: absolute;
  top: 25px;
  right: 17px;
  animation: hithere 2s ease infinite;
}
.getty{
  width: 90px;
  height: 25px;
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  bottom: 8px;
  left: 30px;
  text-shadow: 3px 3px black;
  text-align: center;
}
.jam{
  width: 80px;
  height: 25px;
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  bottom: 50px;
  right: 150px;
  text-shadow: 3px 3px black;
  text-align: center;
}
.v{
  width: 73px;
  height: 25px;
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  bottom: 235px;
  left: 325px;
  text-shadow: 3px 3px black;
  text-align: center;
}
.dorn{
  width: 73px;
  height: 25px;
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  bottom: 60px;
  left: 320px;
  text-shadow: 3px 3px black;
  text-align: center;
}
.nut{
  width: 110px;
  height: 25px;
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 230px;
  right: 25px;
  text-shadow: 3px 3px black;
  text-align: center;
}
.art{
  width: 90px;
  height: 25px;
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  bottom: 43px;
  left: 200px;
  text-shadow: 3px 3px black;
  text-align: center;
}
.sin{
  width: 93px;
  height: 27px;
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 183px;
  right: 137px;
  text-shadow: 3px 3px black;
  text-align: center;
}
.fight{
  width: 80px;
  height: 27px;
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  bottom: 180px;
  left: 180px;
  text-shadow: 3px 3px black;
  text-align: center;
}
.jabont{
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 95px;
  right: 15px;
  text-shadow: 3px 3px black;
  text-align: center;
}
.paw{
  width: 90px;
  height: 27px;
  display: block;
  background: black;
  color: white;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  position: absolute;
  bottom: 142px;
  left: 445px;
  text-shadow: 3px 3px black;
  text-align: center;
}

@keyframes fly {
  50%{transform: translateY(-30px);}
/* 	70%{transform: translateY(50px);} */
  100%{transform: translateY(0px);}
}
    </style>
  </head>
  <h1 class="h1">HAPPY FAMILY</h1>
    <h2 class="h2"> Team P'Getty GroupC </h2>
    <div class="canvas">
      <div class="bg">
        <img src="https://wallpaperaccess.com/full/191030.jpg" width="800" height="500">
        <div class="sun">
          <img src="https://cdn.discordapp.com/attachments/798210308744806400/809752202671030322/pgettypng.png" width="120" height="120">
        </div>
        <div class="mercury">
          <img src="https://cdn.discordapp.com/attachments/798210308744806400/809756030674272257/artpng.png" width="85" height="85">
        </div>
        <div class="venus">
          <img src="https://cdn.discordapp.com/attachments/798210308744806400/809757406954782740/fightpng.png" width="100" height="100">
        </div>
        <div class="earth">
          <img src="https://media.discordapp.net/attachments/798210308744806400/809759139324493864/dornpng.png?width=676&height=676" width="140" height="135">
        </div>
        <div class="mars">
          <img src="https://cdn.discordapp.com/attachments/798210308744806400/809761930805116968/vpng.png" width="120" height="120">
        </div>
        <div class="jupiter">
          <img src="https://cdn.discordapp.com/attachments/798210308744806400/809763056204644382/pawpng.png" width="150" height="150">
        </div>
        <div class="saturn">
          <img src="https://cdn.discordapp.com/attachments/798210308744806400/809764893522788372/jampng.png" width="130" height="130">
        </div>
        <div class="uranus">
          <img src="https://cdn.discordapp.com/attachments/798210308744806400/809766052485005322/sinpng.png" width="120" height="120">
        </div>
        <div class="neptune">
          <img src="https://media.discordapp.net/attachments/798210308744806400/809767075539058688/nutpng.png?width=676&height=676" width="100" height="100">
        </div>
        <div class="txt">
          MULTISOLAR SYSTEM
        </div>
        <div class="pluto">
          <img src="https://cdn.discordapp.com/attachments/798210308744806400/809780601368215582/jabontpng.png" width="67" height="67">
        </div>
        <div class="getty">
          P'Getty
        </div>
        <div class="jam">
          Jam
        </div>
        <div class="paw">
          Paul
        </div>
        <div class="v">
          Vee
        </div>
        <div class="dorn">
          Dorn
        </div>
        <div class="nut">
          Nut
        </div>
        <div class="art">
          Art
        </div>
        <div class="sin">
          Sin
        </div>
        <div class="fight">
          Fight
        </div>
        <div class="jabont">
          P'Jabont
        </div>
        </div>
     </div>
    </div>
  </body>
</html>