123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header>
<h1 id="elTitulo">Recuerda posición de la página al reabrirla, haciendo un doble click en elemento. </h1>
</header>

<section>
<article>
<h2>"Si hay riqueza, que no se note."</h2>

<p>Semanas atrás estaba en la Sala de Referencia de la <b>Biblioteca Nacional</b> revisando algunos libros; y cuando los fui a devolver a su sitio resultó que eran de los últimos estantes, los que están del lado noreste. No sé por qué se me dio por acercarme a los ventanales. Seguramente aprovechando que la sala está en el 6º nivel, pensé en disfrutar la vista al parque. Y me encontré con algo que estuvo allí siempre, pero era la primera vez que yo lo veía. Así que fue una sorpresa : ahí, detrás del dique, tapado por una pila de contenedores ... había un castillo.
</p>
<figure><img src="https://lh3.googleusercontent.com/-YAyckDzZ6_Y/VhgdYlW8RJI/AAAAAAAAEUQ/51kv03l_tW8ZnajD3pnY3Vn4ddFyb_FJgCCo/s800/UsinaCIAEPuertoBuenosAires.jpg" alt="Usina CIAE."></figure>

<p>¿Cómo había llegado a ese lugar? ¿Y para qué?. <br>
Ni hablar que apenas tuve una tarde libre me fui desde <b>Retiro </b>bordeando la costanera <b>Obligado </b>para ver si lo encontraba. Me lo topé en el cruce con la Calle 12, pero no pude acercarme mucho porque estaba dentro de un terreno alambrado.
Fui hasta la casilla de los guardias a preguntar si sabían qué era ese edificio, y entonces me desayunaron que había sido la vieja usina de la <b>Ítalo</b>. 
</p>
<p>¡Por supuesto! Allá por 1930 la <b>CIAE </b>(<b>Compañía ÍtaloArgentina de Electricidad</b>) puso en sus edificios una arquitectura entre medieval y renacentista. Todavía pueden verse en los bosques de <b>Palermo</b> (<b>Bs. As., Argentina</b>) unos torreones que parecen decorativos, pero que adentro esconden subestaciones transformadoras. Alguna de sus plantas estuvo inspirada en un castillo milanés del siglo XV, propiedad de la poderosa familia <b>Sforza</b>.
</p>
<p>Ahora bien, es lógico que los "dueños" de <b>Milan </b>tengan como vivienda una construcción de este tipo. ¿Pero hay necesidad de levantar un <i>castelletto </i>para meter una usina eléctrica?
</p>
<p>Podría quedar como una excentricidad, de no ser porque hubo otro caso.<br>
A fines del siglo XIX el gobierno decidió construir un tanque para abastecer de agua corriente a la ciudad; y se eligió un lugar alto, cerca del centro, en lo que hoy es el límite entre los barrios de <b>Balvanera</b> y <b>San Nicolás</b>. El depósito tuvo una capacidad de setenta millones de litros, y ocupaba casi una manzana, por lo que había que darle una fachada discreta a semejante mole, acorde al contenido.<br>
Y eligieron ésta
</p>
<figure><img src="https://lh3.googleusercontent.com/-PLTN81iiZZw/Vhgdl3GtyqI/AAAAAAAAEUo/uWOm6T5LQYUMgs7qPB9U3nZDpUlaWqKRACCo/s800/PalacioAguasCorrientes.jpg" alt="Palacio de las Aguas Corrientes"></figure>

<p>Exactamente. El Palacio de las Aguas Corrientes se hizo para tapar los tanques de agua.
</p>
<p>Cuando quedaron chicos, allá por la década del 20, y mudaron la planta a <b>Palermo</b>, el edificio fue remodelado y adaptado para contener archivos y oficinas. Hoy tiene también un museo, que está alrededor de la única pileta que no desmantelaron, y que forma parte de la 'colección'.
</p>
<p>Uno piensa que estas construcciones se justificaban en una catedral, universidad, casa de gobierno ... no para meter piletones o generadores; pero de última no están totalmente desubicadas. Son más bien una alegoría de las aspiraciones que tenemos los porteños, que pretendemos siempre ser lo que no somos.<br>
Porque no somos la cultura francesa, no somos la industria alemana, no somos la economía inglesa, no somos el ejército prusiano ... somos la escenografía fastuosa delante de un viorsi.
</p>
<p>Pero mientras podamos pagar la fachada elegante, está todo bien. 
</p>

<blockquote>❝ Buenos Aires parece ser la capital de un imperio que nunca existió. ❞ <br>
<span class='autor'>Georges Clemenceau</span>
</blockquote>
	</article>

<aside>
<nav>
<a target="_blank" href="https://www.argentinaparamirar.com.ar/notas/ver/104">Usina Pedro de Mendoza (Palacio Sforza)</a>
<a target="_blank" href="http://www.skyscrapercity.com/showthread.php?p=6171082&postcount=21">Usina Pedro de Mendoza (Palacio Sforza)</a>
<a target="_blank" href="https://www.flickr.com/photos/alconphoto/5052062221/">Ex Usina CIADE</a>
<a target="_blank" href="https://www.flickr.com/photos/alconphoto/5116024010/">Actual "Usina de las Artes"</a>
<a target="_blank" href="https://www.flickr.com/photos/robert-wright/2783348558/">Ex Usina CIADE en Puerto</a>
<a target="_blank" href="https://www.flickr.com/photos/robert-wright/2763571961/in/photostream/">Detalle torre</a>
<a target="_blank" href="https://www.flickr.com/photos/carlitos_muaddib/517674799/">Otras usinas</a>
<a target="_blank" href="https://es.wikipedia.org/wiki/Palacio_de_Aguas_Corrientes">Palacio de las Aguas Corrientes</a>
<a target="_blank" href="http://www.skyscrapercity.com/showthread.php?t=205226">Palacio de las Aguas Corrientes</a>
<a target="_blank" href="https://es.wikipedia.org/wiki/Archivo:Palacio_de_aguas_corrientes.jpg">Palacio de las Aguas Corrientes (foto)</a>
<a target="_blank" href="https://www.flickr.com/photos/ricardobevilaqua/2287136841/">Palacio de las Aguas Corrientes (foto)</a>
<a target="_blank" href="https://www.aysa.com.ar/index.php?id_contenido=1211&id_seccion=0">Museo del Agua y de la Historia Sanitaria</a>
</nav>
</aside>
</section>

