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

              
                <div id = "gpe" lang = "es">
<div class = "encabezado"><div class = "lateral"><div class = "circulo"><svg version="1.1" alt = "coronita del guadalupe reinas" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1080px" height="636px" viewBox="0 0 1080 636" enable-background="new 0 0 1080 636" xml:space="preserve">
<path fill="#ECF3A2" d="M1036.854,8.454c-23.405,0-42.424,19.019-42.424,42.156c0,7.018,1.731,13.468,4.662,19.308L808.796,227.165 l-38.362-77.031c7.317-4.963,11.979-13.468,11.979-23.116c0-15.499-12.555-28.4-28.388-28.4c-15.509,0-28.111,12.902-28.111,28.4 c0,9.648,4.71,18.153,12.022,23.116l-90.172,98.98l-89.9-159.854v-0.312c14.333-6.428,24.58-21.362,24.58-38.338 c0-23.137-19.015-42.156-42.42-42.156c-23.452,0-42.468,19.019-42.468,42.156c0,16.976,9.971,31.91,24.602,38.338v0.312 l-84.335,149.884l-81.382-89.01c7.318-4.963,12.003-13.468,12.003-23.116c0-15.499-12.582-28.4-28.11-28.4 c-15.814,0-28.389,12.902-28.389,28.4c0,9.648,4.682,17.876,11.697,23.116l-42.166,85.512L80.907,69.917 c2.954-5.84,4.705-12.291,4.705-19.308c0-23.137-19.015-42.156-42.467-42.156C20.042,8.454,1,27.472,1,50.609 c0,23.427,19.042,42.445,42.146,42.445c2.354,0,4.431,0,6.464-0.276l50.363,424.519c-10.251,5.55-16.965,16.397-16.965,28.978 v46.553c0,18.464,14.607,33.097,32.751,33.097h848.207c18.419,0,33.074-14.633,33.074-33.097v-46.553 c0-12.291-7.017-23.116-17.013-28.978l50.408-424.519c2.032,0.276,4.085,0.276,6.419,0.276c23.426,0,42.146-19.018,42.146-42.445 C1079,27.472,1060.28,8.454,1036.854,8.454 M276.537,463.127l-63.539-63.252l63.539-63.528l63.192,63.528L276.537,463.127z M540.023,463.127l-63.518-63.252l63.518-63.528l63.217,63.528L540.023,463.127z M803.508,463.127l-63.516-63.252l63.516-63.528 l63.239,63.528L803.508,463.127z"/></svg></div></div><div class = "titulo"><img src = "https://i.imgur.com/C2NAHUt.png" alt = "GuadalupeReinas 2021 de Libros b4 Tipos"/></div></div>
<div class = "barra"></div>
<div class = "consignas">
<div class = "nombre"><div class = "num">1</div><div class = "consigna">Una lectura conjunta de Librosb4tipos</div></div>
<div class = "portada"><img src = "https://i.imgur.com/NWsg3Z8.jpg" class = "alto" alt = "Portada de Muerte a la Zaga"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">No tengo casi de donde elegir porque lo he leído casi todo de Librosb4tipos pero agarré un libro pendiente que no es muy largo y que le gustó a varias de las beforas el año pasado durante ALImaginaria. Leeré <strong>Muerte a la zaga</strong> de María Elvira Bermúdez.</div>
<div class = "nombre"><div class = "num">2</div><div class = "consigna">Libro que te recuerde a una de tus mujeres favoritas</div></div>
<div class = "portada"><img src = "https://i.imgur.com/9qKEBjc.jpg" class = "alto" alt = "Portada de The Atlas Six"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">Lo tuve difícil, pero creo que acabé eligiendo bien. La autora elegida me recuerda a mi esposa, que es una de mis mujeres favoritas y a mi mamá porque siempre le contaba de sus historias y además es una de mis mujeres favoritas porque la conocí leyendo sus fanfics. Es un libro no exactamente cortísimo, pero bueno, leo rápido. Se trata de <strong>The Atlas Six</strong> de Olivie Blake.</div>
<div class = "nombre"><div class = "num">3</div><div class = "consigna">Texto o historia en formato no tradicional</div></div>
<div class = "portada"><img src = "https://i.imgur.com/Pu9re2D.jpg" class = "alto" alt = "Portada del zine Ocean of Stars"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">Aquí elegí leer un fanzine de fanfics (porque soy yo, duh') del fandom de Mo Dao Zu Shi. Elegí <strong>Ocean of Stars</strong> de muchas autoras. Es un zine dedicado a los personajes de Xue Yang y a Xiao Xingchen con inspiraciones en los cuentos de hadas</div>
<div class = "nombre"><div class = "num">4</div><div class = "consigna">Libro de una autora disidente</div></div>
<div class = "portada"><img src = "https://i.imgur.com/fBjmhRW.jpg" class = "alto" alt = "Portada de The Order of the pure moon reflected in water"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">Hace unos años conocí a la escritora Zen Cho, originaria de Malasia, con una novela corta que me encantó de fantasía y ciencia ficción. Ahora quiero volver a leer porque lleva bastante tiempo en mis pendientes (además que siempre pienso que hay que darle más visibilidad a autoras del sur de Asia, puesto que se suele pensar en pocos países cuando se habla del continente). Elegí <strong>The Order of the Pure Moon Reflected in Water</strong>.</div>
<div class = "nombre"><div class = "num">5</div><div class = "consigna">Relectura de uno de tus favoritos</div></div>
<div class = "portada"><img src = "https://i.imgur.com/8jqV8UO.png" class = "alto" alt = "Página de AO3 de Fire in the Mountains"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">Elegí releer aquí uno de mis comfort fanfics que es de mis obras favoritas en la vida. Voy a releer <strong>Fire in the Mountains</strong> de EllaBesmirched. Es un fanfic de My Hero Academia y es de mis cosas favoritas en la existencia. Me sé los diálogos y todo.</div>
<div class = "nombre"><div class = "num">6</div><div class = "consigna">Un fanfic</div></div>
<div class = "portada"><img src = "https://i.imgur.com/BlU8uol.png" class = "ancho" alt = "Página de AO3 de Ground Zero's Number One Fan"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">Soy fanática de leer fics eternos y largos pero considerando que ya hay algunas cosas larguitas en esta TBR, elegí uno tamaño más estandar, de My Hero Academia, que Raquel aka Hitzuji me ha recomendado muchas veces: <strong>Ground Zero's Number One Fanboy</strong> de tsukithewolf. Es un fanfic de My Hero Academia que tiene por protagonistas a Izuku Midoriya y a Katsuki Bakugo.</div>
<div class = "nombre"><div class = "num">7</div><div class = "consigna">Libro de filosofía, historia o crítica literaria</div></div>
<div class = "portada"><img src = "https://i.imgur.com/TqJOkjH.jpg" class = "alto" alt = "Portada de Cheek by Jowl"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">Elegí leer más de mi adorada Ursula K. LeGuin porque me parece super lúcida al hablar de todo tipo de literatura imaginativa: fantasía o ciencia ficción. Hace medio año conseguí <strong>Cheek by Jowl</strong> que será mi lectura esta vez.</div>
<div class = "nombre"><div class = "num">8</div><div class = "consigna">Historia que se haya convertido en película, serie o anime</div></div>
<div class = "portada"><img src = "https://i.imgur.com/8FhNsVM.png" class = "alto" alt = "Portada del volumen 14 de Akatsuki no Yona"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">Estoy leyendo el manga de <strong>Akatsuki no Yona</strong> de Mizuho Kusanagi, que es muy largo y pues es también un anime. Elegí meterlo en este GuadalupeReinas para matar dos pájaros de un tiro, así que leeré el tomo número 14.</div>
<div class = "nombre"><div class = "num">9</div><div class = "consigna">Libro de terror u horror</div></div>
<div class = "portada"><img src = "https://i.imgur.com/hX4QiYr.png" class = "ancho" alt = "Portada de Through The Woods"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">No sabía muy bien que elegir hasta que Raquel aka Hitzuji me recomendó <strong>Through The Woods</strong> de la autora Emily Carroll. Esa será mi lectura.</div>
<div class = "nombre"><div class = "num">10</div><div class = "consigna">Libro de autora que comparta tu signo zodiacal</div></div>
<div class = "portada"><img src = "https://i.imgur.com/gtMsmyf.jpg" class = "alto" alt = "Portada de la pluma del grifo"/><div class = "cinta arriba"></div><div class = "cinta abajo"></div></div>
<div class = "txt">Aquí no me pude contener y si puse un libro un poco larguito. Se trata de <strong>La pluma del grifo</strong> de Cornelia Funke. Con todo y que no creo en el zodiaco, me emociona que Funke sea sagitario como yo, así que elegí justo un libro suyo que llevo teniendo pendiente desde hace mucho.</div>
</div>
<div class = "cred"><a href = "https://codepen.io/NeaPoulain">NeaPoulain</a></div>
</div>  

              
            
