Skip to content

Commit 527d8d0

Browse files
author
Giovanni Ciandrini
committed
Site WIP
1 parent 8202701 commit 527d8d0

File tree

12 files changed

+301
-0
lines changed

12 files changed

+301
-0
lines changed

‎hacktoberfest/desktop.png‎

1.67 MB
Loading

‎hacktoberfest/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>HacktoberFest</title>
9+
<link href="https://fonts.googleapis.com/css?family=Space+Mono&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="./stylesheets/index.css" charset="utf-8">
11+
<script src="index.js"></script>
12+
</head>
13+
14+
<body>
15+
<div class="container">
16+
<div class="menu">
17+
<div class="content">
18+
Hi, my this is hacktoberfest page.
19+
<p>
20+
HacktoberFest--> WIP
21+
</p>
22+
<p>
23+
On this website you can find more about my non-profit works.
24+
</p>
25+
</div>
26+
</div>
27+
</div>
28+
<video type="video/mp4" muted playsinline autoplay disablePictureInPicture></video>
29+
</body>
30+
31+
</html>

‎hacktoberfest/index.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
window.onload = function() {
2+
loadVideos();
3+
registerTouch();
4+
};
5+
6+
var loadVideos = function() {
7+
var dir = './videos/';
8+
var playlist = [
9+
dir + '0.mp4',
10+
dir + '1.mp4',
11+
dir + '2.mp4',
12+
dir + '3.mp4',
13+
dir + '4.mp4',
14+
dir + '5.mp4',
15+
dir + '6.mp4',
16+
];
17+
18+
var videoElement = document.querySelector('video');
19+
var index = 0;
20+
videoElement.src = playlist[index];
21+
22+
videoElement.addEventListener('loadedmetadata', function () {
23+
videoElement.play();
24+
});
25+
26+
videoElement.addEventListener('ended', function() {
27+
index++;
28+
var i = index === playlist.length ? 0 : index;
29+
30+
if (i === 0) index = i;
31+
32+
videoElement.src = playlist[i];
33+
videoElement.play();
34+
});
35+
};
36+
37+
var registerTouch = function() {
38+
var button = document.querySelector('button[data-action="show"]');
39+
if (!button) {
40+
return;
41+
}
42+
43+
if (window.innerWidth < 850) {
44+
document.querySelector('video').controls = false;
45+
}
46+
47+
var menu = document.querySelector('.menu');
48+
var iphone = document.querySelector('.px');
49+
50+
button.addEventListener('click', function() {
51+
if (window.visibleVideo) {
52+
menu.style.opacity = 1;
53+
iphone.style.opacity = 0.15;
54+
window.visibleVideo = false;
55+
return;
56+
}
57+
58+
window.visibleVideo = true;
59+
iphone.style.opacity = 1;
60+
menu.style.opacity = 0;
61+
});
62+
};

