Second Commit

Added Index, stylesheet and two images
2024-10-05 22:33:57 +00:00 · 2024-10-05 22:33:57 +00:00 · 3f41e9ead9
commit 3f41e9ead9
parent 990ab64a4d
4 changed files with 103 additions and 0 deletions
--- a/equipment.jpg
+++ b/equipment.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <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</title>
+    </head>
+  <body>
+    <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="https://klankschool.org/calendar/?key=46e630bbe7">calendar</a></p>
+    </div>
+    </body>
+</html>
--- a/noise.svg
+++ b/noise.svg
@ -0,0 +1,21 @@
+    <svg
+  xmlns='http://www.w3.org/2000/svg'
+  xmlns:xlink='http://www.w3.org/1999/xlink'
+  width='1000px' height='1000px'>
+
+    <filter id='n' x='0' y='0'>
+            <feTurbulence
+              type='fractalNoise'
+              baseFrequency='0.075'
+              stitchTiles='stitch'/>
+              <feComposite operator="in" in="myTurbulence" in2="SourceAlpha" result="myComposite"/>
+      <feColorMatrix in="myComposite" type="matrix"
+        values="1   1   1   0   0
+                1   1   1   0   0
+                1   1   1   0   1
+                0   0   0   1   0" />
+    </filter>
+
+    <rect width='1000px' height='1000px' fill='#000'/>
+    <rect width='1000px' height='1000px' filter="url(#n)" opacity='1.0'/>
+</svg>
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,64 @@
+* {
+    box-sizing: border-box;
+}
+
+html {   
+    height: 100vh;
+    position: relative;
+}
+
+
+#app {
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    width: 75vw;
+    
+}
+
+#main {
+    text-align: center;
+    border-color: grey;
+    background-color: white;
+    border-width: 3px;
+    border-style: solid;
+}
+
+a {
+    font-size: 1.8rem;
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: black;
+}
+
+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;	
+    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;    
+}
+
+
+h1 {
+    font-size: 3rem;
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 600;
+}
+
+.home-img{width: 100%; height: 20vh; object-fit: cover;}