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 URL's 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 it's URL and the proper URL extention.
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 Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
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.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body id="main">
<header>
<h1 id="title">Martin Luther King</h1>
<figure id="img-div">
<img src="https://www.berkeleycr.com/cms/wp-content/uploads/2019/01/MLK2.jpg" alt="Matin-Luther-King" id="image">
<figcaption id="img-caption">
<p id="centrar">
Martin Luther King jr. Pacifista y defensor de los Derechos Civiles.
</p>
</figcaption>
</figure>
</header>
<!--Nav-->
<nav>
<ul>
<li><a href="#biografia">Biografía</a></li>
<li><a href="#estudios-preparacion">Estudios y Preparación</a></li>
<li><a href="#derechos-civiles">Lucha por los Derechos Civiles</a></li>
<li><a href="#asesinato">Asesinato</a></li>
<li><a href="#dream">I Have a Dream</a></li>
</ul>
</nav>
<!--Main-->
<main id="tribute-info">
<article id="biografia">
<h2>Biografía</h2>
<p>
Nació el 15 de enero de 1929 en Atlanta. Hijo de Martin Luther King quien fue ministro en una iglesia bautista. Desde joven tomó conciencia de la situación de segregación social existente en Norteamércia hacia la etnia subhariana (o personas negras). Se convirtió en pastor en 1954 y a dirigir una iglesia en la ciudad de Montgomery, Alabama.
</p>
<p>
Muy pronto dio muestras de carisma y de su firme decisión de defender los derechos civiles con métodos pacíficos. Obtuvo inspiración para esto gracias a la figura de Mahatma Gandhi y en la teoría de desobediencia civil de Henry David Thoreau, misma teoría que inspiró a la lucha de Nelson Mandela contra apartheid en Sudáfrica. En agosto de 1955 una humilde modista negra, Rosa Parks, fue detenida y multada por sentarse en la sección reservada para blancos de un autobús; King dirigió un masivo boicot de más de un año contra la segregación en los autobuses municipales.
</p>
<p>
En el verano de 1963, su lucha alcanzó uno de sus momentos culminantes al encabezar una gigantesca marcha sobre Washington en la que participaron unas 250.000 personas, ante las cuales pronunció el discurso hoy titulado I have a dream (Tengo un sueño), una bellísima alocución en favor de la paz y la igualdad entre los seres humanos. King y otros representantes de organizaciones antirracistas fueron recibidos por el presidente John F. Kennedy, quien se comprometió a agilizar su política contra el segregacionismo en las escuelas y en la cuestión del desempleo, que afectaba de modo especial a la comunidad negra.
</p>
<p>
No obstante, ni las buenas intenciones del presidente, quien moriría asesinado meses más tarde, ni el vigor ético del mensaje de Martin Luther King, premio Nobel de la Paz en 1964, parecían suficientes para contener el avance de los grupos nacionalistas de color contrarios a la integración y favorables a la violencia, como Poder Negro, Panteras Negras y Musulmanes Negros. La permeabilidad de los colectivos de color (sobre todo de los que vivían en los guetos de Nueva York y de otros estados del norte) a la influencia de estos grupos violentos ponía en peligro el núcleo del mensaje de King, el pacifismo. En marzo de 1965 encabezó una manifestación de miles de defensores de los derechos civiles que recorrieron casi un centenar de kilómetros, desde Selma, donde se habían producido actos de violencia racial, hasta Montgomery. La lucha de Martin Luther King tuvo un final trágico: el 4 de abril de 1968 fue asesinado en Memphis por James Earl Ray, un delincuente común de raza blanca. Mientras se celebraban sus funerales en la iglesia Edenhaëser de Atlanta, una ola de violencia se extendió por todo el país. Ray, detenido por la policía, se reconoció autor del asesinato y fue condenado con pruebas circunstanciales. Años más tarde se retractó de su declaración y, con el apoyo de la familia King, pidió la reapertura del caso y la vista de un nuevo juicio.
</p>
</article>
<article id="estudios-preparacion">
<h2>Estudios y Preparación</h2>
<p>
Tras estudiar en colegios públicos y graduarse en el instituto con 15 años, Martin Luther King fue a la Universidad. En 1948 consiguió su título de Sociología (Bachelor of Arts) en Morehouse College (Atlanta), una institución creada, originariamente, para afroamericanos. En 1951 obtuvo su licenciatura en Teología (Bachelor of Divinity) por el Crozer Theological Seminary de Chester. Ese mismo año comenzó a cursar el doctorado en Teología sistemática por la Universidad de Boston. Cuatro años después, en 1955, consiguió el título de Doctor en Filosofía.
</p>
<p>
Durante su estancia en Boston conoció a Coretta Scott, con la que contrajo matrimonio en 1953. Con ella tuvo dos hijos y dos hijas: Yolanda King, Martin Luther King III, Dexter Scott King y Bernice King.
</p>
</article>
<article id="derechos-civiles">
<h2>Lucha por los Derechos Civiles</h2>
<p>
Martin Luther King lideró un boicot contra los autobuses públicos de Montgomery. Esta protesta se prolongó desde el 1 de diciembre de 1955 hasta el 20 de diciembre de 1956, cuando el Tribunal Supremo de Justicia de Estados Unidos declaró inconstitucional la ley que exigía la segregación en el transporte público de Montgomery. A pesar de que la protesta se resolvió de manera satisfactoria, los 382 días que duró no estuvieron exentos de violencia. Tan tensa era la situación en Montgomery que los segregacionistas blancos atacaron la casa de Luther King y la del pastor Ralph Abernathy, también organizador de la campaña.
</p>
<p>
Martin Luther King, tras conseguir la igualdad de blancos y negros en el transporte público, continuó con la lucha por los derechos civiles. En 1957, fue elegido presidente de la Conferencia Sur de Liderazgo Cristiano. Esta organización, cristiana y pacifista, tenía como objetivo participar activamente en el movimiento por los derechos civiles. Otro de los actos por los que Martin Luther King es recordado es por su participación en la campaña de Birmingham (Alabama). Las protestas pacíficas y los boicots llevados a cabo en la ciudad hicieron que fuera arrestado en abril de 1963.
</p>
<p>
La estancia en prisión le llevó a escribir la popular Carta desde la cárcel de Birmingham. En este ensayo explicaba el porqué de sus protestas. El entonces presidente de Estados Unidos, John F. Kennedy, apoyó a Martin Luther King. Fue liberado una semana después de su detención. Tras numerosos incidentes violentos, las protestas de Birmingham terminaron en junio de 1963, cuando los lugares públicos fueron abiertos a los negros.
</p>
</article>
<article id="asesinato">
<h2>Asesinato</h2>
<p>
A finales de marzo de 1968, Martin Luther King viajó hasta Memphis (Tennessee) para apoyar la huelga de basureros afroamericanos que luchaban por mejorar sus condiciones laborales. <strong>El 4 de abril, mientras estaba en la terraza de la habitación del hotel donde se alojaba, murió por el disparo de un segregacionista. Martin Luther King solo tenía 39 años.</strong>
</p>
<p>
Dos meses después de su asesinato, las autoridades capturaron al autor, James Earl Ray, mientras intentaba huir a Reino Unido. Sin embargo, todavía son muchos los que piensan que la muerte de Martin Luther King fue parte de una conspiración. Lo que sí es un hecho probado es que la lucha incansable de Martin Luther King por los derechos civiles de la comunidad negra sigue siendo todo un ejemplo. Tanto es así, que el tercer lunes de enero, en torno a su fecha de cumpleaños, se celebra el Día de Martin Luther King Jr. en Estados Unidos.
</p>
</article>
<article id="dream">
<h2>I Have a Dream</h2>
<p>
Pese al valor de su obra escrita, ninguno de sus textos despertó la universal admiración del más famoso de sus discursos: el que pronunció el 28 de agosto de 1963 ante los 250.000 integrantes de la marcha sobre Washington, al pie del Monumento a Abraham Lincoln, el presidente que, un siglo antes, había abolido la esclavitud: "Hace cien años, un gran americano, bajo cuya sombra simbólica nos encontramos hoy, firmó la Proclamación de la Emancipación. Este trascendental decreto apareció como un gran fanal de esperanza para millones de esclavos que habían sido marcados con el fuego de una flagrante injusticia. Llegó como el amanecer jubiloso de la larga noche de su cautividad. Pero cien años después, la América de color sigue sin ser libre."
</p>
<p>
Considerado una obra maestra de la oratoria, el nombre con que este discurso es conocido procede de su parte central, en la que reiterando la fórmula I have a dream (Tengo un sueño), Martin Luther King eleva a la condición de ideal la simple materialización de la igualdad: "Sueño que mis cuatro hijos pequeños vivirán algún día en una nación donde no se les juzgará por el color de su piel sino por las cualidades de su carácter". Valioso tanto como condensada expresión de sus principios como por su impresionante altura emotiva, su vigencia sigue conmoviendo más de medio siglo después.
</p>
</article>
</main>
<footer>
<p><cite>El perdon no es un acto ocasional, es una actitud constante.</cite> Martin Luther King.
</p>
<br/>
<p><strong>Reseña Bibliográfica:</strong> Ruiza, M., Fernández, T. y Tamaro, E. (2004). Biografia de Martin Luther King. En Biografías y Vidas. La enciclopedia biográfica en línea. Barcelona (España). <a href="https://www.biografiasyvidas.com/biografia/k/king.htm" target="_blank" id="tribute-link">Para mas información consulte aquí.</a></p>
</footer>
</body>
body {
margin-top: 50px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: #E6E6E6;
}
h1 {
font-family: sans-serif;
text-align: center;
}
#image {
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
#centrar {
text-align: center;
}
#tribute-info {
background-color: #F2F2F2;
border-radius: 20px;
height: auto;
widht: auto;
padding: 50px;
}
figure {
background-color: #F2F2F2;
padding: 10px;
border-radius: 20px;
widht: auto;
height: auto;
}
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
Also see: Tab Triggers