HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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 -->
*,
*::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;
}
}
Also see: Tab Triggers