Difference between revisions of "Team:Nagahama"

Line 1: Line 1:
−
<html lang="en">
+
<!DOCTYPE html>
 +
<html lang="ja">
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
     <title>0からWEBサイトを作ってみよう</title>
−
     <title>Untitled Document</title>
+
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
−
     <!-- Bootstrap -->
+
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
−
<link href="file:///C|/Users/タルトマン/Desktop/MyLP/css/bootstrap.css" rel="stylesheet">
+
    <link rel="stylesheet" href="stylesheet.css">
−
 
+
    <link rel="stylesheet" href="responsive.css">
−
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+
−
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
−
<!--[if lt IE 9]>
+
−
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
−
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
−
<![endif]-->
+
 
   </head>
 
   </head>
 
   <body>
 
   <body>
−
<div class="jumbotron">
+
    <!-- Header -->
−
  <h1>Hello, world!</h1>
+
    <header>
−
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+
      <div class="container">
−
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
+
        <div class="header-title">
−
  </div>
+
          <a class="header-logo" href="#home">Progate School</a>
−
<div class="jumbotron">
+
        </div>
−
  <h1>Hello, world!</h1>
+
        <div class="header-menu">
−
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+
          <ul class="header-menu-right">
−
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
+
            <li>
−
  </div>
+
              <a href="#languages">学習言語</a>
−
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->  
+
            </li>
