-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
312 lines (254 loc) · 14.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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!-- The HTML file provides the structure for a website that -->
<!-- promotes a fake app called the 'HabitHelper'. The code -->
<!-- is structured in such a way that multiple libraries are -->
<!-- used as resources to implement various features for the -->
<!-- site. A major implementation in this project is the use -->
<!-- of the Bootstrap library through a Content Delivery -->
<!-- Network (CDN). After the listed library resources, the -->
<!-- remainder of the HTML code structure for the website is -->
<!-- is divided into sections for better styling techniques, -->
<!-- which are implemented in an external CSS file. -->
<!-- ... -->
<!-- Author: Andrew Krause -->
<!-- Date: 06/30/2021 -->
<!-- ... -->
<!DOCTYPE html>
<html>
<!-- In addition to including the standard character encoding, the head section -->
<!-- of the HTML structure also lists multiple library resources like Bootstrap -->
<head>
<!-- Encoding type and title -->
<meta charset="utf-8">
<title>HabitHelper</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<!-- Bootstrap Scripts - this is an important resource! -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<!-- The HTML body contains the different sections of the website -->
<body>
<!-- This is the TITLE section of the website -->
<section class="colored-section" id="title">
<!-- The div right within the section contains main title, image, and download buttons-->
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<!-- Add the brand name for the navigation bar -->
<a class="navbar-brand" href="">HabitHelper</a>
<!-- Collapsable Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsable div to contain navigation bar links; content within div can be collapsed -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- NOTE: In Bootstrap 5, ml-auto is ms-auto -->
<ul class="navbar-nav ms-auto">
<!-- First navigation bar link -->
<li class="nav-item">
<!-- You can use an href to navigate to a part -->
<!-- of a website using the i.d. of that part -->
<a class="nav-link" href="#footer">Contact</a>
</li>
<!-- Second navigation bar link -->
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<!-- Third navigation bar link -->
<li class="nav-item">
<a class="nav-link" href="#cta">Downloads</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<!-- Implement the BOOTSTRAP grid system by nesting divs -->
<div class="row">
<!-- The h1 and buttons are contained within a div that is responsive to the screen size -->
<div class="col-lg-6 col-md-12 col-sm-12">
<h1 class="big-heading">Create new, healthy habits to improve your lifestyle.</h1>
<!-- Add icons before the two download buttons on the webpage -->
<button type="button" class="btn btn-light btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<!-- The image on the top of the page is contained within another div; also responsive -->
<div class="col-lg-6 col-md-12 col-sm-12">
<img class="title-image" src="images/my_images/phone-with-clock/mobile-alt-solid.png" alt="routine-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="white-section" id="features">
<div class="container-fluid">
<!-- Implement the BOOTSTRAP grid system by nesting divs for the features -->
<div class="row">
<!-- Create a div for the first feature -->
<div class="feature-box col-lg-4 col-md-12 col-sm-12">
<i class="feature-icon fas fa-check-circle"></i>
<h3 class="feature-title">Accessible. Simple. Effective.</h3>
<p>Step by step habit building to improve each day.</p>
</div>
<!-- Create a div for the second feature -->
<div class="feature-box col-lg-4 col-md-12 col-sm-12">
<i class="feature-icon fas fa-file-medical"></i>
<h3 class="feature-title">Get Medical Input. </h3>
<p>Receive help from certified professionals. Or link your hospital to the app.</p>
</div>
<!-- Create a div for the third feature -->
<div class="feature-box col-lg-4 col-md-12 col-sm-12">
<i class="feature-icon fas fa-user-friends"></i>
<h3 class="feature-title">Build a Support Team.</h3>
<p>Connect with friends to help each other build new habits. Like getting more sleep!</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="colored-section" id="testimonials">
<!-- Main Bootstrap Carousel div -->
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<!-- The inner carousel div contains all carousel items or slides -->
<div class="carousel-inner">
<!-- Carousel item 1; this is where the slide starts on the webpage (active) -->
<div class="carousel-item active container-fluid">
<!-- Inner div contains testimonial element 1 -->
<h2 class="testimonial-text">Habits are often difficult to build. With HabitHelper, I was able to overcome some of my biggest obstacles.</h2>
<img class="testimonials-image" src="images/my_images/testimonials/man-by-wall-cropped.jpg" alt="dog-profile">
<em>Josh, Los Angeles</em>
</div>
<!-- Carousel item 2 -->
<div class="carousel-item container-fluid">
<!-- Inner div contains testimonial element 2 -->
<h2 class="testimonial-text">Whether you are trying to change a habit or improve upon an exisiting one, HabitHelper is a great assett.</h2>
<img class="testimonials-image" src="images/my_images/testimonials/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
<!-- Carousel item 3 -->
<div class="carousel-item container-fluid">
<!-- Inner div contains testimonial element 3 -->
<h2 class="testimonial-text">The app uses a simple, clean format that is easy to follow. Helps you achieve your goals step-by-step.</h2>
<img class="testimonials-image" src="images/my_images/testimonials/women-city-cropped.jpg" alt="lady-profile">
<em>Katherine, Minnesota</em>
</div>
</div>
<!-- Carousel buttons for navigating through the items/slides -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Press -->
<section class="colored-section" id="press">
<img class="press-logo" src="images/instructor_images/TechCrunch.png" alt="tc-logo">
<img class="press-logo" src="images/instructor_images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/instructor_images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/instructor_images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section class="white-section" id="pricing">
<!-- Create a div that has a Bootstrap class for adapting content to screen sizes -->
<div class="container-fluid">
<!-- Create a heading for the pricing plans on the website -->
<h2 class="section-heading">Clear and Concise Plans for Healthy Habit Building</h2>
<p>Simple and affordable price plans for your needs.</p>
<!-- Create a card deck div so the price cards are on the same line -->
<div class="card-deck">
<!-- Create a div to contain all the cards -->
<div class="row">
<!-- Create a col div for spacing properties-->
<div class="col-pricing col-lg-4 col-md-6 col-sm-12">
<!-- Create the first Bootstrap pricing card -->
<div class="card h-100">
<div class="card-header py-3">
<h3>Starter</h3>
</div>
<div class="card-body h-100">
<h2 class="price-text">Free</h2>
<p>Unlimited App Usage</p>
<p>Up to 1 Health Expert</p>
<p>Up to 5 Team Members</p>
<button type="button" class="w-100 btn btn-lg btn-outline-dark">Sign up for free</button>
</div>
</div>
</div>
<!-- Create a col div for spacing properties-->
<div class="col-pricing col-lg-4 col-md-6 col-sm-12">
<!-- Create the second Bootstrap pricing card -->
<div class="card h-100">
<div class="card-header py-3">
<h3>Premium</h3>
</div>
<div class="card-body h-100">
<h2 class="price-text">$5 / mo</h2>
<p>Unlimited App Usage</p>
<p>Up to 2 Health Experts</p>
<p>Up to 10 Team Members</p>
<button type="button" class="w-100 btn btn-lg btn-dark">Get started</button>
</div>
</div>
</div>
<!-- Create a col div for spacing properties-->
<div class="col-pricing col-lg-4 col-md-12 col-sm-12">
<!-- Create the third Bootstrap pricing card -->
<div class="card">
<div class="card-header py-3">
<h3>Ultimate</h3>
</div>
<div class="card-body h-100">
<h2 class="price-text">$10 / mo</h2>
<p>Unlimited App Usage</p>
<p>Unlimited Health Experts</p>
<p>Unlimited Team Members</p>
<button type="button" class="w-100 btn btn-lg btn-dark">Get started</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="colored-section" id="cta">
<div class="container-fluid">
<h3 class="big-heading">Find and build a new habit to improve the quality of each day. Every day.</h3>
<button type="button" class="btn btn-light btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
</section>
<!-- Footer -->
<footer class="white-section" id="footer">
<div class="container-fluid">
<div class="image-attributions">
<!-- Attribure the clock and phone icons-->
<p class="attribution-text">Clock icon from <a class="attribution-text" href="https://fontawesome.com/v5.15/icons/history?style=solid" title="NounProject">The Noun Project</a></p>
<p class="attribution-text">Mobile phone icon from <a class="attribution-text" href="https://fontawesome.com/v5.15/icons/mobile-alt?style=solid" title="NounProject">The Noun Project</a></p>
<!-- Attribute the testimonial images -->
<p class="attribution-text">Male testimonial image from <a class="attribution-text" href="https://www.pexels.com/search/profile%20picture/" title="Pexels1">Pexels</a></p>
<p class="attribution-text">First female testimonial image from <a class="attribution-text" href="https://www.appbrewery.co/p/web-development-course-resources" title="AppBrewery1">The App Brewery</a></p>
<p class="attribution-text">Second female testimonial image from <a class="attribution-text" href="https://www.pexels.com/search/profile%20picture/" title="Pexels2">Pexels</a></p>
<!-- Attribure the tech company images -->
<p class="attribution-text">Tech Crunch image from <a class="attribution-text" href="https://www.appbrewery.co/p/web-development-course-resources" title="AppBrewery2">The App Brewery</a></p>
<p class="attribution-text">The Next Web image from <a class="attribution-text" href="https://www.appbrewery.co/p/web-development-course-resources" title="AppBrewery3">The App Brewery</a></p>
<p class="attribution-text">Business Insider image from <a class="attribution-text" href="https://www.appbrewery.co/p/web-development-course-resources" title="AppBrewery4">The App Brewery</a></p>
<p class="attribution-text">Mashable image from <a class="attribution-text" href="https://www.appbrewery.co/p/web-development-course-resources" title="AppBrewery5">The App Brewery</a></p>
</div>
<i class="footer-icon fab fa-facebook"></i>
<i class="footer-icon fab fa-twitter"></i>
<i class="footer-icon fab fa-instagram"></i>
<i class="footer-icon fab fa-snapchat"></i>
<i class="footer-icon fas fa-envelope"></i></p>
<p>© Copyright <script>document.write(new Date().getFullYear())</script> HabitHelper by Andrew Krause</p>
</div>
</footer>
</body>
</html>