-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
271 lines (226 loc) · 12.3 KB
/
index.html
File metadata and controls
271 lines (226 loc) · 12.3 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">
<title>ViewTube - Video Site</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/album/">
<!-- Bootstrap core CSS -->
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="album.css" rel="stylesheet">
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">The author of this website is one of the current IPTP students - 2022 enrollment year. The purpose of this website is to demonstrate a working knowledge of Bootstrap along with CSS and HTML.
The site is based on the main Bootstrap example and then customised to meet coursework requirements.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="https://twitter.com" class="text-white">Follow on Twitter</a></li>
<li><a href="https://facebook.com" class="text-white">Like on Facebook</a></li>
<li><a href="https://instagram.com" class="text-white">Catch us on Instagram</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<desc>Created with Fabric.js 1.7.22</desc>
<defs>
</defs>
<g transform="translate(128 128) scale(0.72 0.72)" style="">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05000000000004) scale(3.89 3.89)" >
<path d="M 45 0 C 20.147 0 0 20.147 0 45 c 0 24.853 20.147 45 45 45 s 45 -20.147 45 -45 C 90 20.147 69.853 0 45 0 z M 62.251 46.633 L 37.789 60.756 c -1.258 0.726 -2.829 -0.181 -2.829 -1.633 V 30.877 c 0 -1.452 1.572 -2.36 2.829 -1.634 l 24.461 14.123 C 63.508 44.092 63.508 45.907 62.251 46.633 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</g>
</svg>
<strong class="nav-vid-title">Video Library</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1>Welcome to the IPTP Video Library</h1>
<p class="lead text-muted">Here you can access video tutorials about web development. Topics covered include HTML, CSS, and Bootstrap.</p>
<p>
<a href="#html-section" class="btn btn-danger my-2">View HTML Videos</a>
<a href="#css-section" class="btn btn-secondary my-2">View CSS Videos</a>
<a href="#bootstrap-section" class="btn btn-danger my-2">View Bootstrap Videos</a>
</p>
</div>
</section>
<section class="header-thin text-center">
<div class="container" id="html-section">
<h1>HTML Training</h1>
<p class="lead text-muted">The videos below are a great introduction to HTML.</p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<iframe width="100%" height="225px" src="https://www.youtube.com/embed/gXLjWRteuWI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
<div class="card-body">
<p class="card-text">Learn HTML & CSS in 2022 | Crash Course</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">2 mins 19 sec</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<iframe width="100%" height="225px" src="https://www.youtube.com/embed/vQWlgd7hV4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<p class="card-text">Learn HTML5 and CSS3 For Beginners</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">54 mins 2 sec</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<iframe width="100%" height="225px" src="https://www.youtube.com/embed/keJn4LSNuHk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<p class="card-text">HTML and CSS tutorial for beginners</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">46 mins 24 sec</small>
</div>
</div>
</div>
</div>
</div> <!-- ending row 1 -->
<section class="header-thin text-center">
<div class="container" id="css-section">
<h1>CSS Training</h1>
<p class="lead text-muted">The videos below are a great introduction to Cascading Stylesheets.</p>
</div>
</section>
<div class="row"> <!-- row 2 -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<iframe width="100%" height="225px" src="https://www.youtube.com/embed/F_feF3-NGtQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<p class="card-text">CSS Tutorial For Beginners</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">36 mins 33 sec</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<iframe width="100%" height="225px" src="https://www.youtube.com/embed/HYeKKMFYK8o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<p class="card-text">CSS Crash Course For Beginners</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">45 mins 48 sec</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<iframe width="100%" height="225px" src="https://www.youtube.com/embed/1Rs2ND1ryYc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<p class="card-text">CSS Tutorial - Zero to Hero</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">18 mins 37 sec</small>
</div>
</div>
</div>
</div>
</div> <!-- ending row 2 -->
<section class="header-thin text-center">
<div class="container" id="bootstrap-section">
<h1>Bootstrap Training</h1>
<p class="lead text-muted">The videos below are a great introduction to Bootstrap.</p>
</div>
</section>
<div class="row"> <!-- row 3 -->
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<iframe width="100%" height="225px" src="https://www.youtube.com/embed/eow125xV5-c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<p class="card-text">Learn Bootstrap in less than 20 minutes</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">18 mins 40 sec</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<iframe width="100%" height="225px" src="https://www.youtube.com/embed/-qfEOE4vtxE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<p class="card-text">Bootstrap CSS Framework</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">46 mins 21 sec</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<iframe width="100%" height="225px" src="https://www.youtube.com/embed/5GcQtLDGXy8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<p class="card-text">Bootstrap Beginner Crash Course</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">13 mins 26 sec</small>
</div>
</div>
</div>
</div>
</div> <!-- ending row 3 -->
</div> <!-- ending container -->
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>IPTP Video Library is © IPTP, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="https://getbootstrap.com">Visit the Bootstrap homepage</a>.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="assets/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>