-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsingle-recipe.html
142 lines (142 loc) · 4.69 KB
/
single-recipe.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<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>Simply Recipes || Single Recipe</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- normalize -->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- main css -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- nav -->
<nav class="navbar">
<div class="nav-center">
<!-- header -->
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="assets/logo.svg" alt="simply recipes logo">
</a>
<button type="button" class="btn nav-btn">
<i class="fas fa-align-justify"></i>
</button>
</div>
<!-- links -->
<div class="nav-links">
<a href="index.html" class="nav-link">home</a>
<a href="about.html" class="nav-link">about</a>
<a href="tags.html" class="nav-link">tags</a>
<a href="recipes.html" class="nav-link">recipes</a>
<div class="nav-link contact-link">
<a href="contact.html" class="btn">contact</a>
</div>
</div>
</div>
</nav>
<!-- main -->
<main class="page">
<section class="recipe-hero">
<img src="./assets/recipes/recipe-4.jpeg" class="img recipe-hero-img" alt="pancakes image">
<article>
<h2>Banana Pancakes</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam dolorum sit dolores maxime fuga officiis, reiciendis nihil ad excepturi distinctio nobis perspiciatis. Amet nostrum delectus ipsum iure exercitationem? Molestias, iure.</p>
<div class="recipe-icons">
<article>
<i class="fas fa-clock"></i>
<h5>prep time</h5>
<p>30 min.</p>
</article>
<article>
<i class="far fa-clock"></i>
<h5>cook time</h5>
<p>15 min.</p>
</article>
<article>
<i class="fas fa-user-friends"></i>
<h5>servings</h5>
<p>6 servings</p>
</article>
</div>
<div class="recipe-tags">
Tags :
<a href="tag-template.html">beef</a>
<a href="tag-template.html">breakfast</a>
<a href="tag-template.html">pancakes</a>
<a href="tag-template.html">food</a>
</div>
</article>
</section>
<section class="recipe-content">
<article>
<h4>instructions</h4>
<div class="single-instruction">
<header>
<p>step 1</p>
<div></div>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, facere.</p>
</div>
<div class="single-instruction">
<header>
<p>step 2</p>
<div></div>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit ullam reiciendis repellat asperiores repellendus velit.</p>
</div>
<div class="single-instruction">
<header>
<p>step 3</p>
<div></div>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus cum nobis eius?</p>
</div>
</article>
<article class="second-column">
<div>
<h4>ingredients</h4>
<p class="single-ingredient">
1 1/2 cups dry pancake mix
</p>
<p class="single-ingredient">
1/2 cup flax seed meal
</p>
<p class="single-ingredient">
1 cup skim milk
</p>
</div>
<div>
<h4>tools</h4>
<p class="single-tool">
Hand Blender
</p>
<p class="single-tool">
Large Heavy Pot With Lid
</p>
<p class="single-tool">
Measuring Spoons
</p>
<p class="single-tool">
Measuring Cups
</p>
</div>
</article>
</section>
</main>
<footer class="page-footer">
<p>
© <span id="date"></span>
<span class="footer-logo">SimplyRecipes</span>
</p>
</footer>
<script src="js/app.js"></script>
</body>
</html>