-
Notifications
You must be signed in to change notification settings - Fork 0
/
tutorials.html
151 lines (132 loc) · 8.7 KB
/
tutorials.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Tutorials Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Logo -->
<header>
<a href="index.html"><img id="logo" src="Content-images/thedistrict.png" alt="The Game District Logo"> </a>
</header>
<!-- Bar START-->
<div class="page-bar">
<!-- Dropdown menu -->
<a><i id="dropdown-menu" class="fas fa-bars"></i></a>
<!-- Search Bar -->
<div class="search-box">
<input class="search-txt" type="text" name="Search" placeholder="Search ...">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<!-- Bar END-->
<!-- Sidebar -->
<div id="sidebar" class="show-sidebar">
<a href="index.html">Landing <i id="home-icon" class="fas fa-home"></i> </a>
<a href="reviews.html">Reviews <i id="reviews-icon" class="fas fa-file-alt"></i> </a>
<a href="glossary.html">Glossary <i id="glossary-icon" class="fas fa-book-open"></i></a>
<a href="jobs.html">Jobs <i id="jobs-icon" class="fas fa-briefcase"></i></a>
<a href="tutorials.html" class="active">Tutorials <i id="tutorials-icon" class="fas fa-chalkboard-teacher"></i></a>
</div>
<!-- CONTENT START -->
<ul class="cards">
<li class="cards__item">
<div class="card__content card__text">In this quick video, I’ll show you how to embed a YouTube video in HTML,how to <br/>
make it responsive on any sized device and I’ll reveal how you can easily adjust<br/>
embed options such as auto play.
<a href="https://www.youtube.com/watch?v=9YffrCViTVk"> https://www.youtube.com/watch?v=9YffrCViTVk </a> </div>
<div class="youtube_video_container">
<iframe class="embed-responsive embed-responsive-16by9" width="560" height="315" src="https://www.youtube.com/embed/9YffrCViTVk" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</li>
<li class="cards__item">
<div class="card__content card__text"> In this quick video we will go over the CSS Flexbox model. This is a quick overview,<br/>
not an in-depth course. We will look at the basics such as: display:flex, flex, order,<br/>
flex-direction, justify-content, flex-basis and align-items
<a href="https://www.youtube.com/watch?v=JJSoEo8JSnc"> https://www.youtube.com/watch?v=JJSoEo8JSnc </a>
</div>
<div class="youtube_video_container">
<iframe class="embed-responsive embed-responsive-16by9" width="560" height="315" src="https://www.youtube.com/embed/JJSoEo8JSnc" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</li>
<li class="cards__item">
<div class="card__content card__text">Hey Guys, in this responsive website tutorial, we'll be styling up the footer content <br/>in the CSS.
<a href="https://www.youtube.com/watch?v=rw1NO3ztMKw"> https://www.youtube.com/watch?v=rw1NO3ztMKw </a> </div>
<div class="youtube_video_container">
<iframe class="embed-responsive embed-responsive-16by9" width="560" height="315" src="https://www.youtube.com/embed/rw1NO3ztMKw" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</li>
<li class="cards__item">
<div class="card__content card__text">In this video, I’ll show you how to make and implement a responsive footer in your <br/>website.
<a href="https://www.youtube.com/watch?v=gt8zOLQ8A0w"> https://www.youtube.com/watch?v=gt8zOLQ8A0w </a> </div>
<div class="youtube_video_container">
<iframe class="embed-responsive embed-responsive-16by9" width="560" height="315" src="https://www.youtube.com/embed/gt8zOLQ8A0w" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</li>
<li class="cards__item">
<div class="card__content card__text">I got many requests to create video on building a complete responsive website from <br/>
scratch. I've created this website by only Using HTML, CSS and JQuery (for navigation <br/>
and smooth scrolling) + Font awesome icons. PART 1
<a href="https://www.youtube.com/watch?v=lvMIGNjjIP8"> https://www.youtube.com/watch?v=lvMIGNjjIP8 </a> </div>
<div class="youtube_video_container">
<iframe class="embed-responsive embed-responsive-16by9" width="560" height="315" src="https://www.youtube.com/embed/lvMIGNjjIP8" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</li>
<li class="cards__item">
<div class="card__content card__text">I got many requests to create video on building a complete responsive website from <br/>
scratch. I've created this website by only Using HTML, CSS and JQuery (for navigation <br/>
and smooth scrolling) + Font awesome icons. PART 2
<a href="https://www.youtube.com/watch?v=51KwstYEyo4"> https://www.youtube.com/watch?v=51KwstYEyo4 </a> </div>
<div class="youtube_video_container last_video_padding">
<iframe class="embed-responsive embed-responsive-16by9" width="560" height="315" src="https://www.youtube.com/embed/51KwstYEyo4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</li>
</ul>
<!-- Footer START -->
<footer>
<!-- Wrapper -->
<div id="body-container">
<!-- Contact Us LEFT BLOCK -->
<div id="contact-us">
<h3> Contact Us: <br/> </h3>
<a href="#"><i id="phone-icon" class="fas fa-phone-square"></i> 07467127035 </a> <br/>
<a href="#"><i id="maps-icon" class="fas fa-map-marked-alt"></i> University Drive, Northampton NN1 5PH </a> <br/>
<a href="#"><i id="envelope-icon" class="fas fa-envelope"></i> [email protected] </a>
</div>
<!-- Quick Links CENTER BLOCK -->
<div id="quick-links">
<h3> Quick Links: <br/> </h3>
<a href="index.html"> Homepage </a>
<a href="jobs.html"> Jobs </a>
<a href="glossary.html"> Glossary </a>
<a href="Reviews.html"> Reviews </a>
<a href="tutorials.html"> Tutorials </a>
</div>
<!-- Social Media RIGHT BLOCK -->
<div id="social-media">
<h3> Follow Us On:<br/> </h3>
<a href="#"><i id="facebook-icon" class="fab fa-facebook"></i>Facebook</a> <br/>
<a href="#"><i id="twitter-icon" class="fab fa-twitter-square"> </i>Twitter</a> <br/>
<a href="#"><i id="pinterest-icon" class="fab fa-pinterest-square"> </i> Pinterest </a>
</div>
</div>
</footer>
<!-- Footer END -->
<!-- jQuery Core 3.3.1 -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Hamburger menu, on click navigation toggle -->
<script>
$(document).ready(function(){
$("#dropdown-menu").click(function(){
$(".show-sidebar").toggle();
});
});
</script>
</body>
</html>