💾 Archived View for hache.archipielago.uno › dada-e › 1.html captured on 2023-09-08 at 15:54:12.
-=-=-=-=-=-=-
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>Dada-e Completo</title>
<style>
body {
background-color: white;
width: 60%;
margin: auto;
margin-top: 50px;
font-style: normal;
font-family: 'Courier New', Courier, monospace;
color: black;
}
h1 {
text-align: center;
font-size: 2em;
padding-bottom: 50px;
}
/* AVES - ESTILO */
div.fondo-aves {
background-image: linear-gradient(90deg, hsla(61, 100%, 39%, 1) 0%, hsla(63, 85%, 30%, 1) 100%);
margin: auto;
margin-top: 50px;
font-style: normal;
font-family: 'Courier New', Courier, monospace;
color: black;
}
p.texto-aves {
color: #264653;
text-align: center;
font-size: 1em;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
/* AZUL - ESTILO */
div#azul-palabras {
transform: skewX(20deg);
}
/* LIND - ESTILO */
p.texto-lind {
color:rgb(0,232,15);
width: 80%;
heigt: 70%;
font-family: 'Monaco';
font-size: 23pt;
}
/* DIEZ - ESTILO */
/* diez---Animación */
.container {
width: 100%;
height: 0vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
h3 {
font-size: 70px;
text-transform: uppercase;
font-family: 'Gambetta', serif;
letter-spacing: -10px;
transition: 900ms ease;
font-variation-settings: "wght" 311;
margin-bottom: 0.8rem;
color: black;
outline: none;
text-align: center;
background-image: linear-gradient(to right, #bdd3d3
, #123636, #bdd3d3);
border-radius: 50px 50px;
}
h3:hover, h6:hover {
font-variation-settings: "wght" 582;
letter-spacing: 1px;
}
h6 {
font-size: 20px;
text-transform: uppercase;
font-family: 'Gambetta', serif;
letter-spacing: -8px;
transition: 500ms ease;
font-variation-settings: "wght" 311;
color: black;
outline: none;
}
/* diez---FIN ANIMACIÓN */
div.nado {
transform: rotate(45deg);
margin-top: 200px;
margin-left: -40px;
background-image: linear-gradient(to left, rgba(255,0,0,0), rgba(157,222,222,1));
border-radius: 50px 50px;
letter-spacing: 2px;
}
div.impotentemente {
transform: rotate(-45deg);
margin-top: -280px;
background-image: linear-gradient(to left, rgba(255,0,0,0), rgba(51, 156, 156,1));
border-radius: 50px 50px;
letter-spacing: 4px;
}
div.contracorriente {
transform: rotate(55deg);
text-align: center;
margin-top: 100px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(36,109,109,1));
border-radius: 50px 50px;
}
p.vertical {
writing-mode: vertical-rl;
text-align: center; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(36,109,109,1));
border-radius: 50px 50px;
letter-spacing: 0.5px;
color: transparent;
text-shadow: 0 0 2px #000;
}
div.back {
background-image: linear-gradient(#a5bfbf,#bbcfcf,#d2dfdf);
width: 400px;
margin-left: 100px;
}
p.domina {
text-align: center;
background-image: linear-gradient(to right, #bdd3d3
, #1f5f5f, #bdd3d3);
border-radius: 50px 50px;
color: white;
text-shadow: 2px 2px 10px #000000;
letter-spacing: 8px;
}
div.anclo {
float:left;
background-image: linear-gradient(to right, #bdd3d3
, #1f5f5f, #bdd3d3);
border-radius: 50px 50px;
color: #B5B5B;
text-shadow: 2px 2px 2px #000000;
letter-spacing: 2px;"
}
p.descanso {
background-image: linear-gradient(to right, #bdd3d3
, #1f5f5f, #bdd3d3);
border-radius: 50px 50px;
color: white;
text-shadow: 2px 2px 10px #000000;
letter-spacing: 5px;
}
p.momento {
text-align: center; background-image: linear-gradient(#bdd3d3, #1f5f5f, #bdd3d3); letter-spacing: 1px;
}
p.pronto {
text-align: right;
background-image: linear-gradient(to right, #1f5f5f, #bdd3d3);
color: white;
text-shadow: 2px 2px 10px #000000;
letter-spacing: -1px
}
/* GUIRDO - ESTILO */
.guirdo {
border: 4px double green;
background-color: #ff8;
padding: 20px;
}
.guirdo-verso {
margin-bottom: 30px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
gap: 12px;
}
.guirdo-vertical {
writing-mode: vertical-lr;
}
.guirdo-up-icon,
.guirdo-down-icon {
width: 0;
height: 30px;
border: 3px solid blue;
position: relative;
}
.guirdo-up-icon:before {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
position: absolute;
bottom: 0;
left: -10px;
animation-name: guirdo-going-up;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
.guirdo-down-icon:before {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
position: absolute;
bottom: 0;
left: -10px;
animation-name: guirdo-going-down;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
.guirdo-heart {
background-color: red;
display: inline-block;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
height: 16px;
width: 16px;
animation-name: guirdo-growing;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.guirdo-heart:before,
.guirdo-heart:after {
content: "";
background-color: red;
border-radius: 50%;
position: absolute;
height: 16px;
width: 16px;
}
.guirdo-heart:before {
top: -8px;
left: 0;
}
.guirdo-heart:after {
left: 8px;
top: 0;
}
.guirdo-verso:nth-child(5) {
display: flex;
flex-direction: row;
gap: 20px;
}
.guirdo-verso:nth-child(5) div {
font-weight: bold;
display: flex;
flex-direction: column;
}
@keyframes guirdo-growing {
0% {
transform: rotate(-45deg) scale(1)
}
50% {
transform: rotate(-45deg) scale(1.5)
}
100% {
transform: rotate(-45deg) scale(1)
}
}
@keyframes guirdo-going-up {
0% {
top: 25px
}
100% {
top: -15px
}
}
@keyframes guirdo-going-down {
0% {
bottom: 25px
}
100% {
bottom: -15px
}
}
/* ITZTLI - ESTILO */
#itztli {
color: #363636;
}
div.itztli-fondo {
background-color: #292424;
/* width: 60%; */
margin: auto;
margin-top: 50px;
font-style: normal;
font-family: 'Courier New', Courier, monospace;
color: #BA89E8;
}
h2 {
text-align: center;
font-size: 2em;
padding-bottom: 50px;
color: #B1EF9D;
}
</style>
</head>
<body>
<h1>Dada-e #1</h1>
<!-- AVES - SECCIÓN -->
<div class="fondo-aves">
<p class="texto-aves">No quería partir pero el camino le llamaba.</p>
<p class="texto-aves">Le hacía rememorar escenas ya lejanas,</p>
<p class="texto-aves">el romper de un chubasco,</p>
<p class="texto-aves">el vaho de la tierra,</p>
<p class="texto-aves">el cariaquito entre las yemas de los dedos.</p>
</div>
<!-- AZUL - SECCIÓN -->
<div id="azul-palabras">
notar canica ruta zarzo ornar yendo seña nuca
loto sábado gozo elche bueno anexo quipo birla
heno otri fervor escala ancla istmo bulla ancho
tórax adelfa trío cada mirado liana greña amén
</div>
<!-- LIND - SECCIÓN -->
<div>
<p class="texto-lind">Como Margaret nos dijo una vez: <br>
“<mark><span style="color:blue;">nunca dudes que un pequeño grupo de ciudadanos pensantes y comprometidos pueden cambiar el mundo.</mark></span> <br>
De hecho,<i>son los únicos que lo han logrado</i>”</p>
</div>
<!-- MONMAC - SECCIÓN -->
<p>En la flora del desencanto<br>
un aroma de espectros acecha. Un cordón<br>
hilado por el hambre de augurios<br>
un sinsabor de alegrías. Tiempo <br>
de sutil diabolismo<br>
anclado<br>
a la tierra.</p>
<!-- Gracias por esta convocatoria. Espero que sea adecuado para el proyecto. Saludos. -->
<br>
<br>
<br>
<!-- DIEZ - SECCIÓN -->
<div class="back">
<div class="nado"><b>Nado</b></div> <div class="impotentemente"><b>impotentemente</b></div>
<br>
<br>
<div class="container">
<div class="contracorriente"><h6>a contracorriente.</h6></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<p class="domina">Me domina su</p>
<div class="container"><h3>in(m/t)ensidad.</h3></div>
<br>
<br>
<br>
<div class="anclo"><p><b>Ya me anclo,<br>no avanzo.</b></div>
<div style="float:left"><br><p class="vertical"><b>Luego me canso.</b></p></div>
<br>
<br>
<br>
<br>
<p class="descanso">Ya descanso, <br>pero me atraso.</p>
<p class="momento"><span style="letter-spacing: 10px;">Por un momento<span><br><span style="color: white">soy corriente.</span></p>
<p class="pronto">Pronto vuelvo al paso.</p>
</div>
<!-- ITZLI - SECCIÓN -->
<div class="itztli-fondo">
<h2>Carta al Destino <p id="itztli">Obsidiana</p></h2>
Son metaforas simples lo que somos
<br>Sin palabras, sin aliento
<br>Pero la voz no calla, nunca basta, nunca se detiene
<br>La sincronía perdida enaltece la sombra
<br>Y así nos vemos atraves de espejos rotos
<p id="itztli">Teskatlipoka.</p>
</div>
<!-- GUIRDO - SECCIÓN -->
<div class="guirdo">
<div class="guirdo-verso">
Vuélveme tu suspiro, y <span class="guirdo-vertical">subiré</span>
<div class="guirdo-up-icon"></div>
</div>
<div class="guirdo-verso">
y <span class="guirdo-vertical">bajaré</span>
<div class="guirdo-down-icon"></div> de tu pecho, me enredaré
</div>
<div class="guirdo-verso">
en tu corazón <div class="guirdo-heart"></div>, saldré al aire para volver
</div>
<div class="guirdo-verso">
a entrar. Y estaré en este juego
</div>
<div class="guirdo-verso">
<div>
<span>t</span>
<span>o</span>
<span>d</span>
<span>a</span>
</div>
<div>
<span>l</span>
<span>a</span>
</div>
<div>
<span>v</span>
<span>i</span>
<span>d</span>
<span>a</span>
</div>
</div>
</div>
<!--FINAL-->
</body>
</html>