-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
120 lines (97 loc) · 6.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
<!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="./assets/main/reset.css" />
<link rel="stylesheet" href="./assets/main/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
<title>Fit Resolution</title>
<nav class="hero-head navbar">
<div class="container is-flex">
<h1 class="title column is-size-5-mobile is-responsive mt-3"><span class="has-text-primary">FIT </span>Resolution</h1>
<ul class="nav-btn">
<li class="home mt-5 mr-4 button is-rounded is-small has-text-grey is-responsive">HOME</li>
<li class="about mt-5 mr-4 button is-small is-rounded has-text-grey is-responsive">ABOUT</li>
<li class="contact mt-5 button is-small is-rounded has-text-grey is-responsive">CONTACT</li>
</ul>
</div>
</nav>
<body class="hero is-info is-fullheight is-responsive">
<!--Nav Bar with applying Bulma-->
<main class="main-section hero-body is-responsive">
<div class="container has-text-left">
<div class="column is-half">
<h3 class="title one is-size-5-desktop has-text-grey">You are <strong class="has-text-primary">UNIQUE!</strong></h3>
<p class="title box two is-size-4 block has-text-justified is-size-5-mobile">It is important to remember that we all have different personalities, routines and life-style.
When it comes to stay active there are multiple ways to stablish a consistent exercise program.
The most important aspect of long-term health it's to find the workout that suits you!
After all, We know that If you enjoy doing something, you're likely to do it again!</p>
<p class="has-text-grey column is-two-thirds-mobile">Ready to take your <strong class="has-text-primary">FIT Resolution</strong> to the next <strong class="has-text-primary">LEVEL? </strong><br/> Start the quiz and discover your workout style.</p>
<button class="button start-btn is-primary is-rounded mt-5 is-responsive has-text-white">Fit Quiz</button>
</div>
</div>
</main>
<section class="questions-box hero-body is-hidden is-responsive">
<div class="container has-text-centered">
<div class="column is-half is-full-mobile">
<div class="questions-area is-size-5-mobile title box two has-text-grey-dark"></div>
<div class="container">
<button class="button answer-area1 answer start-btn is-primary is-rounded mt-5 is-responsive "></button>
<button class="button answer-area2 answer start-btn is-primary is-rounded mt-5 is-responsive "></button>
</div>
</div>
</div>
</section>
<section class="is-hidden hero-body gym">
<div class="container has-text-centered">
<div class="column is-half">
<h3 class="title one column is-half-mobile has-text-grey has-text-left-mobile"><strong>Thank you for taking our <span class="has-text-primary">Fit Quiz!</span></strong></h3>
<p class="title box two is-size-4 block has-text-justified">You have a set fitness goal and we know you will get there!
Joining a gym that provides all the cardio and strength equipment to build your dream body, is the way to go!<p>
<p class="has-text-grey">Click the link below and find the perfect spot to continue your journey.</p>
<button class="button gymbtn is-primary is-rounded mt-5 is-responsive has-text-white">Gym Finder</button>
</div>
</section>
<section class="is-hidden hero-body homeworkout">
<div class="container has-text-centered ">
<div class="column is-half">
<h3 class="title one column is-half-mobile has-text-grey has-text-left-mobile"><strong>Thank you for taking our <span class="has-text-primary">Fit Quiz!</span></strong></h3>
<p class="title box two is-size-4 block has-text-justified">Discover your full potential starting strong on your health journey!
Prioritizing your well-being with a busy schedule can be challenging, but that's what we are here for!</p>
<p class="has-text-grey">Click the link below and access the guide to set up your own home workout program.</p>
<button class="button workoutbtn is-primary is-rounded mt-5 is-responsive has-text-white">Workouts</button>
</div>
</section>
<section class="contact-section hero-body is-hidden">
<div class="container has-text-left">
<div class="column is-half">
<div class="box is-size-4 block has-text-justified">
<button class="column is-full is-full-mobile button is-rounded is-warning is-size-5"> <a href="https://bootcamp.ce.ucf.edu/">UCF Bootcamp</a></button>
<figure class="image p-0 mt-2">
<img src="./assets/images/ucf.png" alt="Placeholder image"></figure>
</div>
</section>
<section class="about-us hero-body is-hidden">
<div class="container has-text-left">
<div class="column is-half">
<p class="title box two is-size-4 block has-text-justified">
"Fit Resolution is an online platform that offers tools for you to better understand your fitness style.
</br>
If you are a Gym person, we provide the location of the best fitness facilities around your area.
And if what better suits your routine is the flexibility of home workouts, we got you covered! Our website offers
a wide variety of home workouts targeting each muscle group so you can determine the steps that will take you
to your dream shape."</p>
</section>
<footer class="hero-foot">
<div class="content has-text-right">
<a href="https://github.com/JonJon50/Fit-Resolution">
<i class="button is-small fa-brands fa-github is-primary is-responsive"><span class="logo">Github</span></i>
</a>
</div>
</footer>
</body>
<script src="https://kit.fontawesome.com/b754e15a00.js" crossorigin="anonymous"></script>
<script src="./assets/main/script.js"></script>
</html>