Fork: 0
c119073-taka / internship
Transfer to URL with SHA Find file
Newer
Older
internship / ecomai.html
@taka taka on 1 Apr 2022 2 KB drag-drop
Raw Blame History 
<!DOCTYPE html>
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>エコ米ゲーム</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"><!--いろんなアイコンのCSS-->
</head>
 
<body>
 
<h1 class="count">エコ米づくりを体験してみよう！</h1>

<div class="popup-seciton" id="section1">
  <div class="box js-show-popup"><img src="img/bunnbetu.png" alt="ポップアップ画像"></div>

  <div class="popup js-popup">
      <div class="popup-inner">
        <div class="close-btn js-close-btn"><i class="fas fa-times"></i></div>
        <h2 class="popup-title">生ごみをゴミ箱に集めよう！</h2>
        <img id="gomibako" src="img/gomi_poribaketsu_close.png" alt="ポップアップ画像">
        <img class="moveObj" id="niku1" src="img/niku.png" alt="ポップアップ画像">
        <img class="moveObj" id="ninnzinn1" src="img/ninnzinn.png" alt="ポップアップ画像">
        <img class="moveObj" id="sakana1" src="img/sakana.png" alt="ポップアップ画像">
        <img class="moveObj" id="ninnzinn2" src="img/ninnzinn.png" alt="ポップアップ画像">
        <img class="moveObj" id="niku2" src="img/niku.png" alt="ポップアップ画像">
        <img class="moveObj" id="sakana2" src="img/sakana.png" alt="ポップアップ画像">
        <img class="moveObj" id="ninnzinn3" src="img/ninnzinn.png" alt="ポップアップ画像">
        <div class="popup-success hidden">
          <h2>ミッションクリア</h2>
          <p>年間で約120トンも生ごみを回収してリサイクルしているよ！</p>
        </div>
      </div>
      <div class="black-background js-black-bg"></div>
  </div>
</div>

<div class="popup-seciton" id="section2">
  <div class="box js-show-popup"><img src="img/656814.png" alt="ポップアップ画像"></div>

  <div class="popup js-popup">
      <div class="popup-inner">
        <div class="close-btn js-close-btn"><i class="fas fa-times"></i></div>
        <a href="#"><img src="img/656814.png" alt="ポップアップ画像"></a>
      </div>
      <div class="black-background js-black-bg"></div>
  </div>
</div>

<div class="ekomai">
  <h1>エコ米ってどんなお米？</h1>
  <p>↓紹介動画を見てみよう↓</p>
  <video src="video/6e226373-96e3-4655-9222-dbfdd3245021.mp4" controls></video>
</div>
<!--https://tech-dig.jp/js-modal/-->

<script src="js/popup.js"></script>
<script src="js/drag-and-drop.js"></script>
</body>
 
</html>