HTML&CSS復習課題

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>eachblog</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="logo">
      <img src="4eachblog_logo.jpg" />
    </div>
    <header>
      <ul>
        <li>トップ</li>
        <li>プロフィール</li>
        <li>4eachについて</li>
        <li>登録フォーム</li>
        <li>問い合わせ</li>
        <li>その他</li>
      </ul>

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"
      />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

      <script>
        $(document).ready(function () {
          $(".abc").bxSlider({
            auto: true,
            mode: "fade",
            speed: 1000,
            slideWidth: 400,
          });
        });
      </script>
    </header>
    <main>
      <div class="main-container">
        <div class="left">
          <h1>プログラミングに役立つ書籍</h1>
          ○ 2017年1月15日
          <div class="bookstore">
            <img src="bookstore.jpg" />
          </div>
          4eachはインターノウスが提供するオンラインでプロラミングが出来るイーラーニングシステムです。<br /><br />
          記事中身
          <div class="graybox">
            <div class="graybox1">
              <img src="pic1.jpg" />
              <p>ドメインの習得方法</p>
            </div>
            <div class="graybox1">
              <img src="pic2.jpg" />
              <p>快適な職場環境</p>
            </div>
            <div class="graybox1">
              <img src="pic3.jpg" />
              <p>Linuxの基礎</p>
            </div>
            <div class="graybox1">
              <img src="pic4.jpg" />
              <p>マーケティング入門</p>
            </div>
            <!--ここから画像2列目-->

            <div class="graybox2">
              <img src="pic5.jpg" />
              <p>アクティブラーニング</p>
            </div>
            <div class="graybox2">
              <img src="pic6.jpg" />
              <p>CSSの効率的な勉強</p>
            </div>
            <div class="graybox2">
              <img src="pic7.jpg" />
              <p>リーダブルコードとは</p>
            </div>
            <div class="graybox2">
              <img src="pic8.jpg" />
              <p>HTML5の可能性</p>
            </div>
          </div>
        </div>
        <div class="right">
          <h3>人気の記事</h3>
          <ul>
            <li>PHPのオススメ本</li>
            <li>PHP　MyAdminの使い方</li>
            <li>今話題のエディタ Pot5</li>
            <li>HTMLの基礎</li>
          </ul>
          <br />
          <h3>オススメリンク</h3>
          <ul>
            <li>インターノウス株式会社</li>
            <li>XAMPPのダウンロード</li>
            <li>Eclipseのダウンロード</li>
            <li>Bracketsのダウンロード</li>
          </ul>
          <br />
          <h3>カテゴリ</h3>
          <ul>
            <li>HTML</li>
            <li>PHP</li>
            <li></li>
            <li>MySQL</li>
            <li>javaScript</li>
          </ul>
          <br />
          <br />
          <div class="abc">
            <div><img src="pic1.jpg" /></div>
            <div><img src="pic2.jpg" /></div>
            <div><img src="pic3.jpg" /></div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      copyright (c) internous | 4each blog is the one which provides A to Z
      about programming.
    </footer>
  </body>
</html>