<footer id="elPie">
	<p>Para <a target="_blank" href="https://escss.blogspot.com/2017/02/revision-posts-nuevas-demos.html">EsCss</a><br>
El texto de ejemplo fue publicado originalmente el [06 Ene 2011 10:53] en el desaparecido <b>Foro ViRtUaL .::Chest of Wonders::.</p>
</footer>

            
          
!
            
              
* {
margin: 0; 
padding: 0; 
border: 0 none; 
position: relative; 
}
img {
max-width: 100%;
}
html {
background: white url(https://2.bp.blogspot.com/-ZNHWTNLgq4Q/VuxMrlgv63I/AAAAAAAAM60/2Vm2zeRy6GQvnX_lc-RIjFVDwAEfWJvpQ/s200/textura.png) repeat;
min-height: 100vh;
font-family: serif;
color: #4f3b52;
}
body {
min-height: inherit;
}
h1 {
background: #4f3b52;
margin-bottom: 2rem;
color: #fcfcfc;
text-align: center;
padding: .5rem;
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
section {
padding: 0 1.5rem;
}
blockquote, h2 {
display: block;
font-family: sans-serif;
font-size: 250%;
text-align: right;
font-style: italic;
opacity: .7;
margin-bottom: 2rem;
}
article h2 {
text-align: left;
}
blockquote .autor {
display: block;
text-align: right;
font-size: 50%;
font-family: serif;
font-style: initial;
}
blockquote .autor::before {
content: '.::'
}
blockquote .autor:after {
content: '::.'
}
p {
text-indent: 5%;
margin-bottom: 1.5rem;
font-size: 140%;
line-height: 1.6;
}
b {
font-variant: small-caps;
letter-spacing: 1px;
}
figure {
text-align: center;
margin-bottom: 2rem;
}
aside {
margin-bottom: 1.5rem;
font-size: 125%; 
width: auto; 
background: #4f3b52;
padding: 2rem 1rem;
font-size: 95%;
}
aside a {
display: block;
text-decoration: none;
font-weight: bold;
background: rgba(255,255,255,.2);
border: 1px solid  rgba(255,255,255,.4);
border-radius: 3px;
color: #f5f5f5;
margin: .3rem 0;
padding: .5rem;
font-family: sans-serif;
font-size: .9rem;
font-weight: normal;
}
a:hover, a:focus, a:visited {
background: rgba(255,255,255,.35);
color: #f5f5f5;
}
footer {
background: #4f3b52;
padding: 1rem;
color: #fcfcfc;
font-size: 90%; 
}
@media screen and (min-width:1024px) {
  header, section, footer {
  margin-left: 20rem;
  }
  aside {
  position: fixed;
  left: 0; top: 0;
  width: 18rem;
  height: 100%;
  overflow: auto;
  font-size: 95%;
  }
  aside nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  }
  article {
  max-width: 720px;
  margin: auto;
  }
}

            
          
!
            
              
function inicia() {
  /* REFERENCIA A TODOS LOS ELEMENTOS DEL DOCUMENTO */
  todos = document.querySelectorAll("*"); 

  /* RECORRE TODOS LOS ELEMENTOS */
  for(el=0, t=todos.length; el<t; el++) {
    /* SI NO LO TIENEN, LES AGREGA UN ID */
    todos[el].id = (todos[el].id)? todos[el].id : "I73m"+el; 
  }

  //alert(document.body.innerHTML)

  /* CAPTURA EL VALOR DEL ÍTEM p05IcI0n EN STORAGE */
  destino = localStorage.getItem("p05IcI0n"); //alert(destino)
 
  /* BORRA EL MARCADOR HASTA QUE SE GRABE DE NUEVO */
  //localStorage.removeItem("p05IcI0n"); 

  /* DESPLAZA EL DOCUMENTO HASTA SU ANCLA */
  setTimeout(function(){window.location = window.location.hash = "#"+destino}, 1000); 
}

/* GRABA EL NUEVO MARCADOR */
function recordar(evento) {
  /* CAPTURA COORDENADAS DEL ELEMENTO A RECORDAR */
  var hor = evento.clientX; 
  var ver = evento.clientY; 

  /* CAPTURA EL ID DEL ELEMENTO A RECORDAR */
  identificador = document.elementFromPoint(hor, ver).id; //alert(identificador)

  /* GUARDA EL ID COMO VALOR EN STORAGE */
  localStorage.setItem("p05IcI0n", identificador)
}

/* PONE EVENTO PARA GRABAR CON DOBLECLICK */
document.addEventListener("dblclick", recordar, false); 
/* PONE EVENTO PARA CARGAR FUNCIÓN DE INICIO */
window.addEventListener("load", inicia, false);

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console