Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <!-- titulo -->
  <div class="header">
    <h1 id="title" class="header__title">Jose de San Martín</h1> 
  </div>
  <!--   imagen -->
  <div id="img-div" class="image-div">
    <img id="image" class="image-div__image" src="http://gdurl.com/w5pH" alt="san_maerin_batalla">
    <div id="img-caption" class="image-div__caption">Expedición Libertadora de Argentina, Chile y del Perú.</div>
  </div>
  <!--   main -->
  <div id="main" class="main">
    <h2>Primeros años</h2>
    <p class="main__text">
      Siendo el menor de cinco hermanos, y parte de una familia de amplia tradición militar, es comprensible que desde pequeño mostrase gran inclinación por el tema y los asuntos militares. Al poco tiempo de su nacimiento, su familia se trasladó a Buenos Aires, para luego residenciarse en España.
      A muy temprana edad (11 años) se alista como cadete en el ejército español. Fue ganando en ascensos y prestigio, hasta el grado de Teniente Coronel. Es en España donde se entera de los movimientos independentistas que se gestaban en América, en particular la Revolución de Mayo que acabó con el Virreinato del Río de la Plata. Esto interesa a San Martín, que decide regresar a la Argentina, luego de una breve estadía en Londres.
    </p>
    <h2>Acontecimientos destacados</h2>
    <p class="main__text">
      Una vez en América, San Martín contribuyó a la consolidación de la independencia argentina, que parecía estar en peligro. Allí entiende que la independencia no se podría lograr del todo mientras existieran bastiones realistas en América; el más poderoso se encontraba en el Virreinato del Perú y debía ser neutralizado. Pero los enfrentamientos directos habían probado ser inefectivos, debido a las dificultades de acceso. San Martín concibió el plan de atravesar Chile para acceder al mar y por allí tomar Lima.

Pero en el curso de ese plan, Chile perdió su independencia, debido a las diferencias entre los propios chilenos. San Martín, por ese entonces gobernador de la Provincia de Cuyo, concluyó que era preciso recuperar Chile para ejecutar el plan de liberar Perú.

La Independencia de Chile se logró el 5 de abril de 1818 en la batalla de Maipú, librada luego de algunas otras batallas problemáticas. Para terminar de sellar la independencia chilena, hubo que neutralizar a los sectores que desde dentro obraban como divisionistas.

San Martín retomó su plan hacia Perú, aunque no contaba con recursos suficientes. Afortunadamente, a su expedición se sumaron soldados chilenos y británicos. Los españoles en Lima fueron tomados por sorpresa: al punto de que el virrey Joaquín de la Pezuela renunció. Los españoles intentaron negociar para ganar tiempo y reagrupar sus tropas. Pero la intensa presión de San Martín, y su negativa a otra salida que no fuera la independencia, provocó la deserción de uno de los regimientos realistas. Finalmente, el nuevo virrey, José de la Serna, escapó de la ciudad, quedando en poder de los independentistas.

Estableció un protectorado en Perú hasta 1922, año en que se entrevistó con Simón Bolívar en Guayaquil, cediéndole la labor de consolidar la independencia.
    </p>
    <div></div>
  </div>
  <!-- fin main -->
  <!--   aside -->
  <div id="tribute-info" class="tribute-info">
    <h2>Cronología</h2>
    <ul class="tribute-info__list">
      <li><strong>1778</strong> Nace el 25 de febrero, en Yapeyú.</li>
      <li><strong>1781</strong> Su familia se traslada a Buenos Aires.</li>
      <li><strong>1784</strong> El nuevo destino de su padre le lleva a España.</li>
      <li><strong>1789</strong> Ingresa en el Ejército español.</li>
      <li><strong>1811</strong> Renueva en Londres sus contactos con la Logia Lautaro.</li>
      <li><strong>1814</strong> Nombrado gobernador intendente de Cuyo.</li>
      <li><strong>1817</strong> Como general en jefe del Ejército de los Andes, cruza desde Mendoza la cordillera andina en dirección hacia Chile.</li>
      <li><strong>1818</strong> Vence en Maipú, con lo que se asegura la independencia chilena, 
        y retorna a Buenos Aires.</li>
      <li><strong>1820</strong> Inicia la campaña de Perú.</li>
      <li><strong>1822</strong> Julio: tiene lugar su decisiva entrevista con Simón Bolívar, en Guayaquil.</li>
      <li><strong>1823</strong> Llega a Buenos Aires tras el fallecimiento de su esposa.</li>
      <li><strong>1824</strong> Se dirige a Europa y se instala más tarde en Bruselas.</li>
      <li><strong>1850</strong> Fallece el 17 de agosto, en Boulogne-sur-Mer.</li>
    </ul>
  </div>
  <!--   fin aside -->
  <div class="footer">
    <p class="footer__text">Para saber más puede dirigirse a <a id="tribute-link" class="tribute-link" href="https://es.wikipedia.org/wiki/Jos%C3%A9_de_San_Mart%C3%ADn" target="_blank">Wikipedia</a>.
    </p>
  </div>
  <!--   fin footer -->
</div>
<!-- fin container -->
              
            
!

CSS

              
                *,
*::before,
*::after {
    box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}
/* container */
.container {
  --title-color: rgb(37,125,146);
  --aside-color: rgb(178,214,204); 
  --footer-color: rgb(224,103,105);
  --background-color: rgb(255,253,244);
  background-color: var(--background-color);
  display: grid;
  grid-template-columns: 30% 70%;
}
/* grid */
.header,
.image-div,
.footer {
  grid-column: 1 / span 3;
}
.tribute-info {
  grid-row: 3;
  grid-column: 1 / 2;
}
.main {
  grid-row: 3;
  grid-column: 2 / 3;
}
/* header */
.header__title {
  text-align: center;
  color: #fff;
  margin: 0;
  line-height: 2;
  background-color: var(--title-color);
}
/* image */
.image-div {
  padding: 1em 0;
  padding-bottom: 0px;
  background-color: var(--footer-color);
}
.image-div__image {  
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.image-div__caption {
  text-align: center;
  color: #fff;
}
/* main */
.main {
  padding-left: 10px;
  padding-right: 10px;
}
.main__text {
  line-height: 2;
  text-align: justify;
}
/* tribute info */
.tribute-info {
  background-color: var(--aside-color);
}
.tribute-info h2 {
  text-align: center;  
}
.tribute-info__list {
  padding-left: 10px;
  padding-right: 10px;
  margin: 0;
}
.tribute-info__list li {
  list-style: none;
  text-align: left;
  padding: 5px 5px;
}
/* footer */
.footer__text {
  background-color: var(--footer-color);
  color: white;
  margin: 0;
  line-height: 3;
  text-align: center; 
}
.tribute-link {
  color: #fff;
  text-decoration:none;
}
.tribute-link:hover {
  text-decoration: underline;
}
/* media querys */
@media screen and (max-width: 768px) {
  .container {
    display: block;
  }
  .image-div {
    padding: 0 0;
  }
}
              
            
!

JS

              
                

              
            
!
999px

Console