some updates
This commit is contained in:
joak
parent
88c0d9d010
commit
bdb11cf2df
45
index.html
45
index.html
@ -5,15 +5,48 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<title>Klankschool test</title>
|
||||
<title>Klankschool</title>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="background" style="width:100%; height: 100%;"></canvas>
|
||||
<div id="menu">
|
||||
<p class="border"><a href="https://funk.klank.school">funkwhale</a></p>
|
||||
<p class="border"><a href="http://calendar.klank.school">calendar</a></p>
|
||||
</div>
|
||||
<div id="app">
|
||||
<h1 id="main">Klankschool</h1>
|
||||
<p><img class="home-img" src="equipment.jpg"></p>
|
||||
<p> Klankschool is an emerging community operating a space in the south of Rotterdam. Each member is a teacher, student, musician, janitor and more. The purpose of the space is to share sounds, work on projects, hang out, exhibit works, learn, teach, listen. See the calendar for upcoming and past events. </p>
|
||||
<p><a href="http://calendar.klank.school">calendar</a></p>
|
||||
<p><a href="https://funk.klank.school">funkwhale</a></p>
|
||||
<h1 id="main" class="border"><marquee behavior="alternate">Klankschool</marquee></h1>
|
||||
<img class="home-img border" src="klankschool2.gif">
|
||||
<p class="border">Klankschool is a community operating a space (and a server) in the south of Rotterdam. Its members share a common interest in performances, sound art, improvisation, noise, ... Each member is a teacher, student, musician, janitor and more. The motivation to have a community-run space is to share sounds, work on projects, organise events, hang out, exhibit works, learn, teach and listen. See the calendar for upcoming and past activities.</p>
|
||||
<p class="border"> Are you interested in joining? <br>
|
||||
Do you search a space for performance, project, ...? <br>
|
||||
Do you like activities outside of the norms of Spotify streams, elevator sounds, Muzak™, piped music, Ikea furnitures, Netflix series, Airplane flights, eating meat, ... ? <br>
|
||||
Write us an e-mail: klankschool@extratonal.org </p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
// nothing special. just background. joak 2024-10-13
|
||||
const canvas = document.querySelector("canvas");
|
||||
const height = window.innerHeight;
|
||||
const width = window.innerWidth;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
console.log(height, width);
|
||||
size = 20;
|
||||
function rfiller (){
|
||||
console.log("now");
|
||||
for(var w = 0; w < width; w=w+size){
|
||||
for(var h = 0; h < height; h=h+size){
|
||||
var r = Math.floor(Math.random()*255).toString(16);
|
||||
var g= Math.floor(Math.random()*255).toString(16);
|
||||
var b = Math.floor(Math.random()*255).toString(16);
|
||||
ctx.fillStyle = "#"+r+g+b;
|
||||
ctx.fillRect(w, h, w+size, h+size);
|
||||
}
|
||||
}
|
||||
}
|
||||
rfiller();
|
||||
setInterval(rfiller, 2000);
|
||||
</script>
|
||||
</html>
|
||||
|
||||
BIN
klankschool1.jpg
Normal file
BIN
klankschool1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
klankschool2.gif
Normal file
BIN
klankschool2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 421 KiB |
BIN
klankschool2.jpg
Normal file
BIN
klankschool2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
69
styles.css
69
styles.css
@ -7,22 +7,32 @@ html {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body{
|
||||
background: url(#background);
|
||||
background-size: 100% 100%;
|
||||
-o-background-size: 100% 100%;
|
||||
-webkit-background-size: 100% 100%;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 75vw;
|
||||
|
||||
margin: 0 auto;
|
||||
max-width: 620px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
#main {
|
||||
text-align: center;
|
||||
border-color: grey;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.border{
|
||||
border-color: black;
|
||||
background-color: white;
|
||||
border-width: 3px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
box-shadow: 5px 5px 5px black;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -34,23 +44,11 @@ a {
|
||||
a:hover {
|
||||
color: grey;
|
||||
}
|
||||
body{
|
||||
height: 100%;
|
||||
background-image: url(noise.svg);
|
||||
background-size: 100% 100%;
|
||||
-o-background-size: 100% 100%;
|
||||
-webkit-background-size: 100% 100%;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: 2rem;
|
||||
font-size: 1.5rem;
|
||||
padding: 0.5vh 1vw;
|
||||
border-color: grey;
|
||||
background-color: white;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
@ -59,6 +57,31 @@ h1 {
|
||||
font-size: 3rem;
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.home-img{width: 100%; height: 20vh; object-fit: cover;}
|
||||
.home-img{
|
||||
width: 620px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#menu{
|
||||
position: fixed;
|
||||
display: inline-flex;
|
||||
transform: rotate(-90deg) translate(-100%, 50%);
|
||||
transform-origin: 0 50%;
|
||||
left: 10px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#menu > p{
|
||||
margin: 0px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#background{
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user