-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (162 loc) · 7.46 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
<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>Sleep Tracker App</title>
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display%7CPoppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<div class="logo-wrap">
<img src="images/iconfinder_hat_20_2875611.svg" alt="App logo" class="logo">
<h3>Sleep Tracker App</h3>
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#why-sleep">Why track sleep?</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="#">Support The App</a></li>
<li><a href="https://sleeptrackerapp.netlify.com/">Sign Up</a></li>
</ul>
</nav>
<header>
<h2>Hurry, sign up now to get to great sleep.<br>
The earlier you sign up, the sooner you’ll start working <br>on better days.</h2>
<div class="bg-wrap">
<div class="header-content">
<h1>
Great days start with good sleep
</h1>
<p>
Hi, we're Sleep Tracker App. Your new secret weapon for personal improvement.
</p>
<a href="https://sleeptrackerapp.netlify.com/">
SIGN IN
</a>
</div>
</div>
</header>
<section class="container home">
<div class="content-card">
<img class = "card-image" src="images/first-card.jpg" alt="Woman sleeping at a table">
<div class="text-content">
<div class="text-wrap">
<h1>What’s the big deal with sleep?</h1>
<p>When you sleep better, you’re more ready to perform.<br>
Tracking your sleep will help you do both.</p>
<a href="#why-sleep">
WHY SLEEP
</a>
</div>
</div>
</div><!--content card-->
<div class="content-card reverse">
<img class = "card-image" src="images/subscribtion.jpg" alt="Man in the mountains">
<div class="text-content">
<div class="text-wrap">
<h1>Join The Insiders.</h1>
<p>THE SCIENCE OF SLEEP STRAIGHT INTO YOUR INBOX.</p>
<input type="email" pattern="" placeholder="Enter your email" required>
<input type="submit" value="Submit">
</div>
</div>
</div><!--content card-->
<div class="content-card">
<img class = "card-image" src="images/about-us-home.jpg" alt="Group of Lambda School Students">
<div class="text-content">
<div class="text-wrap">
<h1>Who are we?</h1>
<p>Do you want to learn more about our team?</p>
<a href="about-us.html">
GO HERE
</a>
</div><!--text-wrap-->
</div><!--text-content-->
</div><!--content-card-->
</section>
<section class="why-sleep" id="why-sleep">
<h1>How Can Our App Help?</h1>
<h3>Using our App will help you track your sleep, showing you the factors that are keeping
you from getting consistent rest – Use it to discover the hidden patterns that are disrupting
your sleep.</h3>
<div class="health-card">
<img src="images/1482241816_lightbulb.png" alt="Lightbulb icon" class="health-icon">
<h2>Understand Your Sleep</h2>
<p>You can understand your sleep patterns and habits. We’re often very surprised
at the difference between how we think we sleep and how we’re really sleeping.</p>
</div>
<div class="health-card">
<img src="images/target-resized2.png" alt="Target icon" class="health-icon">
<h2>Take Action</h2>
<p>You can start taking action. Tracking your sleep shows you what you need to change.
It can also show you if sleep aids like Melatonin are working for you over the long term.</p>
</div>
<div class="health-card">
<img src="images/heart_resized_128px.png" alt="" class="health-icon">
<h2>Help Your Doctor</h2>
<p>If you decide to consult a doctor, your doctor can use your diary to
find the right solution to help you sleep.</p>
</div>
</section>
<section class="media-carousel">
<a class="arrow-left" href="javascript:void(0);"></a>
<a class="arrow-right" href="javascript:void(0);"></a>
<div class="dots-wrapper"></div>
<h2>Media talking about us</h2>
<div class="media-card">
<img src="images/NY_Times_logo.jpg" alt="New Your Times logo" class="media-logo">
<p class = 'blurb'>
“Wow, what a great app!
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.”
</p>
<p class="quote">
-The New York Times
</p>
</div>
<div class="media-card">
<img src="images/The_Guardian_logo.jpg" alt="The Guardian Logo" class="media-logo">
<p class="blurb">“Wow, what a great app!
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.”</p>
<p class="quote">-The Guardian</p>
</div>
<div class="media-card">
<img src="images/TechCrunch-Logo-blackwhite.jpg" alt="Tech Crunch Logo" class="media-logo">
<p class="blurb">“Wow, what a great app!
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.”</p>
<p class="quote">-Tech Crunch</p>
</div>
<div class="media-card">
<img src="images/techradar_logo.jpg" alt="Tech Radar Logo" class="media-logo">
<p class="blurb">“Wow, what a great app!
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.”</p>
<p class="quote">-TechRadar</p>
</div>
</section><!--media-carousel-->
<footer>
<div class="sm-icons">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-github"></a>
<a href="#" class="fa fa-linkedin"></a>
</div><!--sm-icons-->
<div class="copyright">
<div class="logo-wrap">
<img src="images/iconfinder_hat_20_2875611.svg" alt="App logo" class="logo">
<h3>Sleep Tracker App</h3>
</div>
<p>© 2019 Sergei Kabuldzhanov.</p>
</div><!--copyright-->
</footer>
</body>
</html>