!

CSS

              
                :root {
  --morado:#C6AFF9;
  --verde:#3A8187;
  --fondo:#555;
  --amarillo:#ECF3A2;
}

*{word-wrap: break-word;overflow-wrap: break-word;-webkit-hyphens: auto;hyphens: auto;}

#gpe{width:80%;max-width:500px;margin:auto;font-family:'Georgia', serif;font-size:1em;line-height:auto!important;}

#gpe a, #gpe a:hover, #gpe a:visited, #gpe a:active{color:var(--verde);text-decoration:none;}

#gpe .encabezado{padding:20px;background-color:var(--fondo)}

#gpe .lateral{display:inline-block;width:180px;vertical-align:middle;}

#gpe .circulo{background-color:var(--verde);height:180px;border-radius:50%;text-align:center;display:flex;align-items: center;justify-content:center;}

#gpe .circulo svg{width:130px;height:auto;}

#gpe .titulo{display:inline-block;width:250px;vertical-align:middle;margin-left:10px;text-align:center;}

#gpe .titulo img{width:250px;height:auto;}

#gpe .barra{background-color:var(--verde);height:20px;width:100%;margin:none;}

#gpe .consignas{background-image:url('https://i.imgur.com/C0J85xZ.png');background-size:100% auto;padding:15px;padding-left:12%;margin:0px;}

