-
Notifications
You must be signed in to change notification settings - Fork 1
/
wallpaper.html
executable file
·150 lines (129 loc) · 5.4 KB
/
wallpaper.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>La Fine Dell'Uomo</title>
<meta property="og:url" content="https://archivio-uau.online/la-fine.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="La Fine Dell'Uomo" />
<meta property="og:description" content="Un ciclo di sei appuntamenti all’insegna della fantascienza radicale" />
<meta property="og:image" content="images/meta_fb.jpg" />
<meta name="description" content="La Fine Dell'Uomo">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="css/style3.css">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
</head>
<body class="fine">
<!-- Header Accordion -->
<div class="container-fluid">
<div class="row navArchivio">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row introHome">
<div class="col-lg-10 offset-lg-1">
<!--Better on Chrome
<svg height="3"
xmlns="https://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feTurbulence type="turbulence"
numOctaves="5" result="turbulence">
<animate attributeType="XML" attributeName="baseFrequency" from=".00001" to=".007"
dur="40s" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic"
scale="35" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
<div style="filter: url(#displacementFilter)" class="text-center mx-auto d-none d-md-block"><h1>La Fine Dell'Uomo</h1>
<img class="img-responsive d-none d-lg-block img-fluid" src="images/cover-fine.png">
<h5>Gennaio ⟶ Giugno 2019</h5>
</div>
<img src="images/cover_mobile.png" class="img-responsive mx-auto d-block d-md-none img-fluid" alt="Un’Ambigua Utopia"> -->
<div id="box" class="mx-auto d-none d-md-block">
<svg class="mysvg" width="100%" height="650" viewBox="">
<defs>
<filter id="turb">
<feTurbulence id="turbwave" type="fractalNoise" baseFrequency="0.001" numOctaves="1"
result="turbulence_3" data-filterId="5" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence_3" scale="50" />
</filter>
</defs>
<image class="" id="img" x="0" y="0" width="100%" height="100%" xlink:href="images/cover_black.jpg" filter="url(#turb)" />
</svg>
</div>
</div>
</div>
<div class="row introFine">
<div class="col-lg-5 offset-lg-1">
<img src="images/cover_mobile.jpg" class="img-responsive mx-auto d-block d-md-none img-fluid" alt="Un’Ambigua Utopia">
<p class="lead">Un ciclo di sei appuntamenti all’insegna della <b>fantascienza radicale</b>.<br>Ogni seconda domenica del mese.</p>
</div>
<div class="col-lg-2 offset-lg-1">
<p><b>18:30</b> — DIALOGO <br>
<b>20:00</b> — CENA <br>
<b>21:00</b> — CINEMA</p>
</div>
<div class="col-lg-2">
<b>archivio-uau.online</b>
</div>
</div>
</div>
</div>
<!-- Header Accordion-->
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Don't need jQuery for Tabletop, but using it for this example -->
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tabletop.js"></script>
<script type="text/javascript">
var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1uhaUr95IdeuRwz9nN1JPMoH0dgXHlmR0RUJ2XTWjimI/edit?usp=sharing';
$(document).ready( function() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
parseNumbers: true } );
});
function showInfo(data, tabletop) {
var source = $("#cat-template").html();
var template = Handlebars.compile(source);
$.each( tabletop.sheets("Sheet1").all(), function(i, cat) {
var html = template(cat);
$("#content").append(html);
});
}
</script>
<script type="text/javascript">
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js"></script>
<script type="text/javascript">
TweenMax.to("#turbwave", 50, {
attr:{"baseFrequency":0.01},
repeat:-1,
yoyo:true
});
</script>
</body>
</html>