入門編：ブランドサイト（ジュエリー）／LP

Wooden Jewelry

Concept
Work
Contact

私たちの考えるジュエリーとは
Concept

テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト

ハンドメイドにこだわる理由
Work
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト

Wooden Jewelry

© 2022 Wooden Jewelry

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>【コーディング練習】ブランドサイト（ジュエリー）/ LP</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="mainvisual">
  <img src="img/mainvisual.jpg" alt="">
</div><!-- /.mainvisual -->

<!-- .header -->
<header class="header">
  <h1><img src="img/logo.svg" alt="Wooden Jewelry"></h1>
  <nav class="gnav">
    <ul>
      <li><a href="#concept">Concept</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="mailto:xxxxx@xxx.xxx.com?subject=お問い合わせ">Contact</a></li>
    </ul>
  </nav>
</header>
<!-- /.header -->

<!-- .main -->
<main class="main-content">
  <div class="wrapper">
    <img src="img/concept.jpg" alt="">
    <section class="text-block">
      <h2>私たちの考えるジュエリーとは</h2>
      <h3>Concept</h3>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </section>
  </div><!-- /.wrapper -->
  <div class="wrapper">
    <img src="img/work.jpg" alt="">
    <section class="text-block">
      <h2>ハンドメイドにこだわる理由</h2>
      <h3>Work</h3>
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </section>
  </div><!-- /.wrapper -->
</main>
<!-- /.main -->

<!-- .footer -->
<footer class="footer">
  <img src="img/logo.svg" alt="Wooden Jewelry">
  <p><small>© 2021 Wooden Jewelry</small></p>
</footer>
<!-- /.footer -->
</body>
</html>

@charset "UTF-8";

/* -------------------------------------
  reset
-------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;;
}


/* -------------------------------------
  body
-------------------------------------- */
body {
  color: #666;
  font-size: 16px;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.0;
}


/* -------------------------------------
  header
-------------------------------------- */
.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
  padding: 18px 18px 20px;
}
.header h1 {
  width: 110px;
  margin-right: 34px;
  line-height: 0.6;
}
.site-title a {
  display: block;
}

@media screen and (min-width: 768px) {
  .header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
    padding: 30px 5% 33px;
  }
}


/* -------------------------------------
  nav
-------------------------------------- */
.gnav > ul {
  display: flex;
  font-size: 12px;
  font-weight: 600;
}
  .gnav a {
    display: block;
    padding: 2px 14px 0;
  }


/* -------------------------------------
  main
-------------------------------------- */
.mainvisual > img {
  height: 50vh;
  object-fit: cover;
}
.wrapper {
  padding: 0 18px;
}
  .wrapper > img {
    margin-bottom: 10px;
  }
  .text-block h2 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.5;
  }
  .text-block h3 {
    margin-bottom: 28px;
    font-size: 13px;
  }
  .text-block p {
    margin-bottom: 60px;
    line-height: 1.5;
  }

@media screen and (min-width: 768px) {
  .mainvisual {
    padding: 4% 5% 0;
  }
    .mainvisual > img {
      width: 100%;
      height: 100%;
    }
  .main-content {
    max-width: 1006px;
    margin: 0 auto;
  }
  .wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
  }
  .wrapper:nth-of-type(even) {
    flex-direction: row-reverse;
  }
    .wrapper > img {
      width: 50%;
    }
    .text-block {
      padding: 0 68px;
    }
    .text-block h2 {
      margin-bottom: 10px;
      font-weight: normal;
      line-height: 1.5;
    }
    .text-block h3 {
      margin-bottom: 28px;
      font-size:13px
    }
    .text-block p {
      line-height: 1.5;
    }
}


/* -------------------------------------
  footer
-------------------------------------- */
.footer {
  display: flex;
  justify-content: space-between;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 18px;
}
  .footer > img {
    width: 110px;
  }
  .footer > p {
    font-size: 14px;
  }