【ソースコード】入門編：レシピサイト／レシピページ
index.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Recipe Diary</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="stylesheet" href="css/style.css">
</head>
<body>
<main>
<div class="flex">
<div class="image">
<img src="img/recipe.jpg" alt="">
</div>
<div class="recipe">
<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>
</div>
<div class="btn">
<a href="#">レシピ一覧を見る</a>
</div>
</main>
<footer id="footer">
<ul class="sns">
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
<p>© 2021 Recipe Diary</p>
</footer>
</body>
</html>