-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (175 loc) · 14 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
<!--All of us worked on the index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VIAFit</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.svg">
<script src="https://kit.fontawesome.com/72db12e280.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid pt-5 p-md-5">
<!--NAVIGATION BAR (Group Work)-->
<!--The navigation consists of logo, surrounded by an anchor element aligned
to the left on all breakpoints, and an ul element aligned to the right with all the anchors redirecting to specific pages-->
<!--On small screens the navigation items are hidden under burger menu icon, displayed on-click -->
<nav class="navbar navbar-expand-lg navbar-dark blue-bg fixed-top">
<a class="navbar-brand" href="index.html"> <img src="images/logo.png" class="img-fluid w-75" alt="logo" title="VIAFit"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse justify-content-end font-weight-bold h5" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item px-1"> <a class="nav-link orangeText text-center" href="index.html">Home</a> </li>
<li class="nav-item px-1"> <a class="nav-link text-white text-center" href="Classes.html">Classes</a> </li>
<li class="nav-item px-1"> <a class="nav-link text-white text-center" href="Schedule.html">Schedule</a> </li>
<li class="nav-item px-1"> <a class="nav-link text-white text-center" href="Instructors.html">Instructors</a> </li>
<li class="nav-item px-1"> <a class="nav-link text-white text-center" href="About.html">About Us</a> </li>
</ul>
</div>
</nav>
<!--CAROUSEL-->
<!--For this section we have used the component carousel from getbootstrap.com -->
<!--The component consists of carousel indicators represented by ordered list and a wrapper container carousel inner holding all of the images-->
<!--We have added carousel control buttons for previous and next respresented by an anchor element -->
<div id="carouselExampleIndicators" class="carousel slide my-5" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"> <img class="d-block w-100" src="images/carouselPic1.png" alt="First slide"> </div>
<div class="carousel-item"> <img class="d-block w-100" src="images/carouselPic2.png" alt="Second slide"> </div>
<div class="carousel-item"> <img class="d-block w-100" src="images/carouselPic3.png" alt="Third slide"> </div>
<div class="carousel-item"> <img class="d-block w-100" src="images/carouselPic4.png" alt="Forth slide"> </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
<!--MAIN CONTENT LINKING TO THE REST OF THE PAGES-->
<!--The main content is represented by four rows wiht no gutters between them -->
<!--Each row has twelve column layout on small and medium screens and six by six column layout for large screens and above -->
<!--The image element is displayed on small, large and extra large screens, and is not displayed on medium breakpoint due to screen size constraints -->
<div class="row no-gutters my-4 text-center text-md-left align-items-center bg-gray">
<div class="col-12 col-lg-6 py-4 px-5">
<h2 class="font-weight-bold mb-md-4">Find your class</h2>
<p class="text-muted mb-md-3">We offer variety of classes taught by talented and passionate instructors. We offer stretching, Zumba, crossfit and many more. By participating in a class you can get professional training and advice.</p> <a role="button" class="btn bg-orange text-white" href="Classes.html">Our classes</a> </div>
<div class="col-12 d-md-none d-lg-block col-lg-6"> <img src="images/classesHeader.png" class="img-fluid" alt="training in a class"> </div>
</div>
<div class="row no-gutters my-4 text-center text-md-left align-items-center bg-gray">
<div class="col-12 col-lg-6 py-4 px-5 order-lg-last order-first">
<h2 class="font-weight-bold mb-md-4">Flexible schedule</h2>
<p class="text-muted mb-md-5">We provide you with the opportunity to train in the morning, evening and afternoon.</p> <a role="button" class="btn bg-orange text-white" href="Schedule.html">Our schedule</a> </div>
<div class="col-12 d-md-none d-lg-block col-lg-6"> <img src="images/about1.jpg" class="img-fluid" alt="fitness center with weights"> </div>
</div>
<div class="row no-gutters my-4 text-center text-md-left align-items-center bg-gray">
<div class="col-12 col-lg-6 py-4 px-5">
<h2 class="font-weight-bold mb-md-4">Meet the intructors</h2>
<p class="text-muted mb-md-5">Our instructors are passionate and well trained professionals with years of experience in different fields. </p> <a role="button" class="btn bg-orange text-white" href="Instructors.html">Our intructors</a> </div>
<div class="col-12 d-md-none d-lg-block col-lg-6"> <img src="images/fitnessCouple-mini.jpg" class="img-fluid" alt="couple training together"> </div>
</div>
<div class="row no-gutters my-4 text-center text-md-left align-items-center bg-gray">
<div class="col-12 col-lg-6 py-4 px-5 order-lg-last order-first">
<h2 class="font-weight-bold mb-md-4">Our team</h2>
<p class="text-muted mb-md-5">VIAfit is relatively small fitness center which always keeps up with the latest sport trends. When our clients are happy we are happy. </p> <a role="button" class="btn bg-orange text-white" href="About.html">About us</a> </div>
<div class="col-12 d-md-none d-lg-block col-lg-6"> <img src="images/aboutUsHeader.png" class="img-fluid" alt="crossfit class"> </div>
</div>
<!--Reviews Section -->
<!--The card deck component from getbootstrap.com has been used -->
<!--The card deck class is a wrapper container constisting of cards with card body -->
<!--The information in the card body is displayed by using the blockquote class and blockquote footer-->
<div class="card-deck">
<div class="card card-shadow bg-light"> <img class="card-img-top" src="images/1.jpg" alt="review image">
<div class="card-body">
<blockquote class="blockquote"><i class="fas fa-quote-right orangeText"></i>
<p class="card-text blockquote">Very nice place, has everything one needs to train. Keeps things interesting. Would like to see more aerobic classes, though.</p>
<footer class="blockquote-footer">
<h5 class="card-title">Melisa</h5> </footer>
</blockquote>
</div>
<div class="card-footer"> <small class="text-muted">1st of July 2019</small> </div>
</div>
<div class="card card-shadow bg-light"> <img class="card-img-top" src="images/2.jpg" alt="review image">
<div class="card-body">
<blockquote class="blockquote"><i class="fas fa-quote-right orangeText"></i>
<p class="card-text blockquote">Spacious, clean. Fully equipped. Very friendly and helpful staff. I love yoga and stretching classes.</p>
<footer class="blockquote-footer">
<h5 class="card-title">Noemi</h5> </footer>
</blockquote>
</div>
<div class="card-footer"> <small class="text-muted">24th of October 2019</small> </div>
</div>
<div class="card card-shadow bg-light"> <img class="card-img-top" src="images/3.jpg" alt="review image">
<div class="card-body">
<blockquote class="blockquote"><i class="fas fa-quote-right orangeText"></i>
<p class="card-text">Well equiped, clean gym with friendly staff. Although it would be nice to have longer opening hours or 24/7. I think it's a nice fitness gym.</p>
<footer class="blockquote-footer">
<h5 class="card-title">Erik</h5> </footer>
</blockquote>
</div>
<div class="card-footer"> <small class="text-muted">18th of November 2019</small> </div>
</div>
</div>
</div>
<!-- FOOTER (Groupwork) -->
<!-- The wrapper for the footer is container fluid so its displayed with 100% on all breakpoints-->
<!-- The footer consists of four rows -->
<!-- The first row is twelve column layout for displaying a motivation quote-->
<!-- The second row is twelve column layout on small devices, six by six on medium and five by seven on large and above-->
<!-- There is a paragraph aligned to the left on medium and above, and a container of social media icons aligned to the right on medium and above-->
<!-- The third row represents the main content for the footer with twelve column layout on small and three column layout on medium and above -->
<!-- The fourth row is twelve column layout on all breakpoints consisting of the copyright-->
<div class="container-fluid blue-bg text-white">
<div class="row text-center mt-5 p-5 bg-gradient">
<div class="col-12">
<h3 class="text-uppercase">Stay active, stay fit</h3>
<p class="small text-uppercase orangeText font-weight-bold">with viafit</p>
</div>
</div>
<div class="row py-3 mx-xl-5">
<div class="col-md-6 col-lg-5 text-center text-md-left mb-3 mb-md-0 orangeText">
<p class="mb-0">Stay connected<span class="d-none d-md-inline">, follow us on social media!</span></p>
</div>
<div class="col-md-6 col-lg-7 text-center text-md-right"> <a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f orangeText mr-5"></i></a> <a href="https://twitter.com/explore" target="_blank"><i class="fab fa-twitter orangeText mr-5"></i></a> <a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram orangeText"></i></a> </div>
</div>
<div class="row text-center text-md-left mt-5 justify-content-center ml-xl-5">
<div class="col-md-3 mx-auto mb-4">
<h5 class="text-uppercase font-weight-bold">viafit horsens</h5>
<hr class="bg-orange mb-4 mt-0 d-inline-block mx-auto w-25">
<p class="mx-auto mx-md-0 small w-75 ">With a large selection of team training and experienced trainers, Viafit ensures the right fit for you</p>
</div>
<div class="col-md-3 mx-auto mb-4">
<h5 class="text-uppercase font-weight-bold">About us</h5>
<hr class="bg-orange mb-4 mt-0 d-inline-block mx-auto w-25">
<p><a class="text-white" href="Classes.html">Classes</a></p>
<p><a class="text-white" href="Schedule.html">Schedule</a></p>
<p><a class="text-white" href="Instructors.html">Instructors</a></p>
</div>
<div class="col-md-3 mx-auto mb-4">
<h5 class="text-uppercase font-weight-bold">Opening hours</h5>
<hr class="bg-orange mb-4 mt-0 d-inline-block mx-auto w-25">
<p class="mb-0 font-weight-bold">Weekdays</p>
<p class="small">05:30 - 22:00</p>
<p class="mb-0 font-weight-bold">Weekend</p>
<p class="small">07:00 - 22:00</p>
</div>
<div class="col-md-3 mx-auto mb-md-0 mb-4">
<h5 class="text-uppercase font-weight-bold">Contact</h5>
<hr class="bg-orange mb-4 mt-0 d-inline-block mx-auto w-25">
<p><i class="fas fa-home mr-3"></i>Kollegievænget 26, Horsens</p>
<a class="text-white" href="mailto:viafit@gmail.com"> <i class="fas fa-envelope mr-3 mb-4"></i>viafit@gmail.com</a>
<p><i class="fas fa-phone mr-3"></i> + 45 50 17 86 65</p>
</div>
</div>
<div class="row">
<div class="col-12 text-muted text-center py-3 small">© 2020 Copyright: <a href="index.html" class="orangeText"> viafit.dk</a> </div>
</div>
</div>
</body>
</html>