-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathTEMPLATE.html
174 lines (153 loc) · 8.2 KB
/
TEMPLATE.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
<!--
IMPORTANT:
Please don't override the style sheet with inline CSS;
it has been placed here in order to keep website design
consistent.
If you feel that a change should be made to the style sheet itself,
please open an issue within the github repository itself
(https://github.com/NTUDevSoc/ntu-cookbook/issues).
NOTE:
This template isn't going to look great on its own until it's in the appropriate files with
everything linked together ... if you do experience any issues please do let us know so we can help you out! :)
-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="../../CSS/StyleSheet.css">
<!-- Icons -->
<script src="https://kit.fontawesome.com/f7a97ee3aa.js" crossorigin="anonymous"></script>
<!-- Website Favicon -->
<link rel = "shortcut icon" type = "image/png" href = "">
<!-- Logo Font -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
<!-- Page Title -->
<!-- Put the name of your Recipe HERE -->
<title>Recipe NAME</title>
</head>
<body>
<!-- Navbar -->
<!-- Image and text -->
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="../../index.html">
<img src="../../Assets/Logo.png" width="50" height="50" class="d-inline-block" alt="">
<b class = navbar-title>NTU Cookbook</b>
</a>
</nav>
<!-- Content -->
<div class = "container my-4 content">
<!-- Recipe Title -->
<div class = "row text-center">
<div class = "col-md">
<!-- Put the name of your Recipe HERE -->
<h1>Recipe NAME</h1>
</div>
</div>
<!-- Recipe Image -->
<div class = "row">
<div class = "col-md">
<!--This is where your image goes, ensure that within your recipe folder, you have got a file called Images
The next step is to simple put "Images/ImageName.png" into the src = section and give it a meaningful alt
description too! -->
<img src="Images/ImageName.JPG" class = "rounded img-thumbnail" alt="Picture of some food">
</div>
</div>
<!-- Recipe Content -->
<div class = "row mx-3 my-3">
<!-- Recipe Details -->
<div class = "col-md-6">
<!-- Main Details -->
<div class = "row">
<div class = "col">
<h2>Details:</h2>
<ul>
<!-- Here's where you fill in the timing details + serving details of your recipe -->
<li>Preparation time: <b>5 min</b></li>
<li>Cooking time: <b>~5 min</b></li>
<li>Servings: <b>Serves 1</b></li>
</ul>
</div>
</div>
<!-- Dietary Details -->
<div class = "row my-2">
<div class = "col-md">
<h2>Dietary Details:</h2>
<ul>
<!-- This is where all those dietary details go!
You should only change what is necessary ... if there are other dietary details
that you would like to add, simply stick it between the <li> and </li> tags as
seen below -->
<li>Vegan/Vegetarian: <b>Vegetarian</b></li>
<li>Potential Allergens: <b>Egg</b></li>
<li>Gluten-free: <b>Yes</b></li>
</ul>
</div>
</div>
<!-- Ingredients -->
<div class = "row my-2">
<div class = "col-md">
<h2>Ingredients</h2>
<ul>
<!-- Behold! The ingredients section. To add more ingredients, simply put the
ingredient in a new line sandwiched between <li> and </li> tags as seen below -->
<li>3 eggs</li>
<li>1 tsp. sunflower oil <b>OR</b> 1 tsp. butter</li>
<li>A lot of love</li>
<li>A healthy serving of ice cream</li>
</ul>
</div>
</div>
</div>
<!-- Recipe Directions -->
<div class = "col-md-6">
<h2>Directions</h2>
<ol>
<!-- Now here comes the directions ... this part is a tad bit tricky but you should have
the hang of this whole list thing by now. In case you don't do some research or ask for help!
If your instructions are a lot longer than ours, feel free to add more list items to expand this -->
<li>Eat some ice cream</li>
<li>Decide to stop procrastinating on your other work</li>
<ul>
<li>If unable to do so, continue to eat more ice cream</li>
</ul>
<li>Make an omelette</li>
</ol>
</div>
</div>
<hr>
<!-- Other Details -->
<div class = "row mx-3 my-2">
<!-- References -->
<div class = "col-md-6">
<h2>References</h2>
<ol>
<!-- We're almost done! Heres an optional section for references, all you need to do is change up
the text and replace the links in href = "#" with an actual link instead of a '#'-->
<li><a href="#">This is a reference</a></li>
<li><a href="#">This is also a reference</a></li>
</ol>
</div>
<!-- Contributors -->
<div class = "col-md-6">
<h2>Contributors</h2>
<ul>
<!-- And here we are at the finish line, just pop your name in here-->
<li>Written by ME</li>
<li>Recipe by SOME CHEF used as reference, along with some personal experience.</li>
</ul>
</div>
</div>
</div>
<!-- DO NOT TOUCH -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="Javascript.js"></script>
</body>
</html>