【ソースコード】入門編：ブランドサイト（ジュエリー）／1カラム

index.html

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Wooden Jewelry</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div id="mainvisual">
      <img src="img/mainvisual.jpg" alt="">
    </div>

    <header id="header">
      <h1 class="site-title">
        <a href="index.html"><img src="img/logo.svg" alt="Wooden Jewelry"></a>
      </h1>

      <nav>
        <ul>
          <li><a href="#concept">Concept</a></li>
          <li><a href="#work">Work</a></li>
          <li><a href="mailto:xxxxx@xxx.xxx?subject=お問い合わせ">Contact</a></li>
        </ul>
      </nav>
    </header>

    <div class="container">
      <main>
        <section id="concept" class="content">
          <div class="img">
            <img src="img/concept.jpg" alt="">
          </div>
          <div class="text">
            <h2 class="section-title">私たちの考えるジュエリーとは</h2>
            <span class="section-title-en">Concept</span>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </section>

        <section id="work" class="content">
          <div class="text">
            <h2 class="section-title">ハンドメイドにこだわる理由</h2>
            <span class="section-title-en">Work</span>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
          <div class="img">
            <img src="img/work.jpg" alt="">
          </div>
        </section>
      </main>

      <footer id="footer">
        <div class="logo">
          <img src="img/logo.svg" alt="Wooden Jewelry">
        </div>
        <p>&copy; 2021 Wooden Jewelry</p>
      </footer>
    </div>
  </body>
</html>