-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (102 loc) · 3.76 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
<!DOCTYPE html>
<html>
<head>
<title>3d Web Fest | the Internauts</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
<!--
<style type="text/css">
html {
width: 100%;
height: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#002851+28,001326+100 */
background: #002851; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #002851 28%, #001326 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #002851 28%,#001326 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #002851 28%,#001326 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002851', endColorstr='#001326',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
</style>
!-->
<style type="text/css">
html {
width: 100%;
height: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0c345c+0,002142+100 */
background: #0c345c; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #0c345c 0%, #002142 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #0c345c 0%,#002142 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #0c345c 0%,#002142 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c345c', endColorstr='#002142',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
</style>
<style type="text/css">
body {
text-align: center;
margin: 0;
overflow: hidden;
background-color: #0c345c;
}
.info {
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
position: absolute;
z-index: 100;
display: block;
font-family: sans-serif;
font-size: 1em;
min-height: 125px;
min-width: 220px;
background-color: transparent !important;
}
.info .title-block,
.info .tagline {
padding: 10px;
text-align: center;
text-transform: uppercase;
box-sizing: border-box;
}
.info .title-block {
border: 1px solid #ffffff;
color: #ffffff;
font-size: 1.4em;
letter-spacing: 0.1em;
}
.info .tagline {
font-family: 'Open Sans Condensed', sans-serif;
color: #dd0000;
font-size: 1.8em;
}
.video-block {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
height: 300px;
width: 100%;
max-width: 300px;
z-index: 10;
}
.video-block iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="three.min.js"></script>
<!-- <script src="Projector.js"></script> -->
<!-- <script src="CSS3DRenderer.js"></script> -->
<script src="CSS3DRenderer_working_version.js"></script>
<!-- <script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script> -->
<script src="starfield_0.js"></script>
<!-- <script src="Three.js"></script><script src="starfield_1.js"></script> -->
<!-- <script src="Three.js"></script><script src="starfield_2.js"></script> -->
<!-- <div class="info" id="info">
<div class="title-block">3d Web Fest</div>
<div class="tagline">The Shift is on</div>
</div> -->
<div id="video-block" class="video-block">
<iframe width="560" height="315" src="https://www.youtube.com/embed/R8zoziriO0A?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</body>
</html>