Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

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.

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

              
                <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>
              
            
!

CSS

              
                
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;
}
              
            
!

JS

              
                // !! 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. 

              
            
!
999px

Console