-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·210 lines (189 loc) · 8.93 KB
/
index.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
208
209
210
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>how to sleep.</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,700" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body id="page-top" class="background-darker">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top background-darker">
<a class="navbar-brand js-scroll-trigger" href="#page-top"><strong>how to sleep.</strong></a>
<button id="hamburger-menu" class="navbar-toggler collapsed" type="button" data-toggle="collapse"
data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul id="navBarList" class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll-trigger active" href="#page-top">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#reduce">Reduce</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#relax">Relax</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#rest">Rest</a>
</li>
</ul>
</div>
</nav>
<header class="d-flex">
<div id="particles-js"></div>
<div id="parallax-mobile"></div>
<div id="parallax-container">
<div class="moon rellax" data-rellax-speed="-2"></div>
<div class="cloud1 rellax" data-rellax-speed="6"></div>
<div class="mountains3 rellax" data-rellax-speed="10"></div>
<div class="mountains2 rellax" data-rellax-speed="12"></div>
<div class="cloud2 rellax" data-rellax-speed="8"></div>
<div class="mountains rellax" data-rellax-speed="14"></div>
</div>
<div class="sheep"></div>
<div class="container align-self-center pb-5">
<div class="row headline">
<div class="col-lg-5">
<h1 class="mb-3">How to get a good night of sleep.</h1>
<p class="lead">Understand the steps to take to achieve a great night of sleep.</p>
<a href="#reduce" class="js-scroll-trigger">
<button class="btn btn-yellow">
<span class="fas fa-angle-double-down icon"></span>
Learn more
</button>
</a>
</div>
</div>
</div>
</header>
<section id="reduce" class="background-dark">
<div class="container">
<div class="row vertical-align">
<div class="col-lg-7 mx-auto text-yellow">
<h2>Reduce Technology & Caffeine</h2>
<p class="lead">There are a few easy things that you can <i>reduce</i> to help get a better night of sleep.
</p>
<ul>
<li>
<p>Avoid bringing gadgets, such as mobile phones, into your bedroom because they emit
blue light which suppresses the secretion of
<a href="https://www.sleepfoundation.org/articles/melatonin-and-sleep" target="_blank">melatonin</a>.
Melatonin being a hormone that
regulates sleep/wake cycles – with it increasing in the evening to induce sleep. Learn
how to <a href="https://www.theverge.com/2019/3/22/18270975/how-to-dark-mode-iphone-android-mac-windows-xbox-ps4-nintendo-switch" target="_blank">enable night mode</a>
on most of your gadgets.</p>
</li>
<li>
<p>Try not to have caffeine in the late afternoon as its effects can
remain for upto 8 hours. If you enjoy having something warm to drink before bed try a
herbal tea as they contain little to no caffeine. However
<a href="javascript:void(0)" data-toggle="tooltip" data-placement="top"
title="The following popular teas contain caffeine in order from most to least: Black, Pu-erh, Oolong, Yellow, White, Green and even Decaf">some</a>
teas do contain caffeine, so be mindful of them.</p>
</li>
<li>
<p>Avoid large meals and beverages right before bed to ensure you don't wake up with digestive
discomfort or the need to urinate.</p>
</li>
<li>
<p>While naps are great, try not to take one after 3pm because it can make it harder
to fall asleep at night.</p>
</li>
</ul>
</div>
<div class="col-lg-5">
<img id="reduce-image" src="images/reduce/reduce.gif" class="img-fluid" alt="about_image"
style="transform: scaleX(-1);">
</div>
</div>
</div>
</section>
<section id="relax" class="background-yellow">
<div class="container">
<div class="row vertical-align relax-content">
<div class="col-lg-7 mx-auto">
<h2>Relax Your Body & Mind</h2>
<p class="lead text-dark">It’s important to have time before bed to unwind.
Try to schedule your days so that there is time to <i>relax</i> before bed.</p>
<ul>
<li>
<p>Help relax your body by having a warm shower or bath. The drop in body temperature
after a shower or bath may help you to feel sleepy, and can help you to unwind
and relax before bed.</p>
</li>
<li>
<p>Try reading a book before you head to bed. If you've picked up a fiction book,
this will help relax your mind aswell as your eyes.</p>
</li>
<li>
<p>Practicing mindfulness or meditation before bed will help reduce any busy thoughts
that may be clouding your mind at the end of the day. Aswell as relaxing your body
through conscious control of your breathing. Some great meditation resources are
<a href="https://www.headspace.com" target="_blank">Headspace</a> and
<a href="https://wakingup.com" target="_blank">Waking Up</a>.
</p>
</li>
</ul>
</div>
<div class="col-lg-5">
<img id="relax-image" src="images/relax/relax.gif" class="img-fluid" alt="about_image">
</div>
</div>
</div>
<div class="ground"></div>
</section>
<section id="rest" class="background-dark">
<div class="container">
<div class="row vertical-align">
<div class="col-lg-7 mx-auto text-yellow">
<h2>Rest Up, You've Earnt It</h2>
<p class="lead">Now it is time for bed, following the previous tips should give you a great
headstart on a good night of sleep.</p>
<p>If you find yourself still tossing and turning the best thing to do is to get up
and get out of bed into a quiet room where you can read next to a dim light. This will help
train your mind that your bed is only a place for sleeping, and not a place to remain
awake. It is important to not use any technology or eat anything at this point, because
this will just make it harder for you to get to sleep.</p>
</div>
<div class="col-lg-5">
<img id="rest-image" src="images/rest/rest.gif" class="img-fluid" alt="about_image">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5 background-darker">
<div class="container text-center">
<p class="">The information found on this site has been sourced from Matthew Walker's
book <a href="https://www.sleepdiplomat.com/author" target="_blank">Why We Sleep</a>.
</p>
<p>This website was created by <a href="https://seb.bailouni.com" target="_blank">Seb Bailouni</a>.</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom JavaScript for this theme -->
<script src="js/scrolling-nav.js"></script>
<script src="vendor/rellax/rellax.min.js"></script>
<script src="vendor/particles/particles.js"></script>
<script src="js/custom.js"></script>
</body>
</html>