Game test (Copy 12319)

✨ JIRAPHAN KWANRUK

<html>
  <head>
   
    <title>How to train you dragon but
    </title>
    <style>
      body{
        height:1080px;
        width:1920px;
			display: flex;
  			overflow: hidden;
        	margin:0;
        background-color
      }
      body img{
        height: 820px;
        width:1480px;
			display: flex;
  			overflow: hidden;
  			 background-attachment: fixed;
        	margin:0;
       background-image:url("https://wallpapercave.com/wp/wp2894323.jpg");
        background-blend-mode:lighten;
      }
      .frame{
        overflow:hidden;
			width:100%;
        height:100%;
        position:relative;
      }
      .bg{
        position:absolute;
        z-index:-1;
    		}
      .dragon{
        position:absolute;
        font-size:2em
  
		}
        @keyframes fly-l
      {
  			to {transform:translatex(-140vw);}
      }
      @keyframes dookdik{
		50% {transform: translatey(20px);}
      }
       @keyframes fly-r
      {
  			to {transform:translatex(150vw);}
      }
      @keyframes fall
      {
        to{transform:translatey(50vw)};
      }
      .dragon img{
		width:70%;
      height:auto;
      }

#dragon-1{
        top:400px;
        right:-100px;
        animation:dookdik 1s linear 1s infinite, fly-l 15s infinite linear;
       }
      #dragon-2{
        	right:200px;
			top:0px;
        animation:dookdik 1s 2s linear infinite;
    
      }
      #dragon-3{
        top:0px;
        left:250px;
        animation:dookdik 2s linear 1s infinite;
       
		}
      #dragon-4{
			top:200px;
  	 animation:dookdik 1s linear 1s  infinite, fly-r 15s 1s infinite linear;
        
      }
      #dragon-5{
		top:20px;
      right:500px;
      animation:fall 6s 4s infinite alternate;
      }
      .screenbox{
		margin: auto;
      height: 70%;
      width: 70%;
      border: 3px solid green;
      padding: 10px;
      
      }
      
    
    </style>
  </head>
  <body>
    <div class = "screenbox">
    
  	<div class = 'frame'>
     <div class = 'bg'>
       <img src = 'https://cdn.discordapp.com/attachments/930100919956287498/940583603220381716/dragonbackground.png'>
     </div>
     <div class = 'dragon' id = 'dragon-1'>1
        <img src = 'https://cdn.discordapp.com/attachments/933642173247795233/940545689115586560/dragon1.png'>
     </div>
       <div class = 'dragon' id = 'dragon-2'>2
        <img src = 'https://cdn.discordapp.com/attachments/933642173247795233/940579044079054868/dragonflip.png'>
     </div>
       <div class = 'dragon' id = 'dragon-3'>3
        <img src = 'https://cdn.discordapp.com/attachments/930100919956287498/940583284289716244/451-4516634_train-your-dragon-dragons-png-download-.png'>
     </div>
      <div class = 'dragon' id = 'dragon-4'>4
        <img src = 'https://media.discordapp.net/attachments/930100919956287498/940584685132734464/how_to_train_your_dragon_3___light_fury_png__by_mintmovi3_dcuyfjw-fullview.png'>
     </div>
      <div class = 'dragon' id = 'dragon-5'>5
        <img src = 'https://cdn.discordapp.com/attachments/930100919956287498/940582598441328660/0c17cf5da017995b32b9fcafe2b93b7b-dreamworks-dragons-httyd-dragons.png'>
     </div>

</div>
        </div>

</body>
</html>