入門編：レシピサイト／レシピページ

レシピサイト：レシピページ

ひよこ豆とアボガドのタコス
たっぷりのひよこ豆とレンズ豆にアボガドとトマトを添えて、少しライムを絞ったらおいしいタコスのできあがりです。

材料（2人分）
テキストテキスト
1個
テキストテキスト
1個
テキストテキスト
1個
テキストテキスト
1個
テキストテキスト
1個

作り方
1.テキストテキストテキストテキスト
2.テキストテキストテキストテキスト
3.テキストテキストテキストテキスト
4.テキストテキストテキストテキスト
5.テキストテキストテキストテキスト

レシピ一覧を見る

Instagram
Twitter
Facebook

© 2022 Recipe Diary

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【コーディング練習】レシピサイト / レシピページ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- .main-content -->
<main class="main-content">
  <div class="wrapper">
    <div class="image-block">
      <img src="img/recipe.jpg" alt="">
    </div><!-- /.image-block -->
    <div class="recipe-block">
      <h1 class="page-title">ひよこ豆とアボガドのタコス</h1>
      <p>たっぷりのひよこ豆とレンズ豆にアボガドとトマトを添えて、少しライムを絞ったらおいしいタコスのできあがりです。</p>
      <h2 class="content-title">材料（2人分）</h2>
      <dl class="ingredient-list">
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
      </dl>
      <h2 class="content-title">作り方</h2>
      <ol class="step-list">
        <li>テキストテキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
      </ol>
    </div><!-- .recipe-block -->
  </div><!-- /.wrapper -->
  <div class="btn-block">
    <a href="#">レシピ一覧を見る</a>
  </div>
</main>
<!-- /.main-content -->

<!-- .footer -->
<footer class="footer">
  <ul class="sns">
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Facebook</a></li>
  </ul>
  <p>&copy; 2022 Recipe Diary</p>
</footer>
<!-- /.footer -->
</body>
</html>

@charset "UTF-8";

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


/* ----------------------------------------
  body
---------------------------------------- */
body {
  color: #333;
  font-size: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
}


/* ----------------------------------------
  main
---------------------------------------- */
.wrapper {
  margin-bottom: 60px;
}
.recipe-block {
  padding: 40px 25px 0;
}
  .page-title {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .recipe-block > p {
    margin-bottom: 40px;
  }
  .content-title {
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #aaa;
    font-size: 20px;
  }
  .ingredient-list {
    display: grid;
    grid-template-columns: 1fr 28px;
    margin-bottom: 40px;
  }
  .ingredient-list > dt, .ingredient-list > dd {
    padding: 6px 0;
    border-bottom: 1px dotted #aaa;
  }
  .step-list li {
    list-style: decimal;
    margin-left: 20px;
    padding: 6px 0;
    border-bottom: 1px dotted #aaa;
  }

.btn-block {
  text-align: center;
}
  .btn-block > a {
    display: inline-block;
    margin-bottom: 100px;
    padding: 18px 60px;
    border: solid 1px #2b2a27;
    font-size: 14px;
  }

@media screen and (min-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .image-block > img {
    width: 100%;
    height: 700px;
    object-fit: cover;
  }
  .recipe-block {
    padding: 40px 10% 0;
  }
}


/* ----------------------------------------
  footer
---------------------------------------- */
.footer {
  padding: 0 20px 20px;
  font-size: 12px;
}
  .sns {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
    text-align: center;
  }
    .sns a {
      padding: 0 10px;
      text-decoration: underline;
    }
  .footer > p {
    text-align: center;
  }