-
Notifications
You must be signed in to change notification settings - Fork 1
/
membership.html
152 lines (138 loc) · 8.28 KB
/
membership.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
<!DOCTYPE html> <!--tells the browser that the page is using HTML5 -->
<html lang="en"> <!--sets the language to english-->
<head>
<title>Membership</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="./css/membership.css">
<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>
<header>
<nav class=" navbar navbar-expand-lg bg-dark navbar-dark">
<a href="./index.html"> <img src="./images/logo.png" alt="logo" class="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="instructors.html" class="nav-link">Instructors</a></li>
<li class="nav-item active"><a href="#" class="nav-link">Membership</a></li>
<li class="nav-item"><a href="classes.html" class="nav-link">Classes</a></li>
<li class="nav-item"><a href="schedule.html" class="nav-link">Schedule</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
</ul>
</div>
</nav>
</header>
<!--<header> closing-->
<!--added a jumbotron component with the jumbotron-fluid class and padding 4rem-->
<div class="jumbotron jumbotron-fluid mx-5 jumbo">
<div class="container">
<h1 class="display-4">Memberships</h1>
<p class="lead">Choose the membership that fits you the best and start training today!</p>
</div>
</div>
<!--cards-->
<section class="section-cards">
<div class="container">
<div class="row"> <!--class row to start the Bootstrap Grid Layout-->
<!--adding classes to card component get into the Grid-->
<!-- As we have two cards, we use the classes and attributes below:
col-sm-12 -> set to one column when the breakpoint reaches less than the sm breakpoint size. We use the 12 colums of the Grid for one element/card in browser window's sm.
col-md-6 -> set to two columns when the breakpoint is greater than the md breakpoint size. We divide the 12 colums in two of 6.-->
<div class="card col-sm-12 col-md-5">
<img src="images/memb-basic.jpg" alt="" class="card-img-top mt-2 img-fluid">
<!--mt-2 = margin-top 2, to separate the image on top-->
<div class="card-body">
<h2 class="card-title">Basic</h2>
<p class="card-text">Get Access to All Gym Equipments.</p>
<h1>DKK 19,90</h1>
</div>
</div>
<div class="card col-sm-12 col-md-5 offset-md-2">
<img src="images/memb-premium.jpg" alt="" class="card-img-top mt-2 img-fluid">
<div class="card-body">
<h2 class="card-title">Premium</h2>
<p class="card-text">Get Full Access to All Equipments and Classes.</p>
<h1>DKK 39,90</h1>
</div>
</div>
</div>
</div>
</section> <!--section-cards-->
<!--create a section for some content, wraped into container -->
<div class="section-content">
<div class="container">
<!--create a row to use Bootstrap Grid Layout-->
<div class="row my-4">
<!--divide the row in two "spaces" of 6 column each, but only when the screen is bigger than the medium size of the Grid Layout. When smaller than md, shows the two colums as one/stack-->
<article class="col-md-5">
<h2>TECHNOLOGY</h2>
<p>When it comes to the best technology in gym equipments in the market, VIAFit Basic Plan is the way to go.
<br> At VIAFit, technology is here to serve you on your daily basis training, so you don’t have to worry about old and broken equipments that might ruin your workout.</p>
</article>
<article class="col-md-5 offset-md-2">
<h2>PEOPLE</h2>
<p>VIAFit Premium Membership is all about people.
<br> Get sign in now and join our amazing VIAFit Family.
<br> We build relationship while taking care of our body.
<br> Check our <a href="classes.html">Classes Page here</a> for more info!</p>
</article>
</div>
</div>
</div>
<!--create a section and add a container for spacing -->
<div class="section section-plans mb-5 d-none d-sm-block">
<div class="container">
<!--added a carousel with captions bootstrap component-->
<div id="carouselPlan" class="carousel slide d-none d-md-block" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselPlan" data-slide-to="0" class="active"></li>
<li data-target="#carouselPlan" data-slide-to="1"></li>
<li data-target="#carouselPlan" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"> <img src="images/carousel1.jpg" class="d-block w-100 img-fluid" alt="free-coffee">
<div class="carousel-caption d-none d-md-block">
<!--display none when the screen is smaller than middle size. This is repeated for each image, total 3 of them.-->
<h5 class="display-4 mb-5">Free coffee and much more!</h5>
<!--h5 to get white color, display 4 to increase the size, margem bottom 5 to go up. This is repeated for each image, total 3 of them.-->
</div>
</div>
<div class="carousel-item"> <img src="images/carousel2.jpg" class="d-block w-100 img-fluid" alt="health">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-4 mb-5">Take care of you health!</h5> </div>
</div>
<div class="carousel-item"> <img src="images/carousel3.jpg" class="d-block w-100 img-fluid" alt="group">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-4 mb-5">Join our VIAFamily!</h5> </div>
</div>
<a class="carousel-control-prev" href="#carouselPlan" 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="#carouselPlan" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid text-center pt-3 pb-2 mt-4 mx-5 jumbo">
<!--lead typography class to make a paragraph stand out-->
<p class="lead">We are here to help you, so don't hesitate to contact us!</p>
<hr class="my-7">
<p class="lead">Join our VIAFamily</p>
<!--classes for the contact us button for styling it with background color light, border danger and btn-primary style. Also a ancher to the Contact us page-->
<a href="contact.html" class="btn bg-light btn1">Contact us</a>
<a href="#top"><h6 class="mt-3">Back to the top</h6></a>
</div>
<!--default footer for all pages-->
<footer class="footer">
<p>© All rights reserved to Group 7</p>
<p> Campus Horsens Chr. M. Østergaardsvej 4 8700 Horsens</p>
<script src="https://kit.fontawesome.com/02f649f51c.js" crossorigin="anonymous"></script>
<p>Check us on Github</p>
<a href="https://github.com/SEP-VIA-S20/VIAFit" target="_blank"> <i class="fab fa-github"></i></a>
</footer>
</body>
</html>