Newer
Older
web / home / index.html
@ItoRino ItoRino on 22 Sep 2021 10 KB アクセスの修正
<!DOCTYPE html>
<html lang="ja">
<head><title>Junior-Doctor Chokai Academy</title>
<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" type="text/css" href="../jdmain.css">
<link rel="stylesheet" href="../testpage/responsive.css">
<script type="text/javascript" src="../jdinit.js"></script>
</head>
<body>
<header id="header">この部分は header.html に置き換わる</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="../testpage/JD_20210821.jpeg" alt=""></li>
                      <li><img src="../testpage/JD_20210807-part2.jpg" alt=""></li>
                      <li><img src="../testpage/jd-slide.png" 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.jpeg" 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 -->
      </main>
      <script type="text/javascript" src="../testpage/fade.js"></script>
      <script type="text/javascript" src="../testpage/header.js"></script>

<footer id="footer">この部分は footer.html に置き換わる</footer>

</body>
</html>