penny271
2/16/2020 - 2:56 AM

html Navigator scrolltop 02-16-2020

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
    <link rel="stylesheet" href="stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- ヘッダー -->
    <header>
      <div class="container">
        <div class="header-title">
          <div id="top-btn" class="header-logo">にんじゃわんこの部屋</div>
        </div>
        <div class="header-menu">
          <ul class="header-menu-right">
            <li>
              <a href="#stamps">LINEスタンプ</a>
            </li>
            <li>
              <a href="#interview">インタビュー</a>
            </li>
            <li>
              <a href="#contact">お問い合わせ</a>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- トップ部分 -->
    <div class="top-section gray-section">
      <div class="top-inner">
        <div class="container">
          <div class="top-description">
            <h2>ようこそ!にんじゃわんこの部屋へ!</h2>
            <p>Progate公式キャラクター「にんじゃわんこ」の日常です。</p>
          </div>
        </div>
      </div>
    </div>

    <!-- スライダー -->
    <div id="stamps" class="stamps-section">
      <div class="container">
        <div class="section-title">
          <h3>LINEスタンプ大好評発売中!</h3>
        </div>
        <div id="stamp-carousel" class="carousel slide" data-ride="carousel"> 
          <ol class="carousel-indicators">
            <li data-target="#stamp-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#stamp-carousel" data-slide-to="1" class=""></li>
            <li data-target="#stamp-carousel" data-slide-to="2" class=""></li>
          </ol>
          <div class="carousel-inner">
            <div class="item stamp-box active">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/LineStamp1.jpg" class="stamp-image">
              <h4>にんじゃわんこがLINEスタンプに登場!</h4>
            </div>
            <div class="item stamp-box">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/LineStamp2.jpg" class="stamp-image">
              <h4>プログラミング関連のスタンプも!</h4>
            </div>
            <div class="item stamp-box">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/LineStamp3.jpg" class="stamp-image">
              <h4>新キャラ・ベイビーわんこも!</h4>
            </div>
          </div> 
        </div> 
        <p>全40種類!使いやすく、可愛い!にんじゃわんこの日常を表現したスタンプです!<br>
          ご購入は<a class="stamp-link" href="https://store.line.me/stickershop/product/1132359/ja" target="_blank"> こちら</a>(LINE STORE)から!
        </p>
      </div>
    </div>

    <!-- インタビュー -->
    <div id="interview" class="interview-section">
      <div class="interview-section-top gray-section">
        <div class="container">
          <div class="section-title">
            <h3>特別インタビュー</h3>
          </div>
          <img class="interview-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/interview_wanko.jpg">
        </div>
      </div>
      <div class="interview-section-bottom">
        <div class="container">
          <div class="interview-box">
            <h5>Q. 普段はどのような活動をされているのですか?</h5>
            基本的に、渋谷にあるProgateのオフィスでくつろぐのが日課でござる。Progateのオフィスは本当に居心地が良いでござる。
            スピーカーで好きな音楽を流しながら、カフェみたいな空間でProgateの宣伝方法について考えてる時間は、最高に充実しているでござる。
          </div>
          <div class="interview-box">
            <h5>Q. にんじゃわんこさんは、プログラミングはできるのですか?また、得意な言語は何ですか?</h5>
            Progateのレッスンは全て終了したから、それなりにはできるでござる。最近は本気でエンジニアを目指して、WankoBook Proを購入したでござる。<br>
            得意な言語は、Rubyでござる。Railsで面白いWebアプリを作りたいでござる。
          </div>
          <div class="interview-box">
            <h5>Q. 好きな食べものは何ですか?やっぱりドッグフードですか?</h5>
            ラーメンが大好きでござる。オフィスの近くには美味しいラーメン屋さんが多くあって幸せでござる。<br>
            ドッグフードはおいしくないでござる。炊きたてのご飯の方が何倍も美味しいと思うでござる。
          </div>
          <div class="interview-box">
            <h5>Q. 最後に、今後の活動展開について教えてください。</h5>
            今後はさらにProgateの宣伝に努めていくでござる。あと、僕のLINEスタンプも。スタンプの売上は拙者のお小遣いになるから、是非ともみんなに買ってほしいでござる。
          </div>
        </div>
      </div>
    </div>

    <!-- Contact -->
    <div id="contact" class="contact-section gray-section">
      <div class="contact-section-inner">
        <div class="container">
          <div class="section-title">
            <h3>お問い合わせ</h3>
          </div>
          <div class="contact-form">
            <h4>メッセージを送る</h4>
            <form>
              <div class="error-message"></div>
              <input type="text" name="name" placeholder="お名前" class="contact-name">
              <div class="error-message"></div>
              <input type="text" name="email" placeholder="メールアドレス" class="contact-email">
              <div class="error-message"></div>
              <textarea name="message" placeholder="メッセージ内容"></textarea>
              <button type="submit" class="btn btn-contact">送信</button>
            </form>
          </div>
          <div class="contact-about">
            <h4>About Me</h4>
            <p>Progateで飼われている柴犬。忍者の格好をするのが趣味(可愛いさが際立つと思っている)。妖精によって深夜4時半頃に召喚され、それ以来Progateのサイトに居座るように。<br>
              Progateでは、ユーザーの癒やしから、学習のサポートまでを担当。また、フィードバック番長も努め、ユーザーにフィードバックを返信しないと毎日22時に怒鳴ってくる。
            </p>
            <h4>Address</h4>
            <p>
              <i class="fa fa-map-marker"></i>東京都渋谷区神宮前6-19-20 第15荒井ビル9階
            </p>
            <p>
              <i class="fa fa-phone"></i>Phone: 03-6455-0950
            </p>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="container">
        <div class="follow-us">
          <a href="https://www.facebook.com/Progate-742679992421539" class="social-icon" target='_blank'>
            <span class="fa fa-facebook"></span>
          </a>
          <a href="https://twitter.com/progatejp" class="social-icon" target='_blank'>
            <span class="fa fa-twitter"></span>
          </a>
        </div>
        <div class="copyright">©2016-
          Progate
        </div>
      </div>
    </footer>

    <script type="text/javascript" src="script.js"></script>
  </body>
</html>