-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
232 lines (221 loc) · 8.29 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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!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>LifeGPA</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link href="CSS/index.css" rel="stylesheet" />
</head>
<body>
<div class="top-container">
<div class="top-img">
<img class="desktop" src="Images/desktop.jpg" />
<img class="tablet" src="Images/tablet.png" />
<img class="mobile" src="Images/mobile.png" />
</div>
<div class="top-right">
<h1>LifeGPA</h1>
<p>
Ever wish there was a platform to track your "habits", your lifestyle,
your day-to-day life in a way that lead you to becoming the person you
dream of being? Introducing LifeGPA.
</p>
<div class="react-app-btns">
<a
class="waves-effect"
href="https://wizardly-swirles-432569.netlify.com/register"
>Register</a
>
<a
class="waves-effect"
href="https://wizardly-swirles-432569.netlify.com/login"
>Log In</a
>
</div>
<a href="#features"><h4>Learn More</h4></a>
<div class="arrow"><img src="Images/arrow.png" /></div>
</div>
</div>
<div id="features">
<div class="features-container">
<div class="features-card card1">
<div class="card-text">
<h2>Enhance Creative Productivity</h2>
<p>
Keep track of your productivity, be it creative, business-related,
volunteering or in any other area of life. Positive reinforcement
helps make it easier to stay motivated and on track.
</p>
</div>
<img src="Images/creative.jpg" />
</div>
<div class="features-card">
<div class="card-text">
<h2>Implement a Healthier Lifestyle</h2>
<p>
Make consious decisions to track your lifestyle via "habits" (see
below). It's up to you which habits you'd like to
continue/implement to be a healthier version of yourself.
</p>
</div>
<img src="Images/health.jpg" />
</div>
<div class="features-card card3">
<div class="card-text">
<h2>Start Living the Life You Want</h2>
<p>
We know you're already awesome. But there's always room to grow.
Let us help you put your plan into motion NOW and you'll start
seeing & feeling the results before you know it!
</p>
</div>
<img src="Images/travel.jpg" />
</div>
</div>
</div>
<div class="description">
<div id="free-img"><img src="Images/free.jpg" /></div>
<h1>About the App</h1>
<ul class="collapsible">
<li>
<div class="collapsible-header">
<i class="material-icons">expand_more</i>What is LifeGPA?
</div>
<div class="collapsible-body">
<span
>Our app aims to help you become and stay motivated to live your
best life. "How can you measure and track something so
subjective?" you might ask. Our team has created a system that
allows you to determine what lifestyle you would most like to be
living, and can be altered/modified any time you'd like. You'll
utilize what we call "habits" in order to do so.</span
>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">expand_more</i>How to use LifeGPA
</div>
<div class="collapsible-body">
<span
>Once you register, you'll see your dashboard, which displays your
current LifeGPA along with your profile information. You'll see
the menu located at the top of your page, with the option to
view/edit your daily reports, see your daily approvals, and go to
your list of habits. The magic begins with the creation of your
habits list. There you can add/delete habits as well as deciding
to create categories to put them into.</span
>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">expand_more</i>What is a "Habit"?
</div>
<div class="collapsible-body">
<span
>A habit is, put simply, an action... something that you do...
repeatedly. We typically view habits in a dichotemy, i.e. "good"
or "bad". When using LifeGPA you'll be urged to take a different
perspective on what "habit" means to you. Choose behaviors that
you would like to do more often. Things that make you happy, feel
good, and improve the quality of your life. If you think there's
something you'd like to START doing, add it as a habit. By
tracking your actions you'll not only be motivated to do the
things that help you grow, you'll also get a better understanding
of yourself.</span
>
</div>
</li>
</ul>
</div>
<div class="team">
<h1>LifeGPA Team Members</h1>
<div class="carousel">
<div class="left-button"><</div>
<div class="person">
<img class="img" src="Images/darenlarson.jpeg" />
<div class="person-text">
<h2>Daren Larson</h2>
<h3>Team Lead</h3>
<a href="https://github.com/darenlarson"
><img src="Images/github.png"
/></a>
</div>
</div>
<div class="person">
<img class="img" src="Images/anthonyjohnson.jpeg" />
<div class="person-text">
<h2>Anthony Johnson</h2>
<h3>Back-End Developer</h3>
<a href="https://github.com/divbySeptember"
><img src="Images/github.png"
/></a>
</div>
</div>
<div class="person">
<img class="img" src="Images/zach.jpeg" />
<div class="person-text">
<h2>Zach Christy</h2>
<h3>Front-End Developer</h3>
<a href="https://github.com/zchristy"
><img src="Images/github.png"
/></a>
</div>
</div>
<div class="person">
<img class="img" src="Images/katiemcknight.jpeg" />
<div class="person-text">
<h2>Katie McKnight</h2>
<h3>UI Developer</h3>
<a href="https://github.com/kmcknight1"
><img src="Images/github.png"
/></a>
</div>
</div>
<div class="person">
<img class="img" src="Images/yusufabdulkarim.png" />
<div class="person-text">
<h2>Yusuf Abdulkarim</h2>
<h3>UI Developer</h3>
<a href="https://github.com/haywhyze"
><img src="Images/github.png"
/></a>
</div>
</div>
<div class="person">
<img class="img" src="Images/saschamajewsky.jpeg" />
<div class="person-text">
<h2>Sascha Majewsky</h2>
<h3>UI Developer</h3>
<a href="https://github.com/SaschaMajewsky"
><img src="Images/github.png"
/></a>
</div>
</div>
<div class="right-button">></div>
</div>
</div>
<footer>
<p>© 2019 LifeGPA. All Rights Reserved</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="JS/team.js" async></script>
<script src="JS/description.js"></script>
<script src="JS/top-container.js" async></script>
</body>
</html>