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
/
Things I have done page.html
186 lines (161 loc) · 4.03 KB
/
Things I have done page.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
<!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("The things which I have done.png");
background-repeat: no-repeat;
background-size: 330%;
}
.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:55%;
height:70vh;
}
.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: #ffd700;
color: #000000;
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: #000000;
color: #ffd700;
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="The things which I have done.png">
<header>
<div class="logo">Things I've done</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">THE THINGS</div>
<div class="theback">WHICH I HAVE DONE</div>
</div>
</div>
<div class="content">
<Font color="#ffffff">
<p>
The things I have done are in relation to creating HTML coded websites on the college course I was on at Future Skills at Media City UK, Editing short videos for TikTok and created an animation within Adobe animate on the IT Software development college course I was on. These things which I have done I feel are important to mention as it shows the skills which I have achieved over the years when I achieved these tasks which I have completed.
One other thing that I have achieved is editing a video in Premiere Pro at DISC for Manchester Doing Digital together, I am very proud of this video as I was able to learn editing in Premiere Pro very quickly and efficiently as well as follow feedback from others so that the video is at a professional level. One video I worked on was with a client called people Hub, the first 5 minutes of the first video I created are below.
</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HelC1Rx7NYs?si=gTxCsI3yiKNif1hm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vN2Ty6dThYI?si=c_Cf1-iQcfBJ_eFh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<div class="banner">
<img src="Meatoscars.png" alt="">
</div>
<div class="banner">
<img src="Things done.jpg" alt="">
</div>
<div class="banner">
<img src="Achievement.gif" alt="">
</div>
</body>
</div>
<footer>
<p>All rights reserved by Josh Zwart's portfolio.</p>
</footer>
</body>
</html>