【progate】HTML＆CSS学習コース

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progate</title>
    <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>">
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="<https://prog-8.com/images/html/advanced/main_logo.png>">
        </div>
        <!-- ここにスマートフォン用のメニューアイコンを追加してください -->
        <span class="fa fa-bars menu-icon"></span>
  
        <div class="header-right">
          <a href="#">レッスン</a>
          <a href="#">新規登録</a>
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>or</p>
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
        </div>
      </div>
    </div>
    <div class="lesson-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="<https://prog-8.com/images/html/advanced/html.png>">
              <p>HTML & CSS</p>
            </div>
            <p class="text-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="<https://prog-8.com/images/html/advanced/jQuery.png>">
              <p>jQuery</p>
            </div>
            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="<https://prog-8.com/images/html/advanced/ruby.png>">
              <p>Ruby</p>
            </div>
            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="<https://prog-8.com/images/html/advanced/php.png>">
              <p>PHP</p>
            </div>
            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
          <h3>Let's learn to code, learn to be creative!</h3>
        </div>
        <span class="btn message">さっそく開発する</span>
      </div>
    </div>
    <footer>
      <div class="container">
        <img src="<https://prog-8.com/images/html/advanced/footer_logo.png>">
        <p>Learn to code, learn to be creative.</p>
      </div>
    </footer>
  </body>
</html>

stylesheet.css

{ box-sizing: border-box; }

body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", sans-serif; }

a { text-decoration: none; }

.clear { clear: left; }

.container { max-width: 1170px; width: 100%; padding: 0 15px; margin: 0 auto; }

.top-wrapper { padding: 180px 0 100px 0; background-image: url(https://prog-8.com/images/html/advanced/top.png); background-size: cover; color: white; text-align: center; }

.top-wrapper h1 { opacity: 0.7; font-size: 45px; letter-spacing: 5px; }

.top-wrapper p { opacity: 0.7; }

.btn-wrapper { text-align: center; margin: 20px 0; }

.btn-wrapper p { margin: 10px 0; }

.signup { background-color: #239b76; }

.facebook { background-color: #3b5998; margin-right: 10px; }

.twitter { background-color: #55acee; }

.btn { padding: 8px 24px; color: white; display: inline-block; opacity: 0.8; border-radius: 4px; text-align: center; }

.btn:hover { opacity: 1; }

.fa { margin-right: 5px; }