generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
white.html
207 lines (184 loc) · 9.25 KB
/
white.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="Description" content="Website with various tea selection.">
<!-- Bootstrap CSS -->
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/pages.css">
<title>White tea</title>
</head>
<body>
<!--Bootstrap navbar template some modifications made by me-->
<nav class="navbar fixed-top navbar-expand-sm">
<div id="logoimg"><a href="index.html"><img
src="assets/img/rsz_logo_tea_leaves_timothy-newman-_zh-grbh0ie-unsplash.png"
alt="tea leave logo"></a></div>
<div class="brand-name-container"><a href="index.html"><h1>BREW</h1></a> <sup><a href="index.html">subscription tea club</a></sup></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown"
aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars navbar-icon-color" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#ModalContainer">Contact US</a>
</li>
</ul>
</div>
</nav>
<div class="container style--tea">
<div class="row justify-content-start">
<div class="col-6">
<img src="assets/img/white_tea_tamara-schipchinskaya-jtAvJcJCdgY-unsplash.jpg" alt="teapot with white tea">
</div>
<div class="col-6 text-center" id="paragraph">
<h1>White tea</h1>
<p>White tea, like black and green tea, is made from the Camellia sinensis plant and contains polyphenols, a
set of phytonutrients that are thought to be responsible for the health effects of tea.
</p>
<p> Different
white teas have different amounts of catechins, a category of polyphenols, and the overall range of
concentrations overlaps with that of green tea, meaning that some white teas have the same concentration
of polyphenols as some green teas.
</p>
<p>*Free delivery on all orders</p>
<button class="btn btn-outline-success" data-toggle="modal" data-target="#ModalContainer">Subscribe to WHITE TEA</button>
</div>
</div>
<br>
<hr>
<br>
<div class="row justify-content-center brewing">
<div class="col-12">
<h3>How to brew your tea</h3>
<ol>
<li>Boil the water. White tea needs milder water, let water reach <strong>85°C</strong> Because it has a
special concentration of essential oils that give it an exquisite aroma, then brewing with too hot
water will kill these wonderful smells.
</li>
<li>Add tea. Pour your water on to the tea to help ‘agitate’ the leaves. This helps the infusion.
<li>Brew. Leave the tea to infuse and let nature weave her little magic spell!</li>
<li>Remove the tea. Lift loose tea leaves out in their infuser or pour the tea over a strainer.
</li>
<li>Serve. Take a moment to enjoy your tea. You’re now ready for anything!</li>
</ol>
<br>
<hr>
<br>
<h3>HOW LONG TO BREW?</h3>
<ul>
<li>Brew time usualy no more than: <strong>5 minutes</strong></li>
</ul>
<br>
<hr>
<br>
<h3>Fancy extras?</h3>
<p>
You can add honey to white tea. It will boost many of the white tea's medicinal properties, and give the
brew a much more pleasant taste. However you must add honey to white tea in a very specific way, in
order to keep its health-improving properties:
<br>
<strong> NEVER add honey to hot tea ! It will lose all its
properties.</strong>
</p>
<br>
</div>
</div>
</div>
<div class="container text-center">
<a href="green.html" class="btn btn-outline-success">< Green tea</a>
<a href="puer.html" class="btn btn-outline-success">Pu'er tea ></a>
</div>
<footer class="container-fluid" id="footer">
<div class="row align-items-center justify-content-center footer--div">
<div class="col-4 align-self-start">
<h3>Links</h3>
<ul>
<li><a class="nav-link" href="index.html">Homepage</a></li>
<li><a class="nav-link" href="index.html#ceremonies">Traditions</a></li>
<li><a class="nav-link" href="index.html#history">History</a></li>
<li><a class="nav-link" href="delivery.html">Delivery & Returns</a></li>
</ul>
</div>
<div class="col-4 align-self-start">
<h3>Address</h3>
<p class="inline-block">1 IMAGINARY STREET,<br>
LONDON, UK,<br>
SE1 3US</p>
</div>
<div class="col-4 align-self-start"><h3>Contact us</h3>
<ul>
<li id="contact-us">
<a href="https://www.facebook.com/alexander.grib" target="_blank"><i
class="fab fa-facebook-square" aria-hidden="true"><span
class="sr-only">Facebook link.</span></i>
</a>
<a href="https://www.linkedin.com/in/alexander-grib/" target="_blank">
<i class="fab fa-linkedin" aria-hidden="true"></i><span
class="sr-only">Linkedin link.</span></a>
<a href="https://github.com/alexandergrib/ms1" target="_blank">
<i class="fab fa-github" aria-hidden="true"><span class="sr-only">Github link.</span></i>
</a>
</li>
</ul>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="ModalContainer" tabindex="-1" role="dialog" aria-labelledby="ModalContainer"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalTitle">Lets get in touch</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="https://formdump.codeinstitute.net/">
<div class="form-group">
<label for="fname">Your Name:</label>
<input type="text" class="form-control" id="fname" name="fname" placeholder="Your full name"
required>
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="name@example.com"
required>
<label for="teaSelector">Select your tea:</label>
<select class="form-control" id="teaSelector" name="tea">
<option>White tea</option>
<option>Black tea</option>
<option>Green tea</option>
<option>Pu'er tea</option>
</select>
<label for="Textarea">Leave your message:</label>
<textarea class="form-control" id="Textarea" rows="3" name="message"></textarea>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script> $('.navbar-nav>li>a').on('click', function () {
$('.navbar-collapse').collapse('hide');
});</script>
</body>
</html>