Assignment CSS Calc and CSS Var (Branch 13496) (Copy 14818)

Assignment CSS Calc and CSS Var (Branch 13496) (Co..

✨ นายธนวรรษ นันทะกูล

<html>
  <head>
    <title>Uma Musume: Pretty Dirby</title>
    <style>
      body{
        background:#000;
        font-family:sans-serif;
      }
      .main_pic{
        top:0%;
        z-index:-1;
        width:100%;
        left:0%;
        position:fixed;
      }
      .main{
        --font2: 0px;
        padding:2em;
        background:white;
        max-width:60%;
        margin:auto;
        font-size: calc(var(--font2) + 1rem);
        bottom:50%;
        margin-top:1em;
        border-radius:5px;
      }
      .gif1{
        position:absolute;
        width:15%;
        margin-left:1.5%;
        top:5%;
        height:0%;
      }
      .gif2{
        position:absolute;
        width:15%;
        margin-left:83.5%;
        top:5%;
        height:0%;
      }
      .gif3{
        position:absolute;
        width:15%;
        margin-left:1.5%;
        top:40%;
        height:0%;
      }
      .gif4{
        position:absolute;
        width:15%;
        margin-left:83.5%;
        top:40%;
        height:0%;
      }
      .gif5{
        position:absolute;
        width:15%;
        margin-left:1.5%;
        top:75%;
        height:0%;
      }
      .gif6{
        position:absolute;
        width:15%;
        margin-left:83.5%;
        top:75%;
        height:0%;
      }
      .head{
        display:block;
        width:100%;
        margin-left:10%;
        margin-top:3%;
      }
      .title{
        position:absolute;
        width:25%;
        margin-left:27%;
        margin-top:-2%
      }
      .head_pic{
        width:16%;
        margin-left:9%;
      }
      .toggle1{
        background-color:transparent;
        width:6em;
        height:3em;
        position:absolute;
        margin-left:41.5%;
        margin-top:2%;
        border-radius:5px;
      }
      .toggle2{
        background-color:#12121d;
        color:white;
      }
      .dark_mode{
        background-color:#12121d;
        color:white;
      }
      .edit-font-size{
        text-align:right;
        font-size:1rem;
        position:absolute;
        right:20%;
      }
      .white_space_large{
        height:8%;
      }
      .white_space_small{
        background-color:grey;
        height:0.1%;
      }
      .video{
        margin-top:2em
      }
      .quote{
        text-align:center;
      }
      #google_translate_element{
        width:3%;
        margin-top:0%;
        position:absolute;
        margin-left:58%;
        margin-top:2.2%;
      }
      .goog-logo-link{
		  display:none!important;
      }
      .goog-te-gadget{
        color:transparent!important;
      }
      #google_translate_element select{
        background-color:transparent;
        color:black;
        border-color:black;
        border-radius:3%;
        padding:6% 8%;
      }
      img{
        width:100%;
      }
      blockquote{
        color:hsl(270,100%,40%);
        border-left:.2em solid hsl(270,100%,60%);
        padding:1em;
        background:hsl(270,100%,97%);
      }
      a{
        color:hsl(270,100%,60%);
        text-decoration:none;
      }
      a:hover{
        color:hsl(270,100%,40%);
        text-decoration-line:underline;
      }
      p{
        line-height:2em;
      }
    </style>
  </head>
  <body>
    <div class="gif1">
      <img src="https://media.discordapp.net/attachments/944138097749274656/944811548935876718/mejiro-mcqueen-mcqueen_2.gif">
		</div>
    <div class="gif2">
      <img src="https://media.discordapp.net/attachments/944138097749274656/944822003074990150/rice-shower.gif">
		</div>
    <div class="gif3">
      <img src="https://media.discordapp.net/attachments/944138097749274656/944837951928549446/curren-curren-chan_1.gif">
		</div>
    <div class="gif4">
      <img src="https://media.discordapp.net/attachments/944138097749274656/944834830644944948/uma-musume.gif">
    </div>
    <div class="gif5">
      <img src="https://cdn.discordapp.com/attachments/944138097749274656/944839536243011625/-uma-musume.gif">
    </div>
    <div class="gif6">
      <img src="https://media.discordapp.net/attachments/944138097749274656/944839037271822386/uma-musume-game-jp.gif">
		</div>
    <div class="main_pic">
      <img src="https://media.discordapp.net/attachments/944138097749274656/944169357200752640/umamusume.png?width=1235&height=675">
    </div>
    <div class="head">
      <div id="google_translate_element"></div>
      <div class="title">
        <img src="https://media.discordapp.net/attachments/944138097749274656/944840478870863943/Untitled-2.png">
      </div>
      <div class="head_pic">
        <img src="https://media.discordapp.net/attachments/944138097749274656/944176103432527962/Site-logo.png">
      <button class="toggle1" onclick="dark_mode(this)">
        Day/Night
        </button>
        </div>
    </div>
    <div class="main">
      <div class="edit-font-size">
        <span>Text size
        </span>
        <input type="range" min="1" max="10" value="1" step="1" oninput="changefont(this)">
      </div>
      <h1>
        Uma Musume: Pretty Dirby
      </h1>
      <p>
        <b>Uma Musume: Pretty Derby</b> (ウマ娘 プリティーダービー, Uma Musume Puritī Dābī) is a mobile game by Cygames. Download is available on the Japanese <a href="https://apps.apple.com/jp/app/id1325457827#?platform=iphone">App Store</a> and <a href="https://play.google.com/store/apps/details?id=jp.co.cygames.umamusume">Google Play</a>.
      </p>
      <div class="white_space_large">
      </div>
      <h2>
        Gameplay
      </h2>
      <div class="white_space_small">
      </div>
      <p>
        On March 24th 2017, Cygames released a first gameplay teaser. According to it you'll be able to compete in races, train your horse girls, read through story sections and participate in live shows. Similar trailer showcasing more horse girls was released in the same year on July 1st.
      </p>
      <br>
      <p>
        In an <a href="https://app.famitsu.com/20170101_928035/">interview with Famitsu</a>, one of the developers of Uma Musume stated that the current development status is around 25%. They plan to release more information about the gameplay at AnimeJapan2017. A short statement on the planned release date was also given: "こ、今年のG1が終わるまでには…..！" ("By the end of this year's G1...!") More information can be found on the <a href="https://xn--gckvb3e1a0dy660b.com/%e3%80%8e%e3%82%a6%e3%83%9e%e5%a8%98%e3%80%8f%e3%83%97%e3%83%ad%e3%83%87%e3%83%a5%e3%83%bc%e3%82%b5%e3%83%bc%e7%9f%b3%e5%8e%9f%e6%b0%8f%e3%81%ae%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%93%e3%83%a5%e3%83%bc">fanmade site</a>.
      </p>
    	<br>
      <p>
        Three further gameplay teasers were released on April 19th 2018 which showcased a race, a live show and a story/training section. The original videos are currently set to private and can only be found on unofficial channels.
      </p>
      <br>
      <p>
        On December 15th 2018 the game was officially delayed, with an unknown release date in 2019.
      </p>
      <br>
      <p>
        On December 26th 2019 the game was once again officially delayed. The development team has stated they are working very hard to release the game (as well as the <a href="https://umamusume.fandom.com/wiki/UmaYon">UmaYon</a> <a href="https://umamusume.fandom.com/wiki/Anime">Anime</a>) in 2020.
      </p>
      <br>
      <p>
        According to the Q2 <a href="https://pbs.twimg.com/media/EWMqECDU0AA4Ov8?format=jpg&name=900x900">CyberAgent meeting</a> that occurred on April 22nd, the game was still on track to be released in 2020.
      </p>
      <br>
      <p>
        In an interview with XTrend, KMR (Kimura Yuito), the current director of the game, was asked the following question: " "Uma Musume" is a title whose release has been postponed in the past, will there be many changes?"
      </p>
      <br>
      <p>
        KMR replied: "It was difficult to make, so I spent a lot of time on trial and error, but I think the game will be of high quality."
      </p>
      <br>
      <p>
        The game was still on track to be released in 2020 according to the Q3 CyberAgent meeting that occurred on July 22nd.
      </p>
      <br>
      <p>
        The game was set to be released in December according to the month's CyberAgent meeting. However in the second Paka Live TV livestream that took place on December 19th, the game's release date was officially stated to be February 24th 2021. The livestream also showcased two new game trailers titled "I want to run faster than anyone else", <a href="https://youtu.be/WRnLiSYSbv8">one</a> version being 15 seconds long and the <a href="https://youtu.be/6ukUGdX1HKU">other</a> 30 seconds long. More information about the game was revealed on January 16th in the third Paka Live TV, new mentioned features being Succession and Multiplayer.
      </p>
      <iframe width="40%" height="30%" src="https://www.youtube.com/embed/dZTR9esWBmk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <p>
        Translated Gameplay Basics which were seen in above video can be found <a href="https://twitter.com/uma_musu_en/status/1350636191834468354?s=20">here</a>
      </p>
      <br>
      <p>
        Pre-registration by App Store and Google Play was made available on February 10th and the predownload followed soon after on February 22nd. The fourth Paka Live TV will follow shortly the day after as well, the Game part taking place after the Anime part of the livestream. It will start at 20:00 JST.
      </p>
      <blockquote>
        <b>Eclipse fist, the rest no where.
        </b>
      </blockquote>
      <div class="quote">
        <p>
          Japan Umamusume Training Schools and Colleges's motto
        </p>
      </div>
      <br>
      <h2>
        Video
      </h2>
      <div class="white_space_small">
      </div>
      <div class="video">
        <iframe width="40%" height="30%" src="https://www.youtube.com/embed/cmuTy73jzSs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <p>
        ゲーム【ウマ娘 プリティーダービー】OP映像
      </p>
      <br>
      <h2>
        References
      </h2>
      <div class="white_space_small">
      </div>
      <div class="reference">
        <p>
        <a href="https://xtrend.nikkei.com/atcl/contents/18/00294/00010/">https://xtrend.nikkei.com/atcl/contents/18/00294/00010/</a><br>
        <a href="https://twitter.com/uma_musu_en/status/1285838419856224263">https://twitter.com/uma_musu_en/status/1285838419856224263</a><br><a href="https://twitter.com/uma_musu_en/status/1337573621930180608">https://twitter.com/uma_musu_en/status/1337573621930180608</a>
      </p>
      </div>
    </div>
  </body>
  <script>
    function changefont(element){
		var change = document.querySelector('.main');
      var sizes = element.value;
      change.style.setProperty('--font2', sizes + "px");
    }
    function dark_mode(){
   	var element = document.querySelector('.main');
   	element.classList.toggle("dark_mode");
      var element = document.querySelector('.toggle1');
      element.classList.toggle("toggle2");
    }
  </script>
  <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element', {autoDisplay: 'true'}, { 				includedLanguages:'hi,en,bn,id,fr'});
    }
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</html>