init

3 years ago · c82c64e899
parent e4088396eb
commit c82c64e899
5 changed files with 125 additions and 0 deletions
--- a/ApfelGrotezk-Regular.woff
+++ b/ApfelGrotezk-Regular.woff
--- a/ApfelGrotezk-Regular.woff2
+++ b/ApfelGrotezk-Regular.woff2
--- a/index.html
+++ b/index.html
@ -0,0 +1,53 @@
+<!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.0">
+    <link href="style.css" rel="stylesheet">
+    <script src='../faccine.js' defer></script>
+    <link href="style.css" rel="stylesheet">
+    <title>k-pub</title>
+</head>
+<body>
+    <pre class="smirk"style='font-size:0.7em'><b><a  id='smirk' href="../index.html" ></a></b></pre>
+    <div class="main">
+        <div class="lyrics">
+            <h1>Battiato feat. Simone Weil Karaoke</h1>    
+            <p>
+               " To ascertain exactly what the miser whose treasure was stolen
+        lost: thus we should learn much.
+        Lauzun and the office of Captain of Musketeers. He preferred
+        to be a prisoner and Captain of Musketeers rather than to go free
+        and not be Captain.
+        These are garments. ‘They were ashamed of their nakedness.’"
+            </p>
+            <p> 
+                "To lose someone: we suffer because the departed, the absent, has
+        become something imaginary and unreal. But our desire for him
+        is not imaginary. We have to go down into ourselves to the
+        abode of the desire which is not imaginary. Hunger: we imagine
+        kinds of food, but the hunger itself is real: we have to fasten on
+        to the hunger. The presence of the dead person is imaginary, but
+        his absence is very real: henceforward it is his way of appearing."
+            </p>
+            <p> 
+                "Man only escapes from the laws of this world in lightning
+flashes. Instants when everything stands still, instants of contemplation, of pure intuition, of mental void, of acceptance of the
+moral void. It is through such instants that he is capable of the
+supernatural.
+Whoever endures a moment of the void either receives the
+supernatural bread or falls. It is a terrible risk, but one that must
+be run—even during the instant when hope fails. But we must
+not throw ourselves into it."
+            </p>
+        </div>
+        <div class="documentation">
+            <h3 class="info">an enchanting reading-choir featuring Simone Weil's diaries and Franco Battiato's songs.</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper viverra nam libero justo laoreet sit amet cursus. Ut faucibus pulvinar elementum integer. Feugiat scelerisque varius morbi enim. Purus semper eget duis at tellus at. Arcu non odio euismod lacinia. Malesuada fames ac turpis egestas integer eget aliquet. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Leo urna molestie at elementum eu facilisis sed odio morbi. Tortor dignissim convallis aenean et tortor at risus viverra. Porttitor lacus luctus accumsan tortor posuere ac ut. Est pellentesque elit ullamcorper dignissim cras. Elit scelerisque mauris pellentesque pulvinar pellentesque. Ullamcorper sit amet risus nullam eget felis eget. Nec nam aliquam sem et. Sed velit dignissim sodales ut. Leo vel fringilla est ullamcorper eget nulla facilisi etiam. Nisl pretium fusce id velit ut. Proin sed libero enim sed faucibus turpis in.</p>
+            <img src="assets/karaokedocu.jpg" alt="try1">
+            <p> tryouts with vvvv and Laibach feat. MissKeta </p>
+        </div>
+    </div>
+</body>
+</html>
--- a/karaokedocu.jpg
+++ b/karaokedocu.jpg
--- a/style.css
+++ b/style.css
@ -0,0 +1,72 @@
+@import url('./font/font.css');
+
+body{
+    background-color: #FEFFF8; 
+    font-family: Grotezk; 
+    color:#6B64C3 ;
+    text-decoration:none;
+    margin:0;
+    /*green is #69781C 
+      purple is #6B64C3*/
+}
+.smirk{
+    position:absolute;
+    top: 2em;
+    left:2em;
+    margin:0;
+    z-index:1;
+}
+a{
+    text-decoration:none; 
+    color: #69781C
+}
+a:hover{
+    color: yellow;
+}
+.main{
+    display:flex;
+    flex-direction:row;
+    justify-content:space-between;
+    height:100vh;
+    margin:0;
+}
+.lyrics{
+    margin:0;
+    flex-basis:60%;
+    overflow-y:scroll;
+    overflow-x:hidden;
+    padding: 1em;    
+}
+.documentation{
+    flex-basis:40%;
+    overflow-y:scroll;
+    padding: 1em;
+    margin:0;
+    overflow-y:scroll;
+/*     color:#69781C; */
+}
+h1{
+    margin: 10vh 0;
+    word-wrap: break-word;  
+    font-size:6em;
+    font-family: Bluu;
+    font-weight:bold;
+/*     font-style:italic; */
+    width:50vw;
+}
+h3{
+    font-family: Bluu;
+    font-weight: regular;
+    font-size: 2em;
+}
+p{
+    margin: 2em auto;
+    width: 90%;
+    font-size: 1.2em
+}
+.documentation img{
+    width:90%;
+    margin: 1em auto;
+    object-fit: contain;
+}
+