Add files via upload

computerdate · Oct 4, 2023 · 4dc32bc · 4dc32bc
1 parent e83b9e8
commit 4dc32bc
Show file tree

Hide file tree

Showing 9 changed files with 588 additions and 0 deletions.
diff --git a/parcela/JohannaAndRamona/assets/ID JOHANNA Y RAMONA.png b/parcela/JohannaAndRamona/assets/ID JOHANNA Y RAMONA.png
diff --git a/parcela/JohannaAndRamona/assets/banner Johanna & Ramona.png b/parcela/JohannaAndRamona/assets/banner Johanna & Ramona.png
diff --git a/parcela/JohannaAndRamona/assets/flores2.png b/parcela/JohannaAndRamona/assets/flores2.png
diff --git a/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.otf b/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.otf
diff --git a/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.woff b/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.woff
diff --git a/parcela/JohannaAndRamona/index.html b/parcela/JohannaAndRamona/index.html
@@ -0,0 +1,193 @@
+
+<!DOCTYPE html>
+<head>
+<title> 🟄 virreina 🟄 </title>
+<meta name="description" content="artes de la campo al compu">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+<meta name="og:title" property="og:title" content="virreina" />
+<meta name="og:description" property="og:description" content="artes de la campo al compu" />
+<meta property="og:image" content="../../assets/[VRN]Logo/[VRN]Logos-27.png" />
+<link rel="shortcut icon" href="../../assets/[VRN]Logo/[VRN]Logos-27.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Gilda+Display&family=Manrope:wght@500;600&family=Noto+Sans+Mono:wght@400;800&family=Playfair+Display:wght@500;900&display=swap" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="style.css">
+<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src=
+"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
+    </script>
+
+  <!--  movil  -->
+  <!--
+<script>
+  if (screen.width <= 500) {
+  document.location = 'movil/index.html';
+  }
+</script>
+  -->
+</head>
+
+
+
+<header>
+
+  <!--  menu  -->
+  <div class="dropdown">
+    <button class="dropbtn">
+        <a href="https://virreina.space/" target="">
+            <img src="../../assets/[VRN]Logo/[VRN]Logos-17.png" alt="VRN" height="" width="60px" ;="">
+        </a>
+    </button>
+    <div class="dropdown-content">
+      <a href="../../residencia/index.html">RESIDENCIES</a>
+      <a href="../../parcela/index.html">PARCELA</a>
+      <!--
+      <a href="../../soloshow/index.html">SOLOSHOW</a>
+      <a href="../../screenings/index.html">SCREENINGS</a>
+      -->
+      <a href="../../about/index.html">ABOUT</a>
+      </div>
+    </div>  
+
+
+      <!--  reloj  -->
+      <div class="clock">
+    <script>
+        function clock() {
+      var time = new Date(),
+          hours = time.getHours(),
+          minutes = time.getMinutes(),
+          seconds = time.getSeconds();
+      document.querySelectorAll('.clock')[0].innerHTML = harold(hours) + ":" + harold(minutes) + ":" + harold(seconds);
+        function harold(standIn) {
+          if (standIn < 10) {
+            standIn = '0' + standIn
+          }
+          return standIn;
+        }
+      }
+      setInterval(clock, 1000);
+    </script>
+      </div>
+
+
+      <!--  seccion  -->
+<div class="seccion">
+  <a href="../index.html" target="">
+    <p>PARCELA</p>
+  </a>
+</div>
+</header>
+
+
+
+<body>
+
+<!--  banner ID  -->
+
+  <div class="banner">
+    <a class="tituloprojecto" href="#" target="_blank">
+      <img class="icon" src="./assets/banner Johanna & Ramona.png"
+        alt="banner" height="auto" width="140px" ;="">
+    </a>
+    <img class="ID hover" src="./assets/ID JOHANNA Y RAMONA.png"
+        alt="ID" height="360px" width="" ;=""> 
+  </div>
+
+
+<!--  project  -->
+  <div id="I1" class="ui-widget-content">
+    <img src="./assets/flores2.png"
+    alt="" height="" width="90%"  title="";="">
+    </div>
+
+
+<div class="video1">
+  <iframe
+    src="https://player.vimeo.com/video/867749693?h=38fb8c52e7&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
+    width="844"
+    height="470"
+    frameborder="0"
+    allow="autoplay; fullscreen;"
+    allowfullscreen
+    allign="center; "
+  ></iframe>
+  <script src="https://player.vimeo.com/api/player.js"></script>
+</div>
+
+<div class="video2">
+  <iframe
+    src="https://player.vimeo.com/video/867749629?h=8ccc2589f5&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
+    width="844"
+    height="470"
+    frameborder="0"
+    allow="autoplay; fullscreen;"
+    allowfullscreen
+    allign="center; "
+  ></iframe>
+  <script src="https://player.vimeo.com/api/player.js"></script>
+</div>
+
+<div class="video3">
+  <iframe
+    src="https://player.vimeo.com/video/867749839?h=51864148ff&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
+    width="844"
+    height="470"
+    frameborder="0"
+    allow="autoplay; fullscreen;"
+    allowfullscreen
+    allign="center; "
+  ></iframe>
+  <script src="https://player.vimeo.com/api/player.js"></script>
+</div>
+
+
+<div class="creditos">
+
+
+  <div>
+    <div class="marquee">
+      <div>
+        <marquee behavior="scroll" direction="left" scrollamount="6">
+          ♡ In contrast to the existence in a city a garden forms a space for a nature experience/observation in maybe even the smallest undetected urban spots, which might be too small to be seen as a real garden. Due to our current distant homes in distant cities we are sharing photos and videos of insects, gardens, animals to keep in contact, forming a large archive of our individual surrounding nature. Bits of gardens that are detached from their spot of origin. In the videos these grow together to a  digital, imaginary garden. This garden can be gardened and guarded. ♡ En contraste con la existencia en una ciudad, un jardín forma un espacio para una experiencia/observación de la naturaleza en quizás incluso los lugares urbanos más pequeños e indetectables, que podrían ser demasiado minúsculos para ser vistos como un verdadero jardín. Debido a la separación de ciudades en nuestras actuales viviendas, estamos compartiendo fotos y videos de insectos, jardines, y animales para mantenernos en contacto, formando un gran archivo de la naturaleza que nos rodea a cada una de nosotras. Trozos de jardines que se desprenden de su lugar de origen. En los vídeos crecen juntos hasta formar un jardín digital imaginario. Este jardín se puede cuidar y vigilar. ♡
+        </marquee>
+      </div>
+    </div>
+  </div>
+
+<!--
+  <p>
+    In contrast to the existence in a city a garden forms a space for a nature experience/observation in maybe even the smallest undetected urban spots, which might be too small to be seen as a real garden. Due to our current distant homes in distant cities we are sharing photos and videos of insects, gardens, animals to keep in contact, forming a large archive of our individual surrounding nature. Bits of gardens that are detached from their spot of origin. In the videos these grow together to a  digital, imaginary garden. This garden can be gardened and guarded.
+  </p>
+  -->
+  <p>
+    *thx to Sten and his equippment. <br>
+    song: trees - the garden of Jane Delawney<br>
+    voice of Johanna <br>
+    Font by <a href="https://www.instagram.com/vonstange" target="_blank">Laura</a>
+  </p>
+  <div class="JR">
+    <p>
+      <a href="https://www.instagram.com/johannablank/" target="_blank">Johanna</a> & <a href="https://www.instagram.com/r____yk___y__/" target="_blank">Ramona</a>
+      <img class="ID hover" src="./assets/ID JOHANNA Y RAMONA.png"
+        alt="ID" height="360px" width="" ;=""> 
+    </p>
+
+  </div>
+
+
+  <div class="banner">
+    <a class="tituloprojecto" href="#" target="_blank">
+      <img class="icon" src="./assets/banner Johanna & Ramona.png"
+        alt="banner" height="auto" width="140px" ;="">
+    </a>
+    <img class="ID hover" src="./assets/ID JOHANNA Y RAMONA.png"
+        alt="ID" height="360px" width="" ;=""> 
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/parcela/JohannaAndRamona/movil/index.html b/parcela/JohannaAndRamona/movil/index.html
@@ -0,0 +1,28 @@
+
+<!DOCTYPE html>
+<head>
+<title> 🟄 virreina 🟄 </title>
+<meta name="description" content="artes de la campo al compu">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+<meta name="og:title" property="og:title" content="virreina" />
+<meta name="og:description" property="og:description" content="artes de la campo al compu" />
+<meta property="og:image" content="https://d2w9rnfcy7mm78.cloudfront.net/20258157/original_cb2d2cb2a0fa98eeceb439265532836d.png?1675757381?bc=0" />
+<link rel="shortcut icon" href="https://d2w9rnfcy7mm78.cloudfront.net/20258157/original_cb2d2cb2a0fa98eeceb439265532836d.png?1675757381?bc=0">
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="style.css">
+
+
+
+<body>
+
+</body>
+
+
+
+
+
+
+</html>
diff --git a/parcela/JohannaAndRamona/movil/style.css b/parcela/JohannaAndRamona/movil/style.css
@@ -0,0 +1,70 @@
+
+  body {
+    background-image: url("../assets/[VRN]Flyer-02.jpg");
+    /*background-color: white;*/
+    background-size: contain;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    height: 100%;
+    font-family: 'Dia', helvetica, arial, sans-serif;
+    font-style: normal;
+    font-size: 9vw;  
+    color: white;
+    overflow: hidden;    
+    }
+
+  #demo {
+    color: whitesmoke;
+    display: inline-block;
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    padding-left: 5%;
+    text-align: left;
+    contain: fit-content;
+  }
+
+
+
+
+
+  .dropmenu {
+    float: left;
+    padding: 5px;
+    position: fixed;
+    bottom: 0%;
+    right: 5%;
+    max-width: 60%;
+    font-size: 1.5vw;
+    z-index: 100;
+  }
+
+  #dropmenu:hover {
+    filter: drop-shadow(0 0 1rem rgb(255, 255, 255));
+  }
+
+
+
+    .vimeo-wrapper {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      pointer-events: none;
+      overflow: hidden;
+    }
+    .vimeo-wrapper iframe {
+      width: 100vw;
+      height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
+      min-height: 100vh;
+      min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+