‎hacktoberfest/stylesheets/index.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
body {
2+
background-color: rgb(20, 20, 20);
3+
display: flex;
4+
flex-direction: column;
5+
margin: 0 10%;
6+
color: #eee;
7+
}
8+
9+
video {
10+
max-width: 1024px;
11+
width: 50%;
12+
margin: 0 auto;
13+
top: 0;
14+
left: 0;
15+
height: 100vh;
16+
object-fit: cover;
17+
opacity: 0.4;
18+
}
19+
20+
button[data-action="show"] {
21+
display: none;
22+
}
23+
24+
.container {
25+
width: 100%;
26+
font-family: 'Space Mono', monospace;
27+
margin-right: 0;
28+
perspective: 1000px;
29+
font-size: 0.85em;
30+
z-index: 9999;
31+
}
32+
33+
.menu {
34+
max-width: 30em;
35+
padding: 0.5em;
36+
background-color: rgb(20, 20, 20);
37+
left: 60%;
38+
color: #eee;
39+
position: absolute;
40+
list-style: none;
41+
z-index: 1;
42+
}
43+
44+
.menu a {
45+
color: #ee6;
46+
}
47+
48+
a {
49+
color: #ee6;
50+
display: block;
51+
text-decoration: none;
52+
color: inherit;
53+
}
54+
55+
@media all and (max-width: 850px) {
56+
button[data-action="show"] {
57+
background-color: #ee6;
58+
padding: 0.25em;
59+
line-height: 0.25em;
60+
outline: none;
61+
border: none;
62+
display: block;
63+
width: 3em;
64+
height: 3em;
65+
border-radius: 100%;
66+
position: absolute;
67+
right: 12px;
68+
top: 12px;
69+
}
70+
71+
72+
body {
73+
margin: 0;
74+
}
75+
76+
.menu {
77+
left: 0;
78+
margin-left: 0;
79+
max-width: none;
80+
}
81+
82+
.menu, .container, video{
83+
position: relative;
84+
}
85+
86+
.container {
87+
margin: 0;
88+
width: 100%;
89+
}
90+
91+
video {
92+
width: 100%;
93+
opacity: 1;
94+
}
95+
96+
.px {
97+
max-width: none;
98+
width: 100%;
99+
opacity: 0.15;
100+
}
101+
}
102+
103+
.menu-element {
104+
line-height: 2em;
105+
cursor: pointer;
106+
border-bottom: 1px solid #eee;
107+
}
108+
109+
.menu-element:last-child {
110+
border: none;
111+
}

‎hacktoberfest/stylesheets/pages.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
2+
body {
3+
background-color: rgb(20, 20, 20);
4+
margin: 0 15%;
5+
color: #eee;
6+
}
7+
8+
h1 {
9+
font-size: 1.25em;
10+
}
11+
12+
.pages-container {
13+
font-family: 'Space Mono', monospace;
14+
margin: 5em;
15+
max-width: 40%;
16+
margin: 0 2em;
17+
max-width: none;
18+
}
19+
20+
.headline {
21+
color: #ee6;
22+
}
23+
24+
.menu .content a {
25+
text-decoration: underline;
26+
}
27+
28+
.home {
29+
fill: #ee6;
30+
position: absolute;
31+
top: 1em;
32+
}
33+
34+
.home svg {
35+
width: 2em;
36+
height: 2em;
37+
}
38+
39+
.inline {
40+
margin-block-start: 0.5em;
41+
margin-block-end: 0.5em;
42+
}
43+
44+
.menu {
45+
margin-bottom: 1em;
46+
list-style: none;
47+
width: 100%;
48+
margin-top: 5em;
49+
}
50+
51+
a {
52+
display: block;
53+
text-decoration: underline;
54+
color: inherit;
55+
}
56+
57+
.inline {
58+
display: inline;
59+
}
60+
61+
.home {
62+
color: #ee6;
63+
text-decoration: none;
64+
}
65+
66+
.menu a {
67+
color: #ee6;
68+
text-decoration: none;
69+
}
70+
71+
@media all and (max-width: 850px) {
72+
body {
73+
font-size: 0.85em;
74+
margin: 0;
75+
}
76+
77+
.menu {
78+
left: 0;
79+
margin-left: 0;
80+
}
81+
}
82+
83+
.content {
84+
margin-bottom: 2em;
85+
}
86+
87+
.menu-element {
88+
line-height: 2em;
89+
cursor: pointer;
90+
border-bottom: 1px solid #eee;
91+
}
92+
93+
.menu-element:last-child {
94+
border: none;
95+
}
96+
97+

‎hacktoberfest/videos/0.mp4‎

8.19 MB
Binary file not shown.

‎hacktoberfest/videos/1.mp4‎

1020 KB
Binary file not shown.

‎hacktoberfest/videos/2.mp4‎

3.4 MB
Binary file not shown.

‎hacktoberfest/videos/3.mp4‎

3.36 MB
Binary file not shown.

‎hacktoberfest/videos/4.mp4‎

28.7 MB
Binary file not shown.

0 commit comments

Comments
 (0)