Tarjeta INFORMACION

Cuadro para insertar en nuestro Blog PUNTOS BIOGRAFICOS el cual es responsive muy atractivo.

See the Pen Info card by Jesús Aguilera (@jaguilera) on CodePen.

CODIGO HTML

<div class="row"> <div class="col-xs-12"><div class="cardB"> <div class="card-image"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ZnEzwvWQKZlG4ZRzuodAiD8Uh6I8TgnLFm4pXUArOc75QTzpuhdhS_UmgwSi3oYIMPoA-Zgoh9XOC9qorxzzTTe0cN3hN_kY8HNu5UxURDm8Y7MdEweKCvsXnIzzjPnGUVEWANyYdfQu3wPMRB4ubW33VFrXg5ePjX_39Ty_iTh9FqUSGOOK6peZx7k/s16000/Bibliografia.png" /></div> <div class="card-modal"></div><div class="card-info"> <div class="name"><p>BIBLIOGRAFÍA</p></div> <div class="social-network"> <a href="#" class="icon youtube"><i class="fa fa-youtube"></i></a> <a href="#" class="icon twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="icon facebook"><i class="fa fa-facebook"></i></a> </div> <hr> <div class="content"> <ul style="text-align: left;"> <li><span style="font-size: xx-small;"> <b>( 1 )</b> 1123 según Bouter. - Diago dice Lib. VI cap. XVIII que en 1124. - Zurita id. y Escolano que en 1125. Lib. III. cap. I. num. V. </span></li> <li><span style="font-size: xx-small;"> <b>( 2 )</b> La población de esta época , fuera de la Villa vieja, apenas llegaba à la plaza hoy de Ramiro, faldeando la montaña , pues la parte baja estaba plantada de jardines que se regaban con norias , de las que aun existen varios pozos en la moderna calle de Labradores. </span></li> <li><span style="font-size: xx-small;"> <b>( 3 )</b> Escolano , Lib . III . cap . H. - Zurita , Lib . H. cap . X. - Zurita , Lib . II . cap . XVII . </span></li> <li><span style="font-size: xx-small;"> <b>( 4 )</b> Diago . Lib . VI . cap . XXIV . </span></li> <li><span style="font-size: xx-small;">  <b>( 5 )</b> Así lo refiere el rey D. Jaime en su crónica , según el Dean Bendicho , folio 224 vuelto , y Ramon Moutaner en el cap . XII trae textualmente las palabras con que el rey D. Alonso el sabio confirmó esta concordia , hablando con su suegro el rey D. Jaime , de este modo: "<i><b>Pase be tadils que vos me prometes com me donas vostra filla per muller quem ayudareis á conquisir lo regne de Murcia é es veritat ά que en lo dil Regne , auets vos bona part que en la vostra conquista é Alacant é Elx , é vall delda é Asp é Petrer é Clivillent</b></i>" etc. </span></li> <li><span style="font-size: xx-small;"> <b>( 6 )</b> Marmol , Lib . 11. cap . XXVI . - Diago , Lib . VI . cap . XXVI.— Beuter , Lib . II . cap . XX . - Zurita , Lib . 11. cap . LXI . Samuel Bouchard . Paralelo histór . pag . 186 y siguientes . - Anon . gen . Corcordancia cri- tica , folios 104 y 106 . </span></li> <li><span style="font-size: xx-small;">  <b>( 7 )</b> Bend. Cron. ined. de Alic. folio 224. Este general acaudillaba los moros en la célebre cuanto exagerada batalla de las Navas de Tolosa dada a 16 de julio de 1112, y en conmemoración de la victoria de los cristianos en ella, se instituyó la fiesta del triunfo de la Cruz en igual día. </span></li></ul> </div></div></div></div></div>

CODIGO CSS

/* BIBLIOGRAFIA */ @import url("//fonts.googleapis.com/css?family=Lato:400,300,100"); @import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css"); /* Card */ .cardB { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VjZjBmMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ecf0f1)); background-image: -moz-linear-gradient(top, #ffffff 0%, #ecf0f1 100%); background-image: -webkit-linear-gradient(top, #ffffff 0%, #ecf0f1 100%); background-image: linear-gradient(to bottom, #ffffff 0%, #ecf0f1 100%); -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); display: block; position: relative; padding: 20px; } .cardB .card-modal { -moz-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #bdc3c7; color: white; display: none; position: absolute; top: 40px; left: 130px; z-index: 2; padding: 20px; } .cardB .card-modal.active { left: 140px; } .cardB .card-modal:before { content: ""; border-style: solid; border-width: 15px 15px 15px 0; border-color: transparent #bdc3c7 transparent transparent; width: 0; height: 0; display: block; position: absolute; top: 20%; left: -15px; } .card-image img { position: absolute;display: block; width: 100px !important; height: 150px !important; top: 120px; left: 20px; } .cardB .card-info { margin-left: 120px; } .cardB .card-info .name { font-size: 2vw; font-weight: 100; display: inline-block; vertical-align: top; position: relative; color: #A9F5F2; text-shadow: 0 1px 0 #000, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } .cardB .card-info .social-network { font-size: 0; display: inline-block; vertical-align: top; overflow: hidden; margin-bottom: 15px; } @media (min-width: 639px) { .cardB .card-info .social-network { float: right; margin: 5px 0 0; } } .cardB .card-info .social-network .icon { background-color: #bdc3c7; border: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 32px; height: 32px; display: inline-block; vertical-align: top; overflow: hidden; position: relative; margin-left: 10px; } .cardB .card-info .social-network .icon:first-child { margin: 0; } .cardB .card-info .social-network .icon:before { -moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; content: ""; width: 32px; height: 32px; display: block; position: absolute; top: 0; left: 0; z-index: 1; } .cardB .card-info .social-network .icon.facebook:before { border: rgba(59, 89, 152, 0.7) 0 solid; } .cardB .card-info .social-network .icon.facebook:hover:before { border-width: 30px; } .cardB .card-info .social-network .icon.twitter:before { border: rgba(15, 191, 242, 0.7) 0 solid; } .cardB .card-info .social-network .icon.twitter:hover:before { border-width: 30px; } .cardB .card-info .social-network .icon.youtube:before { border: rgba(179, 18, 23, 0.7) 0 solid; } .cardB .card-info .social-network .icon.youtube:hover:before { border-width: 30px; } .cardB .card-info .social-network .icon i { color: white; font-size: 16px; text-align: center; width: 100%; height: 100%; position: absolute; top: 50%; z-index: 1; margin-top: -7px; } .cardB .card-info hr { margin: 0 0 15px; }

REALIZADO POR:  Jesús Aguilera

ORIGEN DE LA ENTRADA: https://codepen.io/jaguilera/pen/WNaNNW