This repository has been archived by the owner on Oct 22, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Youtube.html
264 lines (222 loc) · 6.85 KB
/
Youtube.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
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
<!DOCTYPE html>
<html>
<head>
<title>Josh Zwart's portfolio</title>
<style>
*{
margin:0;
padding:0;
}
header{
height:60px;
background:#262626;
padding:0 50px;
}
body{
background-image: url("Youtube logo.png");
background-repeat: no-repeat;
background-size: 200%;
}
.logo{
width:30%;
float:left;
color:#fff;
font-weight:bold;
text-transform:uppercase;
line-height:60px;
font-size:35px;
font-family:sans-serif;
}
nav{
width:69%;
float:right;
}
nav ul{
list-style:none;
float:right;
}
nav ul li{
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:#fff;
font-family:sans-serif;
font-weight;bold;
margin:0 10px;
line-height:60px;
text-transform:uppercase;
}
.banner{
height:100%;
}
.banner img{
width:100%;
height:100vh;
}
.maincontainer{
position: relative;
width: 1900px;
height: 100px;
background: Black;
}
.thecard{
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s ease;
background: Black;
}
.thecard:hover{
transform: rotateY(180deg);
}
.thefront{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: #ff0000;
color: #ffffff;
text-align: center;
font-family: 'zilla slab', sans-serif;
border-radius: 20px;
font-size: 18px;
font-weight: bold;
}
.theback{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: #ffffff;
color: #ff0000;
text-align: center;
font-family: 'zilla slab', sans-serif;
border-radius: 20px;
font-size: 18px;
font-weight: bold;
transform: rotateY(180deg);
}
.content{
padding:5%;
}
.content p{
font-size:18px;
line-height:1.7;
font-family:sans-serif;
margin-bottom:25px;
}
footer{
background:#000;
color:#fff;
padding:15px 50px;
text-align:center;
}
</style>
</head>
<body background="Youtube logo.png">
<header>
<div class="logo">Youtube</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Youtube.html">Youtube</a></li>
<li><a href="Skills.html">Skills</a></li>
<li><a href="About Me page.html">About Me</a></li>
<li><a href="Things I have done page.html">Things I have done</a></li>
<li><a href="Contact page.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="maincontainer">
<div class="thecard">
<div class="thefront">MY</div>
<div class="theback">YOUTUBE CHANNEL</div>
</div>
</div>
<div class="banner">
<img src="YouTube Channel.png" alt="">
</div>
<div class="content">
<Font color="#000000">
<p>
I have a Youtube channel called RandomJAZ, on this channel I have created many videos, videos which
contain edited effects such as the pan and zoom edit to zoom into the video, the cropping of the video to also give off a zoom in effect and added sound effects or music for comedic effect. As of me creating this portfolio, I have around 797 total videos and livestreams. The main use I have for my channel is mainly to have fun playing games and entertain those watching either with the gameplay or comedic edits. The main reason I started a YouTube channel is because I have always liked the idea of playing games for a living and would I talk to myself alot, so talking to an audience who is watching me play a game and me talking about what I am doing in a game excites me.
Here is the link:
<a class="social-icon" href="https://www.youtube.com/@RandomJAZ">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</p>
<div class="content">
<Font color="#000000">
<p>
Tools used:
Movavi video editor
</p>
<div class="content">
<Font color="#000000">
<p>
Here are some examples of videos which I have managed to create:
</p>
<div class="content">
<Font color="#000000">
<p>
1. Car game.....
</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rBEBCDrCXnw?si=XBU3oK4lnnbXEoSg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<div class="content">
<Font color="#000000">
<p>
This is a video in which I have used effects in Movavi video editor, such as the pan and zoom edit in the beginning where it adds to the effect of the car noises getting progressively louder whilst zooming in, there is then added comedic effect afterwards where after the zooming in, the video quickly cuts to me crashing in the game for amusement.
</p>
<div class="content">
<Font color="#000000">
<p>
2. I spent 100 days in Minecraft, on Nintendo Switch.....
</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/a5Z8kokwyec?si=9etoT-8euOGW025n" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<div class="content">
<Font color="#000000">
<p>
This is a more longer form type video around 21 minutes long showcasing what I have done in the game Minecraft across 100 Minecraft in-game days on the Nintendo Switch system, with this video, I have added in background music with text on screen to imply which Minecraft day it is and also smooth transitions to make the video feel more smooth.
</p>
<div class="content">
<Font color="#000000">
<p>
3. What?
</p>
<iframe src="https://www.youtube.com/embed/TaMTAf--OrI" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>
<div class="content">
<Font color="#000000">
<p>
This is a YouTube shorts type video in which a black box with text inside it saying 'What', a cropped zoom in the video, a freezed frame of the video and comedic music are used to communicate with the audience to make them question, 'huh, what just happened, that's not right?'.
</p>
<div class="content">
<Font color="#000000">
<p>
4. Biggest bruh moment
</p>
<iframe src="https://www.youtube.com/embed/dPS6WuSUUvI" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>
<div class="content">
<Font color="#000000">
<p>
This is another Youtube shorts video, where after I had died in the game, I use cropping within Movavi video editor to put focus on what killed me, also adding an amusing sound effect with the zoom effect from the cropping of the video to give off comedic effect.
</p>
<div class="content">
<Font color="#000000">
<p>
With these video examples I have shown which I have created on my YouTube channel, I feel as though I have become very skilled within video editing and would like to persue a proper video editing job in IT.
</p>
<div class="banner">
<img src="Me in editing room.png" alt="">
</div>
</body>
</div>
<footer>
<p>All rights reserved by Josh Zwart's portfolio.</p>
</footer>
</body>
</html>