#gpe .nombre{background-image:url('https://i.imgur.com/4qxhJmX.png');background-size:300px auto;background-repeat: repeat;background-color:var(--amarillo);background-blend-mode:multiply;clip-path:polygon(0% 100%, 0% 0%, 100% 0%, 97% 10%, 100% 20%, 97% 30%, 100% 40%, 97% 50%, 100% 60%, 97% 70%, 100% 80%, 97% 90%, 100% 100%);position:relative;}

#gpe .num, #gpe .consigna{display:table-cell;vertical-align:middle;}

#gpe .num{background-color:var(--morado);width:50px;line-height:70px;text-align:center;font-size:2em;}

#gpe .consigna{padding:10px 10px;font-size:1.3em;padding-right:1%;-webkit-hyphens:none!important;hyphens:none!important;width:90%;}

#gpe .txt{padding:10px;text-align:justify;}

#gpe .cred{background-color:var(--verde);margin:none;font-size:.8em;padding:7px;text-align:right;letter-spacing:1px;}

#gpe .cred a, #gpe .cred a:hover, #gpe .cred a:active, #gpe .cred a:visited{color:#efefef;}

#gpe .portada{margin-top:30px;margin-bottom:15px;text-align:center;position:relative;}

#gpe .cinta{background-image:url('https://i.imgur.com/Z4Ls9AZ.png');width:100px;height:100px;background-position:center;background-size:100% auto;position:absolute;}

#gpe img.alto{height:400px;width:auto;}

#gpe img.ancho{max-width:300px;height:auto;width:100%;}

#gpe img.alto + .arriba{top:-20px;right:50px;}

#gpe img.alto + .arriba + .abajo{bottom:-20px;left:50px;}

#gpe img.ancho + .arriba{top:-20px;right:40px;}

#gpe img.ancho + .arriba + .abajo{bottom:-20px;left:40px;}

@media (max-width:640px){
  #gpe .lateral, #gpe .titulo{display:block;margin:auto;}
  
  #gpe .lateral{width:150px;}
  
  #gpe .circulo{height:150px;}
  
  #gpe .circulo img{width:100px;}
  
  #gpe .titulo{margin-top:15px;}
  
  #gpe .titulo img{height:110px;width:auto;}
  
  #gpe .arriba{right:10px!important;}
  
  #gpe .abajo{left:10px!important;}
  
   #gpe .num{padding-right:7px;padding-left:7px;}
}

@media (max-width:500px){
  #gpe .portada img{width:90%;height:auto;}
  
  #gpe .arriba{right:-10px!important;}
  
  #gpe .abajo{left:-10px!important;}
  
  #gpe .num{padding-right:7px;padding-left:7px;}
}
              
            
!

JS

              
                
              
            
!
999px

Console