−
<script src="file:///C|/Users/タルトマン/Desktop/MyLP/js/jquery-1.11.3.min.js"></script>
+
            <li>
 +
              <a href="#features">特徴</a>
 +
            </li>
 +
            <li>
 +
              <a href="#pricing">料金</a>
 +
            </li>
 +
            <li>
 +
              <a href="#columns">コラム</a>
 +
            </li>
 +
            <li>
 +
              <a href="#contact">お問い合わせ</a>
 +
            </li>
 +
          </ul>
 +
        </div>
 +
      </div>
 +
    </header>
 +
 
 +
    <!-- Top content -->
 +
    <div id="home" class="top-section">
 +
      <div class="inner-bg">
 +
        <div class="container">
 +
          <div class="top-description">
 +
            <h2>プログラミングは人生を変える</h2>
 +
            <p>プログラミングを学んで、新しい自分を見つけよう。</p>
 +
          </div>
 +
          <div class="top-detail">
 +
            <a class="btn btn-top-white btn-lg" id="read-more">もっと詳しく</a>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <!-- Languages -->
 +
    <div id="languages" class="languages-section">
 +
      <div class="container">
 +
        <div class="section-title">
 +
          <h3>学習する言語</h3>
 +
        </div>
 +
        <div class="languages-box-wrapper">
 +
          <div class="languages-box">
 +
            <div class="icon">
 +
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png">
 +
            </div>
 +
            <h4>HTML & CSS</h4>
 +
            <p>Webページの<br>見た目をつくる言語</p>
 +
          </div>
 +
          <div class="languages-box">
 +
            <div class="icon">
 +
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png">
 +
            </div>
 +
            <h4>jQuery</h4>
 +
            <p>効果やアニメーションを実装できる<br>Javascriptライブラリ</p>
 +
          </div>
 +
          <div class="languages-box">
 +
            <div class="icon">
 +
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png">
 +
            </div>
 +
            <h4>Javascript</h4>
 +
            <p>動的なウェブサイト構築に用いる<br>プログラミング言語</p>
 +
          </div>
 +
          <div class="languages-box">
 +
            <div class="icon">
 +
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png">
 +
            </div>
 +
            <h4>Git</h4>
 +
            <p>ソースコードのバージョン管理、<br>共同開発を可能にするツール</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <!-- Features -->
 +
    <div id="features" class="features-section">
 +
      <div class="features-section-top gray-section">
 +
        <div class="container">
 +
          <div class="section-title">
 +
            <h3>特徴</h3>
 +
          </div>
 +
          <img class="features-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/mac_code.png">
 +
        </div>
 +
      </div>
 +
      <div class="features-section-bottom">
 +
        <div class="container">
 +
          <div class="features-box">
 +
            <h5>① ProgateでWEB開発の基礎知識を身につけよう</h5>
 +
            Progateで各コースをクリアして基礎知識を身につけましょう。それぞれ２周することによって知識を定着させます。
 +
          </div>
 +
          <div class="features-box">
 +
            <h5>② Progateの道場で知識を習得しよう</h5>
 +
            Progateのコースで基礎知識を身につけたら、実践的な演習をこなしていきましょう。また道場では更に発展的な学習もしていきます。
 +
          </div>
 +
          <div class="features-box">
 +
            <h5>③ 実際にプロダクトを作ってみよう</h5>
 +
            Progateで実践的な力を身につけたら自分で１つのプロダクトを作ってみましょう。自分で１から作ってみると、意外に理解できていないことに気づくと思います。
 +
            バグを修正しながらプロダクトを完成させることで、エンジニアとしての力を磨きましょう。
 +
          </div>
 +
          <div class="features-box">
 +
            <h5>④ エンジニアインターンを体験しよう</h5>
 +
            実際に培ったスキルをインターンを通じて仕事として使ってみましょう。会社のエンジニアとともに仕事をしていくことによって、さらなるスキルアップを目指せるはずです。
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <!-- Message -->
 +
    <div class="message-section">
 +
      <div class="message-section-inner">
 +
        <div class="container">
 +
          <h4>プログラミングを学ぶのなら、生涯仕事に困らないことを私が保証しよう。
 +
            <br>- Facebook元役員
 +
          </h4>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <!-- Pricing -->
 +
    <div id="pricing" class="pricing-section gray-section">
 +
      <div class="container">
 +
        <div class="section-title">
 +
          <h3>コースを選ぶ</h3>
 +
        </div>
 +
        <div class="price-column">
 +
          <h2>短期集中2週間コース</h2>
 +
          <h3>3万円</h3>
 +
          <ul>
 +
            <li>期間 : 2週間</li>
 +
            <li>チャットでの質問 : ◯ </li>
 +
            <li>オフィスでの質問 : ◯ </li>
 +
          </ul>
 +
          <div class="btn btn-black">申し込む</div>
 +
        </div>
 +
        <div class="price-column price-column-green">
 +
          <h2>通常1ヶ月コース</h2>
 +
          <h3>5万円</h3>
 +
          <ul>
 +
            <li>期間 : 1ヶ月</li>
 +
            <li>チャットでの質問 : ◯ </li>
 +
            <li>オフィスでの質問 : ◯ </li>
 +
          </ul>
 +
          <div class="btn btn-black">申し込む</div>
 +
        </div>
 +
        <div class="price-column">
 +
          <h2>土日開発2ヶ月コース</h2>
 +
          <h3>8万円</h3>
 +
          <ul>
 +
            <li>期間 : 2ヶ月</li>
 +
            <li>チャットでの質問 : ◯ </li>
 +
            <li>オフィスでの質問 : ◯ </li>
 +
          </ul>
 +
          <div class="btn btn-black">申し込む</div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
    <!-- Contact -->
 +
    <div id="contact" class="contact-section">
 +
      <div class="contact-section-inner">
 +
        <div class="container">
 +
          <div class="section-title">
 +
            <h3>お問い合わせ</h3>
 +
          </div>
 +
          <div class="contact-form">
 +
            <h4>メッセージを送る</h4>
 +
            <form>
 +
              <input type="text" name="email" placeholder="Email" class="contact-email">
 +
              <input type="text" name="subject" placeholder="Subject" class="contact-subject">
 +
              <textarea name="message" class="form-control" placeholder="Message"></textarea>
 +
              <button type="submit" class="btn btn-contact">Submit</button>
 +
            </form>
 +
          </div>
 +
          <div class="contact-about">
 +
            <h4>About Us</h4>
 +
            <p>プログラミングは世界を変える力です。
 +
                そしてあなたの人生を変える力です。
 +
                この信念は、私たち自身がプログラミングで人生を変えてきた原体験に基づいています。
 +
                この原体験をもとに、Progateは 「初心者から、創れる人を生み出す」 ことを理念としています。
 +
                プログラミングの最初のハードルを徹底的に低くし、世界一わかりやすく、楽しい学習環境を作ります。プログラミングを学びたい人の、せっかくの一歩を挫折で終わらせないために、私たちは全力で皆様に寄り添い、日本のプログラミング教育を変えていきます。
 +
                私たちと一緒にプログラミングを学んでみませんか？
 +
            </p>
 +
            <h4>Address</h4>
 +
            <p><i class="fa fa-map-marker"></i>東京都渋谷区神泉町20-24 Bricks 7F</p>
 +
            <p><i class="fa fa-phone"></i>Phone: 03-6455-0950</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
  
