Cronología #1

<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
<style>.cc1 { width: 380px; padding: 10px; background: #dbd7bc; margin: 0 auto; overflow: hidden; font-family: calibri, arial, helvetica, sans-erif; font-size: 11px; color: #6b6b73; border-top: 10px solid #53737e; border-bottom: 10px solid #53737e; } .cc1 a { text-decoration: none; color: #53737e;} .cc1 em, .cc1 i { color: #989da0; } .cc1 b, .cc1 strong { color: #53737e; letter-spacing: 1px; } .cc-title { height: 140px; padding: 5px; background-image: url("http://zupimages.net/up/17/40/igj3.jpg"); background-size: 100%; background-position: 0px 350px; color: #fff; margin-bottom: 5px; } .cc-title>div { height: 140px; text-align: center; display: flex; justify-content: center; align-items: center; width: 100%; overflow: hidden;position: relative; } .cc-crono { text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-size: 20px; } .cc-crono span { display: block; height: 2px; width: 100%; background: #fff; transition: 2s; } .cc-crono div { margin: 2px 0; transition: 2s; } .cc-title:hover .cc-crono div { transform: translate(300px, 0); } .cc-title:hover span { transform: translate(-300px, 0); } .cc-quote { position: absolute; padding: 5px; transform: scale(0); transition: 2s; transition-delay: 0.2s; } .cc-title:hover .cc-quote { transform: scale(1); } .cc-presen { display: flex; flex-wrap: wrap; margin-bottom: 10px; margin-top: 5px; justify-content: space-between; align-items: center; } .cc-avatar { width: 105px; height: 105px; overflow: hidden; } .cc-avatar img { width: 150px; filter: sepia(40%); margin-top: -40px; margin-left: -20px; } .cc-text { width: 265px; text-align: justify; overflow: auto; } .cc-content { display: flex; flex-wrap: wrap; justify-content: space-between; } .cc-cuadro { padding: 5px; background-image: url("http://zupimages.net/up/17/40/igj3.jpg"); background-size: cover; background-position: center; } .cc-cuadro>div { background: #fff; padding: 10px; overflow: auto; } .cc-cuadro span { display: block; border: 1px solid #dbd7bc; padding: 5px 10px; margin-bottom: 5px; text-align: center; } .current { width: 175px; margin-bottom: 5px; } .current>div { height: 140px; text-align: justify; } .titre { display: block; height: 20px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; text-align: center; font-size: 18px; background-image: url("http://zupimages.net/up/17/40/igj3.jpg"); -webkit-background-clip: text;  -webkit-text-fill-color: transparent; background-position: center bottom; } .finis { width: 370px; } .finis>div { height: 80px; display: flex; flex-wrap: wrap; justify-content: space-around; } .finis span { width: 140px; height: 13px; } .creditscc1 { text-align: center; font-size: 12px;} .creditscc1 a {text-decoration: none; color: #53737e;} </style>
<div class="cc1"><div class="cc-title"><div><div class="cc-crono"><span></span><div>mi cronología</div><span></span></div><div class="cc-quote">« La conscience, c’est le chaos des chimères, des convoitises et des tentatives, la fournaise des rêves, l’antre des idées dont on a honte. »</div></div></div><span class="titre">sobre mi personaje</span><div class="cc-presen"><div class="cc-avatar"><img src="http://zupimages.net/up/17/40/logo.jpg" alt="avatar del personaje" /></div><div class="cc-text">Este <em>hobbit</em> era un hobbit acomodado, y se apellidaba <strong>Bolsón</strong>. Los Bolsón habían vivido en las cercanías de La Colina desde hacía <em>muchísimo</em> tiempo, y la gente los consideraba muy <strong>respetables</strong>, no sólo porque casi todos eran ricos, sino también porque nunca tenían ninguna <strong>aventura</strong> ni hacían algo <em>inesperado</em>: uno podía saber lo que diría un Bolsón acerca de cualquier asunto sin necesidad de preguntárselo. </div></div><div class="cc-content"><div><span class="titre">Busco</span><div class="cc-cuadro current"><div>En un agujero en el suelo, vivía un <em>hobbit</em>. No un agujero húmedo, sucio, repugnante, con restos de gusanos y olor a fango, ni tampoco un agujero seco, desnudo y arenoso, sin nada en que sentarse o que comer: era un agujero-hobbit, y eso significa <strong>comodidad</strong>.
       Tenía una puerta redonda, <em>perfecta</em> como un ojo de buey, pintada de verde, con una manilla de bronce dorada y brillante, justo en el medio. La puerta se abría a un <strong>vestíbulo cilíndrico</strong>, como un túnel: un <em>túnel muy cómodo</em>, sin humos, con paredes revestidas de madera y suelos enlosados y alfombrados, provisto de sillas barnizadas, y montones y montones de perchas para sombreros y abrigos; el hobbit era aficionado a las <strong>visitas</strong>. </div></div></div><div><span class="titre">temas actuales</span><div class="cc-cuadro current"><div><span><marquee scrolldelay="150" onmouseover="this.stop();" onmouseout="this.start();"><a href="" target="_blank">www</a> - título <em>feat </em></marquee></span><span><marquee scrolldelay="150" onmouseover="this.stop();" onmouseout="this.start();"><a href="" target="_blank">www</a> - título <em>feat </em></marquee></span><span><marquee scrolldelay="150" onmouseover="this.stop();" onmouseout="this.start();"><a href="" target="_blank">www</a> - título <em>feat </em></marquee></span></div></div></div><div><span class="titre">temas acabados</span><div class="cc-cuadro finis"><div><span><marquee scrolldelay="150" onmouseover="this.stop();" onmouseout="this.start();"><a href="" target="_blank">www</a> - título <em>feat </em></marquee></span><span><marquee scrolldelay="150" onmouseover="this.stop();" onmouseout="this.start();"><a href="" target="_blank">www</a> - título <em>feat </em></marquee></span><span><marquee scrolldelay="150" onmouseover="this.stop();" onmouseout="this.start();"><a href="" target="_blank">www</a> - título <em>feat </em></marquee></span><span><marquee scrolldelay="150" onmouseover="this.stop();" onmouseout="this.start();"><a href="" target="_blank">www</a> - título <em>feat </em></marquee></span><span><marquee scrolldelay="150" onmouseover="this.stop();" onmouseout="this.start();"><a href="" target="_blank">www</a> - título <em>feat </em></marquee></span><span><marquee scrolldelay="150" onmouseover="this.stop();" onmouseout="this.start();"><a href="" target="_blank">www</a> - título <em>feat </em></marquee></span></div></div></div></div></div><div class="creditscc1"><a href="https://gotheim-work.tumblr.com/">♔</a></div>