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;
 }