−
<!-- Include all compiled plugins (below), or include individual files as needed -->  
+
    <!-- Social -->
−
<script src="file:///C|/Users/タルトマン/Desktop/MyLP/js/bootstrap.js"></script>
+
    <div class="social-section">
 +
      <div class="container">
 +
        <div class="section-title">
 +
          <h3>Follow Us!</h3>
 +
        </div>
 +
        <div class="follow-us">
 +
          <a href="https://www.facebook.com/Progate-742679992421539" class="social-icon" target='_blank'>
 +
            <i class="fa fa-facebook"></i>
 +
          </a>
 +
          <a href="https://twitter.com/prog_8" class="social-icon" target='_blank'>
 +
            <i class="fa fa-twitter"></i>
 +
          </a>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <footer>
 +
      <div class="container">
 +
        <div class="copyright">©2015-
 +
          Progate
 +
        </div>
 +
      </div>
 +
    </footer>
 
   </body>
 
   </body>
 
</html>
 
</html>

Revision as of 13:11, 13 October 2016

<!DOCTYPE html> 0からWEBサイトを作ってみよう

プログラミングは人生を変える

プログラミングを学んで、新しい自分を見つけよう。

もっと詳しく

学習する言語

HTML & CSS

Webページの
見た目をつくる言語

jQuery

効果やアニメーションを実装できる
Javascriptライブラリ

Javascript

動的なウェブサイト構築に用いる
プログラミング言語

Git

ソースコードのバージョン管理、
共同開発を可能にするツール

特徴

① ProgateでWEB開発の基礎知識を身につけよう
Progateで各コースをクリアして基礎知識を身につけましょう。それぞれ２周することによって知識を定着させます。
② Progateの道場で知識を習得しよう
Progateのコースで基礎知識を身につけたら、実践的な演習をこなしていきましょう。また道場では更に発展的な学習もしていきます。
③ 実際にプロダクトを作ってみよう
Progateで実践的な力を身につけたら自分で１つのプロダクトを作ってみましょう。自分で１から作ってみると、意外に理解できていないことに気づくと思います。 バグを修正しながらプロダクトを完成させることで、エンジニアとしての力を磨きましょう。
④ エンジニアインターンを体験しよう
実際に培ったスキルをインターンを通じて仕事として使ってみましょう。会社のエンジニアとともに仕事をしていくことによって、さらなるスキルアップを目指せるはずです。

プログラミングを学ぶのなら、生涯仕事に困らないことを私が保証しよう。
- Facebook元役員

コースを選ぶ

短期集中2週間コース

3万円

  • 期間 : 2週間
  • チャットでの質問 : ◯
  • オフィスでの質問 : ◯
申し込む

通常1ヶ月コース

5万円

  • 期間 : 1ヶ月
  • チャットでの質問 : ◯
  • オフィスでの質問 : ◯
申し込む

土日開発2ヶ月コース

8万円

  • 期間 : 2ヶ月
  • チャットでの質問 : ◯
  • オフィスでの質問 : ◯
申し込む

お問い合わせ

メッセージを送る

About Us

プログラミングは世界を変える力です。 そしてあなたの人生を変える力です。 この信念は、私たち自身がプログラミングで人生を変えてきた原体験に基づいています。 この原体験をもとに、Progateは 「初心者から、創れる人を生み出す」 ことを理念としています。 プログラミングの最初のハードルを徹底的に低くし、世界一わかりやすく、楽しい学習環境を作ります。プログラミングを学びたい人の、せっかくの一歩を挫折で終わらせないために、私たちは全力で皆様に寄り添い、日本のプログラミング教育を変えていきます。 私たちと一緒にプログラミングを学んでみませんか？

Address

東京都渋谷区神泉町20-24 Bricks 7F

Phone: 03-6455-0950

©2015- Progate