colophon+interfake

index.html

@@ -20,7 +20,7 @@
         <!-- BASE -->
         <!-- <div class="ui-widget-content draggable resizable closable" id=" "><h1>var xpub</h1><p></p></div> -->
 
-        <h1>windows.open(Welcome)</h1>
+        <!-- <h1>windows.open(Welcome)</h1> -->
         <div id="icons"></div>
 
         <div id="dragZone" class="dragzone">
@@ -44,6 +44,22 @@
         
         </div>
 
+        <div id="bar">
+            <button onclick="drop()" class="bottoneCose">XPUB</button>
+        </div>
+
+        <div id="colophon">
+            <h1>windows.open(Welcome)</h1>
+                <p>Architecture: Tancredi and Poni</p>
+                <p>Urbanistic: Clara, Louisa, Simon</p>
+        </div>
+
         <script src="./scripts/App.js"></script>
+        <script>    // drop stuff
+
+            function drop(){
+                $("#colophon").slideToggle()
+                $(".bottoneCose").toggleClass("clicked")
+            }</script>
     </body>
 </html>

scripts/App.js

@@ -34,3 +34,4 @@ $(document).ready(function(){
     const dragResize = new DragResizeClose(zIndex);
 });
 
+

styles/style.css

@@ -3,7 +3,9 @@
   src: url(../fonts/AC1-SemiLightDots.ttf);
 }
 
+
 body {
+  max-width: 100vw;
   background-color: blue;
   color: white;
   font-family: Arial, Helvetica, sans-serif;
@@ -27,6 +29,7 @@ button {
 }
 
 .draggable {
+  display: none;
   position: absolute;
   border: 2px white solid;
   background: black;
@@ -88,3 +91,46 @@ button {
 .icon:hover {
   font-size: 35px;
 }
+
+#bar{
+  z-index: 10;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 5%;
+  border: solid 2px white;
+  background-color: rgba(19, 19, 156, .9);
+}
+
+#colophon{
+  margin:  auto;
+  width: 50%;
+  /* position: fixed; */
+  z-index: 5;
+  background-color: white;
+  color: black;
+  border: solid 2px blue;
+  display: none;
+  padding: 1% 5%;
+}
+
+#colophon h1{
+  color: blue;
+}
+
+.bottoneCose{
+  width: 10%;
+  height: 100%;
+}
+
+
+.bottoneCose:active{
+  background-color: rgb(113, 113, 226);
+}
+
+
+.clicked{
+  background-color: white;
+  color: blue;
+}