-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
216 lines (208 loc) · 11.3 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
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>TIMExtra</title>
</head>
<div class="homebody">
<body class="bg-veryLightGray">
<nav class="relative container mx-auto p-6">
<div class="flex items-center justify-between">
<div class="pt-2">
<img src="img/testlogo.png" alt=""/>
</div>
<div class="hidden md:flex space-x-6">
<a href="./index.html" class="hover:text-gray-300">Home</a>
<a href="./schedule.html" class="hover:text-gray-300">Scheduler</a>
<a href="./aboutus.html" class="hover:text-gray-300">About Us</a>
</div>
<!--button-->
<a href="./login/login.html" class="hidden md:flex p-3 px-6 pt-2 text-white bg-red-500 rounded-full baseline hover:bg-orange-500 font-bold">
Log In / Sign Up
</a>
<button id="menu-btn" class="block hamburger md:hidden focus:outline-none">
<span class="hamburger-top"></span>
<span class="hamburger-mid"></span>
<span class="hamburger-bot"></span>
</button>
</div>
<div class="md:hidden">
<div id="menu" class="absolute flex-col items-center hidden self-end py-8 mt-10 space-y-6 font-bold bg-gray-100 sm:w-auto sm:self-center left-6 right-6 drop-shadow-md">
<a href="./index.html" class="hover:text-gray-300">Home</a>
<a href="./schedule.html" class="hover:text-gray-300">Scheduler</a>
<a href="./aboutus.html" class="hover:text-gray-300">About Us</a>
<a href="./login/login.html" class="text-red-500 hover:text-gray-300">Log In / Sign Up</a>
</div>
</div>
</nav>
<section id="hero">
<div class="container flex flex-col-reverse items-center px-6 mx-auto mt-10 space-y-0">
<div class="flex flex-col mb-32 space-y-5 md:w-1/2">
<h1 class="max-w-md text-4xl font-bold text-center md:text-5xl content-center">
The Ultimate Productivity App
</h1>
<p class="text-center text-black md:text-center">
TIMExtra is an all in one productivity app that includes many features, such as a scheduler, timers, and even email notifications in order to help keep you on task. Work smarter, not harder, with TIMExtra on your side.
</p>
<div class="flex justify-center">
<a href="./login/login.html" class="p-3 px-6 pt-2 text-white bg-red-500 rounded-full baseline hover:bg-orange-500 font-bold">
Get Started
</a>
</div>
</div>
</div>
</section>
<section id="hero">
<div class="container flex flex-col-reverse items-center px-6 mx-auto mt-10 space-y-0">
<div class="flex flex-col mb-32 space-y-5 md:w-1/2">
<h1 class="max-w-md text-5xl font-bold text-center md:text-5xl content-center">
How It Works
</h1>
<p class="text-center text-black md:text-center">
TIMExtra is all-in-one productivity app that has many features. Here's how to get started!
</p>
</div>
</div>
</section>
<!-- How it works -->
<section id="features">
<!-- flex container -->
<div class="container flex flex-col px-4 mx-auto mt-10 space-y-12 md:space-y-0 md:flex-row">
<div class="flex flex-col space-y-8 md:w-1/2">
<div class="flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row">
<div class="rounded-l-full bg-lightBlue md:bg-transparent">
<div class="flex items-center space-x-2">
<div class="px-4 py-2 text-white rounded-full md:py-1 bg-darkBlue">
1
</div>
<h3 class="text-base font-bold md:justify-center md:mb-4 md:hidden">
Sign up
</h3>
</div>
</div>
<div>
<h3 class="hidden mb-4 text-lg font-bold items-center md:block">
Sign up
</h3>
<p class="text-black">
Log into your Google Account by clicking "Log in / Sign Up".
</p>
</div>
</div>
<div class="flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row">
<div class="rounded-l-full bg-lightBlue md:bg-transparent">
<div class="flex items-center space-x-2">
<div class="px-4 py-2 text-white rounded-full md:py-1 bg-darkBlue">
2
</div>
<h3 class="text-base font-bold md:mb-4 md:hidden">
Make a task
</h3>
</div>
</div>
<div>
<h3 class="hidden mb-4 text-lg font-bold md:block">
Make a task
</h3>
<p class="text-black">
Click on the "Scheduler" page on top of the screen (for mobile users, tap on the hamburger icon, and it should be second item on the list.
</p>
</div>
</div>
<div class="flex flex-col space-y-3 md:space-y-0 md:space-x-6 md:flex-row">
<div class="rounded-l-full bg-lightBlue md:bg-transparent">
<div class="flex items-center space-x-2">
<div class="px-4 py-2 text-white rounded-full md:py-1 bg-darkBlue">
3
</div>
<h3 class="text-base font-bold md:mb-4 md:hidden">
The Scheduler
</h3>
</div>
</div>
<div>
<h3 class="hidden mb-4 text-lg font-bold md:block">
The Scheduler
</h3>
<p class="text-black">
The scheduler includes: two text items for name of the task, and the approximate time it would take for you to complete the task. With that, it includes a hour/min drop down to choose of your choice. Then, there are buttons for date and time, and submit.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="max-w-6xl px-5 mx-auto mt-32 text-center">
<!-- Heading -->
<h2 class="text-4xl font-bold text-center">
What's Different About TIMExtra?
</h2>
<!-- Testimonials Container -->
<div class="flex flex-col mt-24 md:flex-row md:space-x-6">
<!-- Testimonial 1 -->
<div class="flex flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
<h5 class="text-lg font-bold">Duration</h5>
<p class="text-sm text-darkGrayishBlue">
You can set an approximate duration of how long you will be able to complete the task in.
</p>
</div>
<!-- Testimonial 2 -->
<div class=" flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:flex md:w-1/3">
<h5 class="text-lg font-bold">Auto Task</h5>
<p class="text-sm text-darkGrayishBlue">
Make tasks that can auto schedule itself.
</p>
</div>
<!-- Testimonial 3 -->
<div class="flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:flex md:w-1/3">
<h5 class="text-lg font-bold">Timer</h5>
<p class="text-sm text-darkGrayishBlue">
Having trouble staying focused? The timer is feature as part with the schedule page!
</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="bg-gold">
<!-- flex container -->
<div class="container flex flex-col items-center justify-between px-6 py-24 mx-auto space-y-12 md:py-12 md:flex-row md:space-y-0">
<!-- Header -->
<h2 class="text-5xl font-bold leading-tight text-center text-black md:text-4xl md:max-w-xl md:text-left">
Revolutionize the way you work
</h2>
<div>
<a href="./login/login.html" class="p-3 px-6 pt-2 text-white bg-red-500 rounded-full baseline hover:bg-orange-500 font-bold">
Get Started
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black">
<div class="container flex flex-col-reverse justify-between px-6 py-10 mx-auto space-y-8 md:flex-row md:space-y-0">
<!-- Logo -->
<div class="flex flex-col-reverse items-center justify-between space-y-12 md:flex-col md:space-y-0 md:items-start">
<div class="mx-auto my-6 text-center text-center text-white md:hidden"></div>
<div>
<img src="img/testlogo.png" class="h-8" alt=""/>
</div>
</div>
<div class="flex justify-around space-x-12">
<div class="flex flex-col space-y-3 text-white">
<a href="./index.html" class="hover:text-gray-300">Home</a>
<a href="./schedule.html" class="hover:text-gray-300">Scheduler</a>
<a href="./aboutus.html" class="hover:text-gray-300">About Us</a>
</div>
</div>
</div>
</div>
</footer>
<script src="./js/main.js"></script>
</div>
</body>
</html>