Newer
Older
web / testpage / test.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="../testpage/test.css">
    <link rel="stylesheet" href="responsive.css">
    <title>Document</title>
</head>
<body>
    <!-- header -->
    <header class="header">
        <div class="header-nav">
            <h1><a href="../testpage/test.html" class="sp-logo"><img class="top-logo" src="../jdlogo_A.png" alt="トップアイコン"></a></h1>
            <input type="checkbox" id="hamburger-menu">
            <label for="hamburger-menu"> 
                <span class="buns">
                    <span class="patty"></span>
                </span>
            </label>
            <label class="light-dark" for="hamburger-menu"></label>
            <nav>
                <ul id="hamburger-list">
                    <li><a href="../testpage/test.html">ホーム</a></li>
                    <li><a href="../about/">ジュニアドクター鳥海塾とは</a></li>
                    <li><a href="../testpage/test2.html">授業内容</a></li>
                    <li class="bd-no"><a href="../testpage/test.html" class="bd-none"><img class="top-logo" src="../jdlogo_A.png" alt="トップアイコン"></a></li>
                    <li><a href="../info/">受講者むけ情報</a></li>
                    <li><a href="../QA/">Q&amp;A</a></li>
                    <li><a href="../apply/appform.html">お申し込み</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- //header -->

    <!-- main -->
    <main>
        <div id="mainvisual">
            <div class="mainvisual-inner">
                <div class="top-text">
                    <p class="text">みんなで一緒に、<br>
                    <span class="top-text-color">プログラミング</span>に、<br>
                    取り組んでいこう。</p>
                </div>
                <div class="top-title">
                    <h1 class="site-title">
                        ジュニアドクター鳥海塾
                        <span class="small">2021</span>
                    </h1>
                </div>
                <div class="mainvisual-img">
                    <ul class="fade">
                      <li><img src="daniel-zjV8ptYgcEo-unsplash.jpg" alt=""></li>
                      <li><img src="compare-fibre-e5sTz361Jzg-unsplash.jpg" alt=""></li>
                      <li><img src="national-cancer-institute-N_aihp118p8-unsplash.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- //main -->

        <!-- about -->
        <section id="home-about" class="wrapper">
            <div class="scroll">
            <h2 class="section-title">第1期ジュニアドクター鳥海塾</h2>
            <p class="section-text">
                ジュニアドクター鳥海塾では生徒みんなで協力して
                    プログラミングを学んでいきます。教える側も教えられる側も一丸となって一つの問題の解決に
                力を合わせて取り組んでいきます。
            </p>
            </div>
            <div class="about-container">
                <div class="home-items scroll">
                    <img src="../img/riku_umi.png" alt="キャラ画像ウミリク"
                      width="300" height="216">
                    <div class="what_study">
                        <h3><i style="color:orange;" class="fas fa-angle-double-right fa-lg"></i>  鳥海塾でどんなことが学べるの?</h3>
                        <p><span class="text-bg">まずは、プログラミングの基礎を身に付けます。</span><span class="text-bg">
                            そして、情報技術が身近な
                            地域社会のどんな場面に使われているのかを学びます。
                        </span><span class="text-bg">講座の終わりには、受講
                        生それぞれが自分のアイディアを出してオリジナルのプログラミングづくりに挑戦します
                        。</span><br>
                        <span class="text-bg">
                            実際の授業では、大学の先生や大学生のお兄さんお姉さんがみなさん
                            の学びをサポートします。
                        </span><span class="text-bg">
                            授業当日に学校行事やイベントで欠席になる場合には、
                            オンラインでの補講にも対応します。
                        </span></p>
                    </div>
                    <div class="aiming_top">
                        <h3><i style="color:orange;" class="fas fa-angle-double-right fa-lg"></i>  鳥海塾で学びを積み上げて「鳥海山の頂 (2236m)」を目指そう !</h3>
                        <p><span class="text-bg">
                            鳥海塾では受講生の学習の記録を積み重ね、標高メートルとして高さで示し
                            ながら、
                        </span><span class="text-bg">名峰「鳥海山」の頂上標高2236メートルを目指して登っていきます。</span><br>
                        <span class="text-bg">受講生のみなさんの研究を鳥海山から世界に向けて発信する気持ちで、一緒に挑戦していきましょう。</span></p>
                    </div>
                    <img src="../img/umi_ukiwa.png" alt="キャラ画像ウミ浮輪"
                        width="300" height="227">
                    </div>
            </div>
        </section>
        <!-- //about -->
        <!-- home-class_content -->
        <section id="home-class_content" class="wrapper">
            <h2 class="section-title scroll">授業内容について</h2>
            <div class="grid">
                <a class="class_content-item scroll" href="../class_content/index.html">
                    <div class="item fadein">
                    <img class="fadein" src="../testpage/JD_20210807.jpg" alt="">
                    <div class="item-content">
                        <p class="item-cat">class content</p>
                        <p class="item-text">最初の顔合わせをしました。</p>
                        <p class="item-date">2021.08.07</p>
                    </div>
                    </div>
                </a>
    
              <a class="class_content-item scroll" href="">
                  <div class="item fadein">
                    <img class="fadein" src="../testpage/JD_20210821.jpg" alt="../class_content/index.html">
                    <div class="item-content">
                      <p class="item-cat">class content</p>
                      <p class="item-text">初回の授業をしました。</p>
                      <p class="item-date">2021.08.21</p>
                    </div>
                  </div>
              </a>
    
              <a class="class_content-item scroll" href="">
                  <div class="item fadein">
                    <img class="fadein" src="../testpage/JD2021-08-28.png" alt="../class_content/index.html">
                    <div class="item-content">
                      <p class="item-cat">class content</p>
                      <p class="item-text">2回目の授業をしました。</p>
                      <p class="item-date">2021.08.28</p>
                    </div>
                  </div>
              </a>

              <!-- <a class="class_content-item scroll" href="">
                <div class="item fadein">
                  <img class="fadein" src="../testpage/JD_20210904.jpg" alt="../class_content/index.html">
                  <div class="item-content">
                    <p class="item-cat">class content</p>
                    <p class="item-text">3回目の授業をしました。</p>
                    <p class="item-date">2021.09.04</p>
                  </div>
                </div>
            </a>

            <a class="class_content-item scroll" href="">
                <div class="item fadein">
                  <img class="fadein" src="../testpage/JD_20210911.jpeg" alt="../class_content/index.html">
                  <div class="item-content">
                    <p class="item-cat">class content</p>
                    <p class="item-text">4回目の授業をしました。</p>
                    <p class="item-date">2021.09.11</p>
                  </div>
                </div>
            </a> -->
            </div>
            <p class="home-class_content-btn"><a href="../class_content/">もっと見る<i class="fas fa-angle-right fa-position-right"></i></a></p>
          </section>
          <!-- //home-class_content -->
          <!-- home-QA-->
        <section id="home-qa" class="wrapper scroll">
            <h2 class="section-title scroll">鳥海塾についてのQ&A</h2>
            <div class="scroll">
            <div class="qa_list">
                <input id="qa1" type="checkbox">
                <div class="plus">+</div>
                <label for="qa1">Q.プログラミングってなに</label>
                <div class="ans"><span style="font-size: 25px;">A.</span>
                みなさんが当たり前に使っているYoutubeやゲーム、スマホアプリはプログラマーと呼ばれる人達によって作られています。そして、そのプログラムを作る作業のことをプログラミングといいます。
                </div>
            </div>
            <div class="qa_list">
                <input id="qa2" type="checkbox">
                <div class="plus">+</div>
                <label for="qa2">Q.プログラミングができるとなにがいいの?</label>
                <div class="ans"><span style="font-size: 25px;">A.</span>
                子供達の新たな特技になり、自信につながります。また、一部で算数や英語を扱うため、普段の勉強にも活かすことができます。
                </div>
            </div>
            <div class="qa_list">
                <input type="checkbox" id="qa6">
                <div class="plus">+</div>
                <label for="qa6">Q.どんな人が教えるの?</label>
                <div class="ans"><span style="font-size: 25px;">A.</span>
                東北公益文科大学の先生と学生が教えます。
                学生は、特別に選ばれたスタッフで構成され、
                「メンター」となって一人ひとりに寄り添って説明いたします。
                </div>
            </div>
            <div class="qa_list">
                <input type="checkbox" id="qa7">
                <div class="plus">+</div>
                <label for="qa7">Q.お金はいくらくらいかかるの?</label>
                <div class="ans"><span style="font-size: 25px;">A.</span>
                受講無料です。
                必要な費用等は本学が全額負担いたします。
                ただし、会場までの移動に伴う交通費と、
                オンライン講座参加のための通信費は自己負担となります。
                </div>
            </div>
        </div>
            <p class="home-class_content-btn"><a href="../QA/index.html">もっと見る<i class="fas fa-angle-right fa-position-right"></i></a></p>
        </section>
        <!-- //home-QA -->
        <!-- home-info -->
        <section id="home-info" class="wrapper">
            <h2 class="section-title scroll">アクセス</h2>
            <figure class="scroll">
                <img src="../testpage/info2.jpg" alt="">
            </figure>

            <div class="info-item">
                <div class="info-text">
                    <h3 class="home-info-address_title">東北公益文科大学</h3>
                    <span class="info-address"><span class="info-small">〒998-8580</span><br>
                    山形県酒田市飯森山三丁目5番地の1 / TEL:0234-41-1111</span>
                    <dl class="line-dl">
                        <div>
                            <dt class="font-mg">プログラム名</dt>
                            <dd>令和3年度ジュニアドクター育成塾</dd>
                        </div>
                        <div>
                            <dt class="font-mg">開催主体</dt>
                            <dd>東北公益文科大学</dd>
                        </div>
                        <div>
                            <dt class="font-mg">実施主担当者</dt>
                            <dd>広瀬 雄二</dd>
                        </div>
                        <div>
                            <dt class="font-mg">開塾日</dt>
                            <dd>本講義 毎週土曜日<br>
                                オンライン補習 毎週月・水・金<span class="info-small"> ※こちらは予約制です</span></dd>
                        </div>
                        <div>
                            <dt class="font-mg">開塾時間</dt>
                            <dd>本講義 14時開始〜16時終了(予定)<br>
                                オンラインン補習 19時開始〜21時終了(予定)</dd>
                        </div>
                        <div>
                            <dt class="font-mg">実施期間</dt>
                            <dd>令和3年5月19日~令和4年3月31日 </dd>
                        </div>
                        <div>
                            <dt class="font-mg">対象</dt>
                            <dd>小学3年生から中学3年生までのプログラミングに興味がある人</dd>
                        </div>
                        <div>
                            <dt class="font-mg">公式HP</dt>
                            <dd><a href="https://www.koeki-u.ac.jp/">東北公益文科大学公式HP</a></dd>
                        </div>
                    </dl>
                </div>

                <div class="iframe-wrap wrapper">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3105.3413311250843!2d139.81671931502322!3d38.893309154790884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8e9e2a867f4291%3A0x66b7cfad26f00687!2z5p2x5YyX5YWs55uK5paH56eR5aSn5a2mIOmFkueUsOOCreODo-ODs-ODkeOCuQ!5e0!3m2!1sja!2sjp!4v1630241197878!5m2!1sja!2sjp" 
                    width="450" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </section>
        <!-- //home-info -->
        <!-- footer -->
        <footer>
            <p>&copy;2021 KOEKI-U.ac.jp</p>
        </footer>
        <!-- //footer -->
      </main>
      <script type="text/javascript" src="../testpage/fade.js"></script>
      <script type="text/javascript" src="../testpage/header.js"></script>
</body>
</html>