การบ้าน

✨ นายณัชพล นันทสันติ

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      @height:80vh;
      @width:80vw;
      body {
        background-image: url("https://images.wallpaperscraft.com/image/wall_brick_purple_141823_3840x2160.jpg");
        margin: 0;
        background-size: 100%;
        padding: 20px;
      }
      img#myImg:hover{
        animation:moon 400ms linear infinite alternate;
      }
      #starjabout {
         animation:moon 400ms linear infinite alternate;
         z-index:0;
        position:absolute;
        margin:center;
         top: calc((100% - 250px)/2);
         left: calc((100% - 200px)/2);
        right:45%;
        display: flex;
        margin: 0;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .cover{
        background-image:url("http://i.imgur.com/VvNhMb0.jpg");
        background-repeat:no-repeat;
        background-size:cover;
        height:80%;
        width:80%;
        border: 7px solid #211426;
         border-radius:10px;
        box-shadow:6px 6px 10px black;
        display: flex;
        margin: 0;
        position: absolute;
        top: 54%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      @keyframes animStar {
        from {
          transform: rotatex(0px);
        }
        to {
          transform: rotatex(-180px);
        }
      }
      @keyframes moon{
              from{transform:rotate(-20deg)}
              to{transform:rotate(20deg)}
      }
      .icons{
        padding-top:10px;
        color:#fff;
        background-color:#13a2ff;
        height:39px;
        width:200px;
        border-left:1px solid #333;
      }
      .icons ul{
        list-style-type:none;
      }
      .icons ul li{
        display:inline;
        margin-left:8px;
      }
      .row{
        display: inline-block;
      }
      #myImg {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
      }
      #img01{
        top: -1000px;
        height: 70%;
        width: auto;
      }
      #myImg:hover {opacity: 0.7;}

/* The Modal (background) */
      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
      }

/* Modal Content (image) */
      .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
      }

/* Caption of Modal Image */
      #caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
      }

/* Add Animation */
      .modal-content, #caption {
        animation: zoom 1000ms;
      }

@-webkit-keyframes zoom {
        from {-webkit-transform:scale(0)} 
        to {-webkit-transform:scale(1)}
      }

@keyframes zoom {
        from {transform:scale(0)} 
        to {transform:scale(1)}
      }

/* The Close Button */
      .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
      }

.close:hover,
      .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
      }

/* 100% Image Width on Smaller Screens */
      @media only screen and (max-width: 700px){
        .modal-content {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    
    <div class="cover">
    <div id='starjabout'>
    <img src="https://media.discordapp.net/attachments/808974760624783411/808974794078552074/Untitled-1.png" width="400%" height="400%">
    </div>
     <div class="whole-thing">
      <div class="container-fluid">
        <div class="row">
          <div>
            <span>
            <img id="myImg" src="https://cdn.discordapp.com/attachments/798207197124624454/809810943751618570/gougab.png" style="height: auto; width: 12%;" onclick="Thumbnail(0)">
            <img id = "myImg" src="https://cdn.discordapp.com/attachments/798207197124624454/809810947132096512/jeng.png" style="height: auto; width: 12%;" onclick="Thumbnail(1)">
          </span>
          </div>
          <div>
           <span>
            <img id = "myImg" src="https://cdn.discordapp.com/attachments/798207197124624454/809810948919132160/kong.png" style="height: auto; width: 12%;" onclick="Thumbnail(2)">
            <img id = "myImg" src="https://cdn.discordapp.com/attachments/798207197124624454/809810949850136606/pre.png" style="height: auto; width: 12%;" onclick="Thumbnail(3)">
          </span> 
          </div>
         <div>
           <span>
            <img id = "myImg" src="https://cdn.discordapp.com/attachments/798207197124624454/809810950940786708/program.png" style="height: auto; width: 12%;" onclick="Thumbnail(4)">
            <img id = "myImg" src="https://cdn.discordapp.com/attachments/798207197124624454/809810955071914064/touch.png" style="height: auto; width: 12%;" onclick="Thumbnail(5)">
          </span>
          </div>
       	<div>
         <span>
            <img id = "myImg" src="https://cdn.discordapp.com/attachments/798207197124624454/809811016316616744/preaw.png" style="height: auto; width: 12%;" onclick="Thumbnail(6)">
            <img id = "myImg" src="https://cdn.discordapp.com/attachments/798207197124624454/809811114908057660/deaw.png" style="height: auto; width: 12%;" onclick="Thumbnail(7)">
          </span>
          </div>
        </div>
        </div>
        </div>
       </div>
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <div id="caption" style="font-size: 28px; margin: auto;"></div>
      <img class="modal-content" id="img01">
    </div>
    <div style="opacity: 0%;"><audio controls autoplay>
      <source src="https://cdn.discordapp.com/attachments/798207197124624454/803924049117970462/TikTok__V._Cover___BY__.mp3">
    </audio>
    </div>
  <script>
    // Get the modal
    var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    function Thumbnail(word) {
      modal.style.display = "block";
      modalImg.src = data[word].img;
      captionText.innerHTML = data[word].name;
    }

// Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
    }
    var data = [
          {
             name: "Gobgrab", 
             img: "https://media.discordapp.net/attachments/798207197124624454/809809498277543956/65d6cfcb2bb5193d6d160157b34b2bd0-removebg-preview.png",
          },
          {
             name: "Jeng",
             img: "https://cdn.discordapp.com/attachments/798207197124624454/809809506082226247/geng-removebg-preview.png",
          },
          {
             name: "Kong", 
             img: "https://media.discordapp.net/attachments/798207197124624454/809809507785113642/gong-removebg-preview.png",
          },
          {
             name: "P", 
             img: "https://cdn.discordapp.com/attachments/798207197124624454/809809509388255332/pre-removebg-preview.png",
          }, 
          {
             name: "Program", 
             img: "https://cdn.discordapp.com/attachments/798207197124624454/809809512553906217/pro-removebg-preview.png",
          },
          {
             name: "Tad", 
             img: "https://cdn.discordapp.com/attachments/798207197124624454/809809514324951090/touch-removebg-preview.png",
          },
          {
             name: "Prew",
             img: "https://cdn.discordapp.com/attachments/798207197124624454/809809510763724850/prew-removebg-preview.png",
          },
          {
             name: "Deaw", 
             img: "https://cdn.discordapp.com/attachments/798207197124624454/809809504015351847/deaw-removebg-preview.png",
          },
       ];
  </script>
  </body>
</html>