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

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

              
                <main id="main">
   <!DOCTYPE html>
   <html lang="es">
      <head>
         <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
         <title>Tribute Page Rengoku</title>
         <meta name="description" content="Tribute for Hashira"/>
         <link rel="stylesheet" href="/css/styles.css"/>
         <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
     </head>
     <body id="body">
        <header class="bg-gray">       
           <h1 id="title">Rengoku Kyojuro</h1>
           <h2>Los capullos sin florecer, no deberían ser arrancados</h2> 
        </header>
           <figure id="img-div">
               <img id="image" alt="Rengoku image"src="https://64.media.tumblr.com/5c7cd01a700339039ac0037ec7973fc1/a6e3b72612c971f6-77/s1280x1920/a39d62c871338b419807a4821361464712b592e0.png" width="1280" />
               <figcaption id="img-caption">Kyojuro Rengoku en la portada del One Shot sobre su pasado</figcaption>
           </figure>
        <section id="tribute-info">
          <h3 class="subtittle">Un poco sobre la vida de Rengoku:</h3>
           <div class="container">
              <ul>
                 <li>Kyojuro Rengoku nació el 10 de Mayo, (no se tiene información sobre el año de nacimiento) en Japón</li>                  <li>Es parte de la familia Rengoku, la cual por lo regular alguno de sus miembros se convierte en un Hashira (pilar) de fuego</li>
                 <li>Después de la muerte de su madre y la caída de su padre en el alcohol, Kyojuro se convierte en un cazador de demonios</li>
                 <li>Cumple su primera misión como cazador de demonios tras vencer a un demonio que anteriormente había matado a 9 cazadores, Kyojuro rompe sus propios timpanos para vencer al demonio</li>
                 <li>Kyojuro entrena a su hermano pequeño y a Mitsuri Kanroji la que en un futuro se convertiría en la Hashira del amor</li>
                 <li>Se reune por primera vez con los Hashira y Kagaya Ubuyashiki para hablar sobre reemplazar a su padre como el Hashira del fuego</li>
                 <li>Kyojuro es envíado a cazar una luna superior junto con un equipo de cazadores y su estudiante Mitsuri Kanroji. Tras una dura pelea contra la luna superior, Kyojuro y Mitsuri logran vencerla</li>
                 <li>Kyojuro Rengoku se convierte en el Hashira de fuego</li>
                 <li>Le cuenta a su padre que se convirtió en el Hashira de Fuego, pero su padre lo desprecia, pese a esto Kyojuro no se desanima e incluso anima a su hermano a que no se haga menos</li>
                 <li>En una reunión de los Hashira, Rengoku conoce a un joven llamado Tanjiro Kamado y a su hermana demonio Nezuko</li>
                 <li>Rengoku se vuelve a encontrar con Tanjiro en una misión para cazar a un demonio que estaba asesinando personas en un tren</li>
                 <li>Toma como estudiantes a Tanjiro y a sus dos amigos -Zenitsu e Inosuke-</li>
                 <li>Tras vencer al demonio que acechaba dicho tren, aparece la luna superior 2 -Akaza- la cual intenta convencer a Kyojuro de convertirse en un demonio</li>
                 <li>Después de una dura batalla Akaza asesina a Rengoku y escapa</li>
                 <li>Dedica unas palabras finales a Tanjiro y le dice donde puede encontrar información sobre la danza del dios del fuego</li>
                 <li>En sus últimos momentos de vida vió a su madre y le preguntó : "Madre ¿Lo hice bien?"</li>
                 <li>Finalmente Rengoku murió con una sonrisa en su rostro</li>
              </ul>
           </div>
           <h4>
              Si quieres saber más detalles sobre la vida de Kyojuro Rengoku puedes écharle un vistazo al siguiente vídeo en <a id="tribute-link" href="https://www.youtube.com/watch?v=cNU9iPmL8sM&t=1180s&ab_channel=MeDicenDai" target="_blank"> Youtube</a> del canal Me Dicen Dai
           </h4>
           <blockquote cite="https://freakuotes.com/frase/83477/rengoku-kyojuro-kimetsu-no-yaiba">
              <p class="cita"> Vive con orgullo. Si te vence tu debilidad, calienta tu corazón, aprieta los dientes y sigue adelante. Aunque tu cobardía te frene, eso no detendrá el paso del tiempo; todos llegaremos a nuestro fin tarde o temprano, no te sientas triste por ello.</p>
              <cite class="cita2">--Rengoku Kyojuro</cite>
            </blockquote>
        </section>
     </body>
  </html>
</main>  
              
            
!

CSS

              
                #main {
    height: auto;
    max-width: 100%;
    border-radius: 59deg;
    margin: auto;
    line-height: 1.5;
    display: block;
}
#body {
    background: hsl(0, 0%, 100%);
    padding-top: 12px;
    border-style: solid;
    border-left-color: #F8F9F9;
    border-right-color: #F8F9F9;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-width: 20px;
    border-right-width: 20px;
    text-align: center;
    padding-top: 10px;
}
.bg-gray{
    background-color: #F8F9F9;
    padding: 2px;
}
#title {
    text-align: center;
    font-family: Nunito, sans-serif;
    font-weight: 80px;
    font-size: 55px;
    background: linear-gradient(45deg, #3D3B3B, #312626);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
h2 {
    text-align: center;
    font-size: 18px;
    font-family: "Open Sans Condensed", monospace;
    color: #F6735A;
    padding-bottom: 15px;
}
#image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
#img-div {
    padding-top: 10px;
    height: auto;
}
#img-caption {
    text-align: center;
    font-family: "Open Sans Condensed", monospace;
    font-size: 18px;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
}
.subtittle {
    font-size: 30px;
    font-family: Nunito, monospace;
    text-align: center;
    font-weight: bold;
    color: #312626;
    padding-top: 25px;
}
.container {
    text-align: center;
    font-family: "Open Sans Condensed", monospace;
    color: #171414;
    font-size: 18px;
    font-weight: bold;
}
.container ul li {
 list-style: none;
 max-width: 650px;
 margin: auto;
 text-align: left;
 line-height: 1.8;
 padding: 15px;
}
.container ul li::before {
    color: #F6735A;
    content: "\2022";
    padding-right: 5px;
    font-size: 30px;
    line-height: 5px;
    vertical-align: middle;
}
h4 {
    text-align: center;
    font-family: "Open Sans Condensed", monospace;
    font-size: 20px;
    color: #171414;
    padding-bottom: 20px;
}
a {
    text-decoration: none;
}
a:visited{
    color: #F6735A;
}
#tribute-info {
    background: #F8F9F9;
    border-right-color: #F8F9F9;
}
.cita {
    font-size: 20px;
    font-family: "Open Sans Condensed", monospace;
    color:  #010101 ;
    font-style: italic;
    
}
.cita2 {
    padding-left: 950px;
    font-size: 20px;
    font-family: "Open Sans Condensed", monospace;
    color:  #010101 ;
    font-style: italic;
}
              
            
!

JS

              
                
              
            
!
999px

Console