-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (164 loc) · 5.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="./" />
<title>Sleep Tracker App</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,900&display=swap"
rel="stylesheet"
/>
<link href="css/index.css" rel="stylesheet" />
<script src="js/main.js"></script>
<link rel="shortcut icon" href="./imgs/icon.png" type="image/png">
<link rel="icon" href="./imgs/icon.png" type="image/png">
</head>
<body>
<div class="container home">
<section class="navigation">
<div class="logo-wrapper">
<a href="index.html"><img src="imgs/new_logo.svg" alt="logo"></a>
</div>
<img id="menu" src="./imgs/bars.svg" alt="menu">
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="#">Pricing</a>
<a href="#">Contact</a>
<a href="https://sleeptrackerapp.netlify.com/">Sign up</a>
<a href="" class="download">Download</a>
</nav>
</section>
<section class="intro">
<div class="content-50">
<h1>Sleep Tracker</h1>
<h2>Sleep better, feel better.</h2>
<p>This is the best sleep tracker app ever. It will allow you to find out how many hours of sleep you really need! It has an awesome emoji-based score system as well as nice graphs.</p>
<form action="" method="post">
<input type="email" placeholder="Enter your email">
<input type="submit" value="Get Started" >
</form>
<img class="store" src="./imgs/app-store-badge.svg" alt="App Store download">
<img class="store" src="./imgs/google-play-badge.svg" alt="Google Play Download">
</div>
<div class="content-50">
<img src="./imgs/app1.svg" alt="app" id="app1">
</div>
</section>
<section class="summary">
<div class="content-100">
<h2><b>Sleep Tracker </b>makes your sleep a super power! <img src="./imgs/1f973.svg" alt=""></h2>
<p>Acording to studies sleep is very very important. You can learn how sleep is your super power in <a style="text-decoration: none;" href="https://www.youtube.com/watch?v=5MuIMqhT8DM">this video.</a> By now you know you should sleep more and better. For that reason we introduce to you our awesome app to help you track your sleeping hours</p>
</div>
</section>
<section class="features">
<div class="content-33">
<img id="app2" src="./imgs/app3.svg" alt="">
</div>
<div class="content-66">
<div class="content-50">
<img src="./imgs/chart.svg" alt="">
<h3>We got charts</h3>
<p>We have a few charts! Quickly see how much you slept during last week.</p>
</div>
<div class="content-50">
<img src="./imgs/edit.svg" alt="">
<h3>You can edit your entries</h3>
<p>Everyone makes mistakes, unlike life we allow you to edit your mistakes.</p>
</div>
<div class="content-50">
<img src="./imgs/emoji.svg" alt="">
<h3>Its emoji based</h3>
<p>We make it quick by using an emoji-based entry system.</p>
</div>
<div class="content-50">
<img src="./imgs/calc.svg" alt="">
<h3>We calculate it for you</h3>
<p>You put the info and we do the hard work. We calculate how many hours you slept</p>
</div>
</div>
</section>
<section class="everywhere">
<div class="content-50">
<h2><b>Sleep Tracker </b>makes your sleep a super power!</h2>
<p>In todays day platforms should be available everywhere and easy to use. We make it easy for you to access your data eveywhere. Got to work and remembered you didnt fill in your sleep data? No worries, just open your browser and fill it in. We will sync across devices.</p>
</div>
<div class="content-50">
<img id="app4" src="./imgs/app4.svg" alt="">
</div>
</section>
<section class="world-users">
<div class="content-100">
<h2>Join our <b>global community</b> and get access to <br>a better way to <b>track your sleep</b></h2>
</div>
<div class="content-100">
<object id="world" data="./imgs/world.svg" type="image/svg+xml"></object>
<!-- <img id="world" src="./imgs/world.svg" alt="Users World Map"> -->
</div>
<div class="content-100">
<div class="stats">
<div class="yellow">
<span>5M+</span>
<br>
<b>Customers</b>
</div>
<div class="red">
<span>550M+</span>
<br>
<b>Hours recorded</b>
</div>
<div class="blue">
<span>70B+</span>
<br>
<b>Hours saved</b>
</div>
</div>
</div>
</section>
</div>
<!-- container -->
<footer class="footer">
<div class="container">
<section>
<div class="content-33">
<img id="footer-logo" src="imgs/new_logo.svg" alt="logo">
<img class="store" src="./imgs/app-store-badge.svg" alt="App Store download">
<img class="store" src="./imgs/google-play-badge.svg" alt="Google Play Download">
<img id="girl" src="./imgs/girl.svg">
</div>
<div class="content-66">
<div>
<h3>Acounts</h3>
<a href="">Standard</a>
<a href="">Premium</a>
</div>
<div>
<h3>Products</h3>
<a href="">Sleep tracker</a>
</div>
<div>
<h3>Company</h3>
<a href="about.html">About Us</a>
<a href="">Blog</a>
<a href="">Carrers</a>
</div>
<div>
<h3>Help</h3>
<a href="">Help Center</a>
<a href="">Security</a>
<a href="">FAQ</a>
</div>
<div>
<h3>Follow Us</h3>
<a href="">Facebook</a>
<a href="">Instagram</a>
<a href="">Twitter</a>
<a href="">Dribbble</a>
</div>
</div>
</section>
</div>
</footer>
</body>
</html>