The Simple Web (Copy 12547)

✨ SUNAN OUMSUB

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
  <style>
    body {
      margin: 0;
      overflow-x: hidden;
      font-family:sans-serif;
      background : #666;
    }
    .outer-container{
      display: flex;
      height: 100%;
      width: 100%;
      align-items: center;
      justify-content: center;
    }
    .canvas {
      /* background:hsl(220,60%,60%); */
      background-image:url("https://media.discordapp.net/attachments/932854310004473857/941358284475093022/Untitled_Artwork.png?width=1191&height=670");
      width: 1440px;
      height: 810px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      border: solid 1px;
      position: relative;
      margin: auto auto;
      overflow: hidden;
      background-size: cover;
       
    }
    .container {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .sun {
      width: 150px;
      height: 150px;
      animation: sun 10s infinite linear;
      position: absolute;
      top: 70px;
      right: 50px;
    }
    .sun1{
      width: 100%;
      height: 100%;
      }
    #seatop{
      width: 100%;
      height: 100%;
      
      /* background:hsl(210, 100%,50%); */
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size:cover;
      
    }
    #ship {
      position: absolute;
      left: -100;
      top: 370px;
      width: 130px;
      height: 130px;
      animation: ship2 8s infinite linear;
      }
    #konmek1{
      position: absolute;
      left: -100;
      top : -60px;
      animation: konmek1_kayab 20s infinite linear;
      }
    #konmek2{
      position: absolute;
      right: -700px;
      top: -150px;
      animation: konmek2_kayab 30s infinite linear;
    }
    /*#ton{
		position: absolute;
      left: 180px;
      top:  100px;
      transform:scale(0.5);
    }
    #bai{
      position:absolute;
      left:-60px;
      top:180px;
      animation:bai_dukdik 12s infinite linear;
      }*/
    
    @keyframes sun{
        from{
          transform:rotate(0deg)}
        to{
          transform:rotate(360deg)}
      }
    @keyframes ship2 {
      0%    {transform: translateX(0px);}
     10%   {transform: translateX(200px);}
     20%   {transform: translateX(400px);}
     30%   {transform: translateX(600px);}
     40%   {transform: translateX(800px);}
     50%   {transform: translateX(1000px);}
     60%   {transform: translateX(1200px);}
     70%   {transform: translateX(1400px);}
     80%   {transform: translateX(1600px);}
     90%   {transform: translateX(1800px);}
    100%  {transform: translateX(2000px);}
}
    @keyframes konmek1_kayab {
      0%    {transform: translateX(0px);}
      10%    {transform: translateX(200px);}
      20%    {transform: translateX(400px);}
      30%    {transform: translateX(600px);}
      40%    {transform: translateX(800px);}
      50%    {transform: translateX(1000px);}
      60%    {transform: translateX(800px);}
      70%    {transform: translateX(600px);}
      80%    {transform: translateX(400px);}
      90%    {transform: translateX(200px);}
      100%    {transform: translateX(0px);}

}
    @keyframes konmek2_kayab {
      0%    {transform: translateX(0px);}
      10%    {transform: translateX(-200px);}
      20%    {transform: translateX(-400px);}
      30%    {transform: translateX(-600px);}
      40%    {transform: translateX(-800px);}
      50%    {transform: translateX(-1000px);}
      60%    {transform: translateX(-800px);}
      70%    {transform: translateX(-600px);}
      80%    {transform: translateX(-400px);}
      90%    {transform: translateX(-200px);}
      100%    {transform: translateX(0px);} 
    }
    /*@keyframes bai_dukdik {
		0%    {transform: rotate(0deg);}
      10%    {transform: rotate(1deg);}
      20%    {transform: rotate(0deg);}
      30%    {transform: rotate(-1deg);}
      40%    {transform: rotate(0deg);}
      50%    {transform: rotate(1deg);}
      60%    {transform: rotate(0deg);}
      70%    {transform: rotate(1deg);}
      80%    {transform: rotate(0deg);}
      90%    {transform: rotate(0deg);}
      100%    {transform: rotate(0deg);}*/
     }
    
      
  </style>
  </head>
  <body>
    <div class="outer-container">
      <div class="canvas">
        <div class="sun">
          <img class="sun1" src="https://media.discordapp.net/attachments/932854310004473857/941350517647474738/sun_sunshine_sunrise_icon_151789.png" alt="">
        </div> 
        <div id="seatop">
          <img id="ship" src="https://cdn.discordapp.com/attachments/932854310004473857/941362283035111474/ship-depositphotos-bgremover.png" alt="">
        </div>
        <div id="konmek1">
          <img src = "https://cdn.discordapp.com/attachments/932854310004473857/941363805928190002/Untitled_Artwork.png">
        </div>
        <div id="konmek2">
          <img src = "https://cdn.discordapp.com/attachments/932854310004473857/941363871850037278/Untitled_Artwork.png">
        </div>
        <div id="ton">
          <img src = "https://cdn.discordapp.com/attachments/932854310004473857/941362134611279942/Untitled_Artwork.png">
        </div>
        <div id="bai">
          <img src="https://cdn.discordapp.com/attachments/932854310004473857/941362473460707438/Untitled_Artwork.png">
        </div>
           </div>
        
      </div> 
    </div>
    
  </body>
</html>