-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrecipe.html
More file actions
104 lines (90 loc) · 3.75 KB
/
recipe.html
File metadata and controls
104 lines (90 loc) · 3.75 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Recipe-e-Cook-Book</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/recipe.css" media="screen">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<script src="assets/js/dbAction.js"></script>
<script src="assets/js/display.js"></script>
<script src="assets/js/script.js"></script>
</head>
<body>
<!-- logo + background image -->
<header>
<div class="logo"></div>
<div class="styleSwitch">
<a id="css-pink" href="#red">Pink</a>
<a id="css-blue" href="#blue">Blue</a>
<a id="css-green" href="#green">Green</a>
</div>
</header>
<section class="container">
<!-- navigation + slogan -->
<nav class="row">
<ul class="navigation col-lg-7">
<li class="navbar-nav home"><a href="#">Add new recipe</a></li>
<li class="navbar-nav categories"><a href="#">Categories of recipes</a></li>
</ul>
</nav>
<!-- photo + ingredients description part -->
<div>
<div class="row borders">
<div class="col-lg-5 picture" id="picture">
<img src="#" class="dish" alt="" width="420">
</div>
<div class="recipe-things col-lg-7">
<div class="row"><h2 id="title" class="col title-cook-book"></h2></div>
<div class="row"><h3 id="category" class="col category-name"><span class="category">Category:</span> Breakfast</h3></div>
<div class="row">
<div class="col">
<h5 class="list-name list-ing">List of ingredients:</h5>
<ol class="list" id="ingredients-list">
<!-- span in ol for bold elements -->
</ol>
</div>
<div class="col">
<h5 class="list-name list-things">List of needed things:</h5>
<ol class="list" id="things">
</ol>
</div>
</div>
<div class="row">
<div class="col">
<p class="font-bold time" id="timeOfMaking"></p>
</div>
<div class="col">
<p class="people font-bold">No of serves: <span id="servings-span">
<button id="servings-btn" type="button" name="button"><span id="servings">4</span></button></span></p>
</div>
</div>
</div>
</div>
<!-- recipe description -->
<div class="row main">
<div class="col">
<h3 class="recipe font-bold">Recipe:</h3>
<p id="recipeText" class="recipe-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- buttons -->
<div class="row borders">
<div class="buttons col-lg-12">
<button class="button-recipe" type="button" id="input_print">Print recipe</button>
<button class="button-recipe" type="button">Edit recipe</button>
<button class="button-recipe" type="button">Delete recipe</button>
</div>
</div>
</div>
</section>
<p class="info">Project made with the help of community of Udacity fewd-challange</p>
</body>
</html>