radioimplicancies - notes for si25
parent
c8f1fdbaff
commit
f6b3f603f5
@ -0,0 +1,17 @@
|
||||
md=$(wildcard *.md)
|
||||
mp_html=$(md:%.md=%.html)
|
||||
|
||||
all: $(mp_html)
|
||||
|
||||
%.html: %.md
|
||||
pandoc --from markdown --to html --standalone $< -o $@
|
||||
|
||||
si22_syllabus.md: si22_syllabus.mediawiki
|
||||
pandoc --from mediawiki --to markdown $< -o $@
|
||||
|
||||
SI25-NADD-Proposal.docx: SI25-NADD-Proposal.md
|
||||
pandoc $< -o $@
|
||||
|
||||
%.svg: %.dot
|
||||
dot $< -Tsvg -O
|
||||
|
||||
@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0057)https://hub.xpub.nl/sandbot/~floorvanmeeuwen/15/TheCloud/ -->
|
||||
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.7">
|
||||
<link rel="stylesheet" type="text/css" href="./THE CLOUD_files/cloud.css">
|
||||
<title>THE CLOUD</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="all">
|
||||
|
||||
<img class="img1" src="./THE CLOUD_files/img1.png">
|
||||
<img class="img2" src="./THE CLOUD_files/img2.png">
|
||||
<img class="img3" src="./THE CLOUD_files/img3.png">
|
||||
|
||||
<div id="lefty"></div>
|
||||
|
||||
|
||||
<div id="middle">
|
||||
|
||||
|
||||
<pre><h1>T H E C L O U D</h1></pre>
|
||||
<p>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
</p>
|
||||
|
||||
<audio controls autoplay src="THE CLOUD_files/cloud.mp3"></audio>
|
||||
|
||||
<p>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
</p>
|
||||
|
||||
<p>You want to know what time it is. You take a glance at your smartphone and see you have gotten a message.</p>
|
||||
|
||||
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||
|
||||
<p>You check Facebook but it seems not working. Is it down for everyone or just me?</p>
|
||||
|
||||
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||
|
||||
<p>You hear the sound of an incoming e-mail. Your are drawn to your computer and your mailing program. It is an notification of We Transfer of this file that will get expired.</p>
|
||||
|
||||
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||
|
||||
<p>You still don't know what time it is. You remember this quick fact on Bored Panda that "what is the time" was once one of the most googled questions</p>
|
||||
|
||||
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||
|
||||
<p>On your banking app you notice a bank statement of 70 euro's from an unknown company.</p>
|
||||
|
||||
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||
|
||||
<p>When you type this name in your favourite search engine you realise it's the payment of your webhosting service. It got more expensive this year, again.</p>
|
||||
|
||||
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||
|
||||
<p>Youtube stopped playing. When you look at the screen it asks you if you are still listening.</p>
|
||||
|
||||
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@ -0,0 +1,123 @@
|
||||
@font-face {
|
||||
font-family: Chap;
|
||||
src: url(Chapaza.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: Aer;
|
||||
src: url(Aerolite.otf);
|
||||
}
|
||||
p{
|
||||
font-family: Chap;
|
||||
color:#8023FF;
|
||||
text-align:center;
|
||||
}
|
||||
/*/.shift{
|
||||
animation: mymove 25s infinite;
|
||||
}
|
||||
@keyframes mymove {
|
||||
0% { color:#0E02FF; }
|
||||
30% { color:RosyBrown; }
|
||||
50% { color:thistle; }
|
||||
70% { color:RosyBrown; }
|
||||
100%{ color:#0E02FF; }
|
||||
}/*/
|
||||
h1{
|
||||
font-family:Aer;
|
||||
font-size:50px;
|
||||
color:silver;
|
||||
text-align:center;
|
||||
}
|
||||
audio{
|
||||
text-align:center;
|
||||
width:100%;
|
||||
}
|
||||
body{
|
||||
background:WhiteSmoke;
|
||||
}
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
}
|
||||
|
||||
#all{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
#lefty{
|
||||
width:15%;
|
||||
height:100%;
|
||||
float:left;
|
||||
text-align:justify;
|
||||
position:relative;
|
||||
}
|
||||
#middle{
|
||||
width:100%;
|
||||
height:100%;
|
||||
float:left;
|
||||
padding-left:30%;
|
||||
padding-right:30%;
|
||||
text-align:justify;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@keyframes img1 {
|
||||
0% { left:750px; top:500px;}
|
||||
25% { left:400px; top:430px;}
|
||||
50% { left:400px; top:530px;}
|
||||
75% { left:300px; top:410px;}
|
||||
100% { left:750px; top:500px;}
|
||||
}
|
||||
.img1{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width:400px;
|
||||
animation-name: img1;
|
||||
animation-duration: 80s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
|
||||
@keyframes img2 {
|
||||
0% { left:350px; top:300px;}
|
||||
25% { left:400px; top:330px;}
|
||||
50% { left:400px; top:130px;}
|
||||
75% { left:300px; top:120px;}
|
||||
100% { left:350px; top:300px;}
|
||||
}
|
||||
|
||||
.img2{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width:400px;
|
||||
animation-name: img2;
|
||||
animation-duration: 100s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
|
||||
@keyframes img3 {
|
||||
0% { left:500px; top:300px;}
|
||||
25% { left:470px; top:340px;}
|
||||
50% { left:530px; top:380px;}
|
||||
75% { left:436px; top:340px;}
|
||||
100% { left:500px; top:300px;}
|
||||
}
|
||||
|
||||
.img3{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width:400px;
|
||||
animation-name: img3;
|
||||
animation-duration: 90s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
Loading…
Reference in New Issue