generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
154 lines (142 loc) · 7.59 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
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<title>Gym Squad</title>
</head>
<body>
<div class="container-fluid navalert-container">
<!-- NavBar -->
<!--NavBar inspired by Code Institute Love Running Tutorial and with code for the dropdown menu taken from Bootstrap and the Love Whiskey Tutorial-->
<nav class="navbar navbar-dark navbar-expand-sm">
<a href="/" class="navbar-brand"><i class="far fa-star"> </i> All Stars Gymnastics</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="active nav-item mr-2"><a class="nav-link" href="index.html"><i class="fas fa-home"></i> Home</a></li>
<li class="nav-item mr-2"><a class="nav-link" href="gallery.html"><i class="fas fa-camera"></i> Gallery</a></li>
<li class="nav-item mr-2"><a class="nav-link" href="timetable.html"><i class="far fa-calendar-alt"></i> Timetable</a></li>
</ul>
</div>
</nav>
<!-- /.NavBar -->
<!-- Callout -->
<!-- Hero Image inspired by Code Institute Love Running Tutorial with code for animation taken from that page-->
<section class="hero" id="hero-outer">
<div class="hero-image"></div>
<div id="cover-text">
<h1>All Stars Gymnastics Club</h1>
<h2>Competitive Squad</h2>
</div>
</section>
<!-- /.callout -->
<!-- Intro -->
<!-- Layout of section inspired by Features section of Code Institute Whiskey Drop Tutorial with code for layout and breakpoints modified from that page-->
<div class="container intro-container">
<section class="intros">
<div class="row">
<div class="col-12 page-header">
<h2 class="text-uppercase meet">Meet The Squad:</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="intro">
<h3>Coach</h3>
<div class="col coach-pic border"></div>
<p>Coach Cara has been the anchor of our squad for over ten years now. Having had a highly successful gymnastics career of her own she has extensive knowledge and skills to share. </p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="intro">
<h3>Assistant</h3>
<div class="col assistant-pic border"></div>
<p>Assistant Brooke is an invaluable part of the squad. She is always on hand to help fine-tune skills, practice routines, provide support and encouragement. </p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="intro">
<h3>The Squad</h3>
<div class="col squad-pic border"></div>
<p>Our squad girls are the pride of our club. Their dedication, hard work and resiliance is clearly demonstrated in their results, placing highly in all competitions entered.</p>
</div>
</div>
</div>
</section>
</div>
<!-- /.Intro -->
<hr>
<!-- JoinModalButton -->
<!-- Button code from Bootstrap component-->
<div class="container-fluid container-join">
<div class="col">
<div class="center-form">
<div class="form-row text-center">
<div class="col">
<button type="submit" class="btn btn-join" data-toggle="modal" data-target="#JoinModal">Apply to Join Our Squad!</button>
</div>
</div>
</div>
</div>
</div>
<!-- /.JoinModalButton -->
<!-- Footer -->
<!-- Footer inspired by Code Institute Love Running Tutorial with modified code used-->
<footer class="footer">
<ul class="social-networks">
<li><a href="https://www.facebook.com" target="_blank"><span class="sr-only">Facebook</span><i class="fab fa-facebook"> </i></a></li>
<li><a href="https://www.twitter.com" target="_blank"><span class="sr-only">Twitter</span><i class="fab fa-twitter-square"> </i></a></li>
<li><a href="https://www.youtube.com" target="_blank"><span class="sr-only">YouTube</span><i class="fab fa-youtube-square"> </i></a></li>
<li><a href="https://www.instagram.com" target="_blank"><span class="sr-only">Instagram</span><i class="fab fa-instagram-square"> </i></a></li>
</ul>
</footer>
<!-- /.Footer -->
</div>
<!-- Modal -->
<!-- Modal based on Bootstrap component heavily modified to suit purpose-->
<div class="modal" tabindex="-1" role="dialog" id="JoinModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Apply to Join Our Squad!</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Please provide your details below and we will contact you to arrange a trial.</p>
<form>
<div class="form-group">
<label for="experience">Experience</label>
<input type="text" class="form-control" id="experience" placeholder="Please provide details of your / your child's experience">
</div>
<div class="form-group">
<label for="grade">Grade</label>
<input type="text" class="form-control" id="grade" placeholder="Please enter your current Grade">
</div>
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" id="InputEmail" placeholder="Enter parents email if under 18">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-submit">Submit</button>
</div>
</div>
</div>
</div>
<!-- /.Modal -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>