diff --git a/parcela/JohannaAndRamona/assets/ID JOHANNA Y RAMONA.png b/parcela/JohannaAndRamona/assets/ID JOHANNA Y RAMONA.png new file mode 100644 index 0000000..4790c12 Binary files /dev/null and b/parcela/JohannaAndRamona/assets/ID JOHANNA Y RAMONA.png differ diff --git a/parcela/JohannaAndRamona/assets/banner Johanna & Ramona.png b/parcela/JohannaAndRamona/assets/banner Johanna & Ramona.png new file mode 100644 index 0000000..525de0c Binary files /dev/null and b/parcela/JohannaAndRamona/assets/banner Johanna & Ramona.png differ diff --git a/parcela/JohannaAndRamona/assets/flores2.png b/parcela/JohannaAndRamona/assets/flores2.png new file mode 100644 index 0000000..363e9ed Binary files /dev/null and b/parcela/JohannaAndRamona/assets/flores2.png differ diff --git a/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.otf b/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.otf new file mode 100644 index 0000000..de1ee05 Binary files /dev/null and b/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.otf differ diff --git a/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.woff b/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.woff new file mode 100644 index 0000000..33b2143 Binary files /dev/null and b/parcela/JohannaAndRamona/assets/miniTRAILstellis-Regular.woff differ diff --git a/parcela/JohannaAndRamona/index.html b/parcela/JohannaAndRamona/index.html new file mode 100644 index 0000000..15a87ae --- /dev/null +++ b/parcela/JohannaAndRamona/index.html @@ -0,0 +1,193 @@ + + + + 🟄 virreina 🟄 + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ RESIDENCIES + PARCELA + + ABOUT +
+
+ + + +
+ +
+ + + +
+ +

PARCELA

+ +
+
+ + + + + + + + + + + +
+ +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ + +
+
+
+ + ♡ 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. ♡ + +
+
+
+ + +

+ *thx to Sten and his equippment.
+ song: trees - the garden of Jane Delawney
+ voice of Johanna
+ Font by Laura +

+
+

+ Johanna & Ramona + ID +

+ +
+ + + +
+ + + \ No newline at end of file diff --git a/parcela/JohannaAndRamona/movil/index.html b/parcela/JohannaAndRamona/movil/index.html new file mode 100644 index 0000000..8929a67 --- /dev/null +++ b/parcela/JohannaAndRamona/movil/index.html @@ -0,0 +1,28 @@ + + + + 🟄 virreina 🟄 + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/parcela/JohannaAndRamona/movil/style.css b/parcela/JohannaAndRamona/movil/style.css new file mode 100644 index 0000000..68fa06f --- /dev/null +++ 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%); + } + \ No newline at end of file diff --git a/parcela/JohannaAndRamona/style.css b/parcela/JohannaAndRamona/style.css new file mode 100644 index 0000000..ebca24c --- /dev/null +++ b/parcela/JohannaAndRamona/style.css @@ -0,0 +1,297 @@ +html{ + overflow-x: hidden; + overflow-y: auto; +} + +body { + background-image: url("../../assets/fondo.png"); + background-color: rgb(0,0,0); + 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-family: 'Gilda Display', serif; + font-family: 'Manrope', sans-serif; + font-family: 'Noto Sans Mono', monospace; + font-family: 'Playfair Display', serif; + font-style: normal; + font-size: 0.8vw; + color: none; + } + +header{ + background-color: black; + width: 100%; + padding: none; + left: 0%; +} + +/* reloj */ +.clock { + position: absolute; + padding: 2%; + align-items: center; + top: 0%; + left: 45%; + width: 100%; + height: 100%; + z-index: 100; + pointer-events: none; + overflow: hidden; + color: white; + font-size: .85vw; + font-family: 'Dia', helvetica, arial, sans-serif; + background-color: none; +} + +.seccion { + position: absolute; + padding: 2%; + align-items: center; + top: -1%; + left: 90%; + width: 50%; + height: 100%; + z-index: 1000; + overflow: hidden; + color: white; + font-size: 1vw; + font-family: 'Manrope', sans-serif; + background-color: none; +} + +/* banner ID */ +.banner { + float: left; + padding-left: 1%; + position: fixed; + top: 0%; + right: 0%; + height: fit-content; + max-height: 100%; + z-index: 100; + background-color: black; +} + +.banner:hover { + filter: drop-shadow(0 0 .5rem rgb(255, 0, 0)); +} + +.hover { + pointer-events: none; + display: inline-block; + position: absolute; +} + +.ID { + display: none; + width: 70%; + z-index: 100000; +} + +.tituloprojecto:hover+.ID { + display: inline-block; + position:absolute; + top: 35%; + left: -710%; + width: fit-content; + max-height: 100%; + z-index: 100000; +} + +.JR:hover+.ID { + display: inline-block; + position:absolute; + top: 35%; + left: -710%; + width: fit-content; + max-height: 100%; + z-index: 100000; +} + +/* project */ +#I1{ + position: absolute; + width: 100%; + padding: 1%; + left: 0%; + top: 0%; + z-index: 100; +} + +.video1 { + position: absolute; + top: 40%; + left: 20%; + width: 100%; + height: 100%; + z-index: 1000; +} + +.video2 { + position: absolute; + top: 130%; + left: 20%; + width: 100%; + height: 100%; + z-index: 1000; +} + +.video3 { + position: absolute; + top: 210%; + left: 20%; + width: 100%; + height: 100%; + z-index: 1000; +} + + +/* Dropdown Button */ +.dropbtn { + background-color: transparent; + color: grey; + padding-left: 5px; + font-size: 16px; + height: fit-content; + max-height: 30px; + position: inherit; + border: none; + border-radius: 8px; + font-size: 1.5vw; + z-index: 1000; +} + +/* The container
- needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: none; + font-family: 'Manrope', sans-serif; + color: #000; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + font-family: 'Manrope', sans-serif; + padding-left: 20px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover { + background-color: #ddd; + color: white; + font-family: 'Manrope', sans-serif; + } + + + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content { + display: block; + color: black; + font-family: 'Playfair Display', serif; + text-shadow: 0 0 3px #000; + } + +/* unvisited link */ +a:link { + color: white; +} + +/* visited link */ +a:visited { + color: white; +} + +/* mouse over link */ +a:hover { + color: white; + font-family: 'Manrope', sans-serif; + text-shadow: 0 0 8px #000; +} + +/* selected link */ +a:active { + color: black; + font-family: 'Manrope', sans-serif; +} + + + + +.creditos { + position: absolute; + padding: 2%; + align-items: center; + top: 350%; + left: 5%; + width: 70%; + height: 100%; + z-index: 1000; + overflow: hidden; + color: white; + text-align: right; + font-size: 2vw; + font-family: "miniTRAIL"; + background-color: none; +} + + +@font-face { + font-family: "miniTRAIL"; + src: url("./assets/miniTRAILstellis-Regular.woff") format('woff'); +} + + +.marquee { + margin: 20px; + max-width: 90%; + height: 5vw; + width: 100%; + z-index: 1000; + font-family: "miniTRAIL"; + font-size: 3vw; + text-align: center; + background-color: none; + color: azure; + overflow: hidden; + position: sticky; + top: 300%; + left: 20%; + z-index: 100; +} + + +.marquee div { + display: flex; + width: 210%; + height: 5vw; + position: absolute; + overflow: hidden; +} + +.marquee span { + float: left; + width: 90%; +} + +@keyframes marquee { + 0% { left: 0; } + 100% { left: -100%; } +}