index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PHOTO BOOK 2</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <header>
      <img src="img/logo.svg" alt="" />
    </header>
    <main>
      <div class="mainvisual">
        <img src="img/mainvisual.jpg" alt="" />
      </div>
      <div class="contents">
        <div class="index">
          <h2 class="title">INDEX</h2>
          <ol>
            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
            <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
          </ol>
        </div>
        <div class="photos">
          <img class="photo1" src="img/photo1.jpg" alt="" />
          <img class="photo2" src="img/photo2.jpg" alt="" />
          <img class="photo3" src="img/photo3.jpg" alt="" />
          <img class="photo4" src="img/photo4.jpg" alt="" />
        </div>
        <div class="detail">
          <h2 class="title">DETAIL</h2>
          <div class="detail__box">
            <div class="detail__box--data">
              <h3>著者</h3>
              <p>タイトルタイトルタイトル</p>
              <h3>出版社</h3>
              <p>タイトルタイトルタイトル</p>
              <h3>発行年</h3>
              <p>2021年1月1日</p>
            </div>
            <div class="detail__box--texts">
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                <a href="#">オンラインストアで見る</a>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
        <small>&copy; 2021 PHOTO BOOK 2</small>
    </footer>
  </body>
</html>