-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (103 loc) · 4.26 KB
/
index.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
<!doctype html>
<html lang=en>
<head>
<title>Aubrune : Art, ingénierie & formations numériques</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<link rel="icon" type="image/png" href="/favicon.png">
<style>
body { margin: 0; background: #000;}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url('/assets/poster.jpg') no-repeat; background-size: cover; -webkit-transition: 1s opacity; transition: 1s opacity; }
div { font-family: 'Oxygen', sans-serif; text-align: justify; font-weight: 100; background: rgba(0,0,0,0.6); color: white; padding: 2rem; width: 33%; margin: 2rem; float: right; font-size: 1.2rem; }
h1 { font-size: 1.8rem; text-transform: uppercase; text-align: left; margin-top: 0; letter-spacing: .3rem; }
a { display: inline-block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5);
padding: .5rem; -webkit-transition: .6s background; transition: .6s background; }
a:hover { background: rgba(0,0,0,0.9); }
.stopfade { opacity: .5; }
#polina button, #mail {
text-align: center;
float: right;
width: 35px;
padding: .4rem;
border: none;
margin: 1rem auto;
font-size: 1.3rem;
background: rgba(255,255,255,0.23);
color: #fff;
border-radius: 3px;
cursor: pointer;
-webkit-transition: .3s background;
transition: .3s background;
}
#polina button:hover {
background: rgba(0,0,0,0.5);
}
@media all and (max-device-width: 800px) {
body { background: url("/assets/poster.jpg") #000 no-repeat center center fixed; background-size: cover; text-align: center; }
#bgvid, #polina button, #mail { display: none;}
#polina {width: 80%; padding:5%; font-size:3rem; margin: 5%; }
h1, a {font-size: 3rem; text-align: center;}
img { height: 5rem; }
}
</style>
<meta charset=utf-8>
</head>
<body>
<video playsinline autoplay muted loop poster="/assets/poster.jpg" id="bgvid">
<source src="/assets/aubrune.mp4" type="video/mp4">
</video>
<div id="polina">
<button>▮▮</button>
<h1>Art, ingénierie & formations numériques</h1>
<p>Aubrune imagine et conçoit des systèmes numériques sur mesure à des fins artistiques ou éducatives. Grâce à la robotique et aux arts visuels, nous faisons de la technologie un messager fascinant et un vecteur de savoir-faire. Nos projets :</p>
<p><a href="http://www.arbalet-project.org"><img src="/assets/logo_AP_white_32.png" id="arbalet" title="Arbalet Project, pixel art éducatif"/></a>
<a href="http://www.cap-sciences.net/au-programme/exposition/robots"><img src="/assets/logo_CS_Robots_32.png" id="exporobots" title="Cap Sciences exposition Robots"/></a>
<a href="https://twitter.com/Instant_Sphere/status/958348433345187840"><img src="/assets/logo_IS_white_32.png" id="instantsphere" title="Instant Sphere, borne photo à 360°"/></a>
<a id="mail" href="http://arbalet-project.org/#contact" title="Contact">📩</a></p>
</div>
<script>
var video = document.getElementById("bgvid"),
pauseButton = document.querySelector("#polina button");
if (window.matchMedia('(prefers-reduced-motion)').matches) {
vid.removeAttribute("autoplay");
vid.pause();
pauseButton.innerHTML = "▶";
}
function vidFade() {
video.classList.add("stopfade");
}
video.addEventListener('ended', function()
{
// only functional if "loop" is removed
video.pause();
vidFade();
}, false);
pauseButton.addEventListener("click", function() {
video.classList.toggle("stopfade");
if (video.paused) {
video.play();
pauseButton.innerHTML = "▮▮";
} else {
video.pause();
pauseButton.innerHTML = "▶";
}
}, false);
video.addEventListener('touchstart', function(e) {
e.preventDefault();
video.play();
})
</script>
</body>
</html>