-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslide-2.html
90 lines (86 loc) · 5.61 KB
/
slide-2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mindbodygreen</title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/main.min.css">
</head>
<body>
<section class="toggleSlider">
<div class="toggleSlider__info-wrap">
<div class="toggleSlider__info-wrap--awake">
<div class="toggleSlider__info-wrap__title">Over time, <span class="toggleSlider__info-wrap__highlight">quality sleep</span> helps with...</div>
<div class="toggleSlider__info-wrap__content-block toggleSlider__info-wrap__content-block--first" id="sl2_a1">
<a href="#" class="toggleSlider__info-wrap__content-block__close">Close</a>
<div class="toggleSlider__info-wrap__num">1</div>
<div class="toggleSlider__info-wrap__heading">Less stress</div>
<p>Sleep has a direct effect on your stress hormone — <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2913764/" target="_blank">high blood pressure</a> is associated with not getting enough restorative
rest.</p>
</div>
<div class="toggleSlider__info-wrap__content-block" id="sl2_a2">
<a href="#" class="toggleSlider__info-wrap__content-block__close">Close</a>
<div class="toggleSlider__info-wrap__num">2</div>
<div class="toggleSlider__info-wrap__heading">A stronger immune system</div>
<p>While you sleep, your body produces cytokines, which protect against infection-causing viruses and bacteria. Getting at
least seven hours of sleep can help <a href="https://www.ncbi.nlm.nih.gov/pubmed/19139325" target="_blank">ward off the common cold</a>.</p>
</div>
</div>
<div class="toggleSlider__info-wrap--tired">
<div class="toggleSlider__info-wrap__title">Over time, <span class="toggleSlider__info-wrap__highlight">poor sleep</span> could lead to...</div>
<div class="toggleSlider__info-wrap__content-block toggleSlider__info-wrap__content-block--first" id="sl2_t1">
<a href="#" class="toggleSlider__info-wrap__content-block__close">Close</a>
<div class="toggleSlider__info-wrap__num">3</div>
<div class="toggleSlider__info-wrap__heading">A higher risk for heart disease</div>
<p>A <a href="https://www.ncbi.nlm.nih.gov/pubmed/21300732" target="_blank">review of 15 studies</a> found that people who don’t get enough sleep are nearly 50 percent more likely to develop heart
disease than people who regularly get in seven to eight hours.</p>
</div>
<div class="toggleSlider__info-wrap__content-block" id="sl2_t2">
<a href="#" class="toggleSlider__info-wrap__content-block__close">Close</a>
<div class="toggleSlider__info-wrap__num">4</div>
<div class="toggleSlider__info-wrap__heading">A higher risk for type 2 diabetes</div>
<p><a href="https://www.ncbi.nlm.nih.gov/pubmed/10543671" target="_blank">One study</a> found prediabetic symptoms in normally healthy adults after getting only four hours of sleep six days in a
row. (The symptoms went away after a week of regular sleep!) And repeatedly sleeping less than six hours a night can up
your chance of <a href="https://www.ncbi.nlm.nih.gov/pubmed/15851636" target="_blank">developing type 2 diabetes</a>.</p>
</div>
<div class="toggleSlider__info-wrap__content-block" id="sl2_t3">
<a href="#" class="toggleSlider__info-wrap__content-block__close">Close</a>
<div class="toggleSlider__info-wrap__num">5</div>
<div class="toggleSlider__info-wrap__heading">A link to weight gain</div>
<p>Studies have shown a strong tie between sleep deprivation and obesity—adults consistently sleeping fewer than five hours
a night are <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2398753/" target="_blank">55% more likely</a> to become obese.</p>
</div>
<div class="toggleSlider__info-wrap__content-block" id="sl2_t4">
<a href="#" class="toggleSlider__info-wrap__content-block__close">Close</a>
<div class="toggleSlider__info-wrap__num">6</div>
<div class="toggleSlider__info-wrap__heading">A link to mental health changes</div>
<p>It’s not just a little irritability here and there. According to <a href="https://www.ncbi.nlm.nih.gov/pubmed/16259539" target="_blank">reports</a>, a lack of sleep over time may significantly
affect your mood, with reports citing a link between sleep deprivation and depression.</p>
</div>
</div>
</div>
<div class="toggleSlider__image-wrap">
<a href="#" class="toggleSlider__toggle"><div class="toggleSlider__toggle__arrow"></div></a>
<div class="toggleSlider__image-wrap--tired">
<div class="toggleSlider__hotspots">
<a href="#sl2_t1" class="toggleSlider__hotspots__hotspot" style="top: 38%; left: 52%;">3</a>
<a href="#sl2_t2" class="toggleSlider__hotspots__hotspot" style="top: 45%; left: 20%;">4</a>
<a href="#sl2_t3" class="toggleSlider__hotspots__hotspot" style="top: 51%; left: 70%;">5</a>
<a href="#sl2_t4" class="toggleSlider__hotspots__hotspot" style="top: 20%; left: 60%;">6</a>
</div>
<img src="images/slide2-tired.jpg" alt="">
</div>
<div class="toggleSlider__image-wrap--awake">
<div class="toggleSlider__hotspots">
<a href="#sl2_a1" class="toggleSlider__hotspots__hotspot" style="top: 30%; left: 60%;">1</a>
<a href="#sl2_a2" class="toggleSlider__hotspots__hotspot" style="top: 35%; left: 35%;">2</a>
</div>
<img src="images/slide2-awake.jpg" alt="">
</div>
</div>
</section>
<script src="js/main.min.js"></script>
</body>
</html>