<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Contenido del autor</title>
</head>
<body>
<div class="container-fluid">
<div class="bg-dark p-3 text-center">
<h2 class=" display-4 p-3 text-white">Contenido para entradas</h2>
<span class="display-6 p-3 text-white">Este diseño contiene Flexbox usado directamente de Bootstrap</span>
</div>
</div>
<br><br>
<div class="container">
<div class="autor-biografia">
<img class="lazy avatar-autor img-fluid rounded" data-toggle="tooltip" data-placement="top" data-original-title="Miguel92" data-src="http://portfolio2017.skn1.com/oficial/wp-content/themes/oficial-premium/assets/image/favicon.png">
<div class="autor-info">
<h3> Autor: <a href="http://www.portfolio2017.skn1.com/oficial/" target="_blank">Miguel92</a></h3>
<p class="alert alert-success">Me gusta todo lo que es el diseño de páginas web, la programación web y otros lenguajes de programación</p>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Entradas totales
<span class="badge badge-primary badge-pill">25</span>
</li>
</ul>
<ul class="autor-enlaces">
<li class="autor_web"><a href="http://portfolio2017.skn1.com/oficial" data-toggle="tooltip" data-placement="top" title="Mi web"><i class="fa fa-globe fa-fw"></i></a></li>
<li class="autor_fb"><a href="https://facebook.com/joelmiguel.valente" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook-f fa-fw"></i></a></li>
<li class="autor_tw"><a href="https://twitter.com/JMiguelV06" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter fa-fw"></i></a></li>
<li class="autor_yt"><a href="https://www.youtube.com/user/xxxtheymmm" data-toggle="tooltip" data-placement="top" title="Youtube"><i class="fa fa-youtube fa-fw"></i></a></li>
<li class="autor_is"><a href="https://www.instagram.com/jvalentem92/'" data-toggle="tooltip" data-placement="top" title="Instagram"><i class="fa fa-instagram fa-fw"></i></a></li>
<li class="autor_li"><a href="https://www.linkedin.com/in/jmiguelv92/" data-toggle="tooltip" data-placement="top" title="Linkedin"><i class="fa fa-linkedin fa-fw"></i></a></li>
<li class="autor_gh"><a href="https://github.com/joelmiguelvalente" data-toggle="tooltip" data-placement="top" title="GitHub"><i class="fa fa-github fa-fw"></i></a></li>
<li class="autor_bh"><a href="https://www.behance.net/joel920892" data-toggle="tooltip" data-placement="top" title="Behance"><i class="fa fa-behance fa-fw"></i></a></li>
<li class="autor_cp"><a href="https://codepen.io/Miguel9217/" data-toggle="tooltip" data-placement="top" title="Code Pen"><i class="fa fa-codepen fa-fw"></i></a></li>
</ul>
</div><!-- .autor-info-->
</div><!-- .autor-biografia-->
<br><hr><br>
<div class="row">
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora, nulla nesciunt a laudantium adipisci labore veritatis rerum dolor iste aperiam, alias at dolorem nobis in facilis atque ipsa obcaecati. Natus voluptatem numquam cumque ullam harum provident corporis alias itaque aspernatur adipisci error autem voluptatibus quaerat, sed praesentium illum, aliquam aliquid. Atque quam, impedit facere ex, culpa accusantium, voluptas quis similique aliquam necessitatibus pariatur eum omnis et voluptatibus corrupti. Aperiam excepturi, rerum dolore et iusto nam. Perferendis at, laborum totam ex assumenda culpa nam eos commodi natus sit, modi odio, possimus ab! Quod, voluptates. Dolor quidem nesciunt, iure blanditiis illo, perferendis optio nemo architecto ipsam! Itaque sit repellat autem unde, quis? At porro vel reprehenderit, temporibus neque molestiae quam. Nemo sunt maxime quae molestias, porro eius cupiditate laboriosam nisi, dolorum repellat, vel sed. Vitae quia sapiente aut atque corporis officia, nulla quod assumenda illo neque, necessitatibus totam error doloribus impedit dolores aperiam dolorum repellendus alias itaque harum! Quod doloremque molestias odio ea sequi vero, debitis sint nulla nihil, excepturi ex modi odit nesciunt architecto! Voluptatem, tempore, ratione. Distinctio doloribus, sequi quis dignissimos ipsam unde ut, autem natus, eligendi ipsa pariatur ea vero nesciunt! Temporibus recusandae ipsa dolor impedit ducimus maxime pariatur, nobis perspiciatis consequatur error, optio distinctio dolorum modi eius, eos voluptates voluptate quam! Ipsum delectus non corporis laborum iste sint culpa, earum explicabo, at porro voluptates recusandae a aut aliquam. Pariatur asperiores iure, esse distinctio non eligendi accusantium suscipit ex nobis magni obcaecati aut. Itaque unde, minus ratione neque facilis fuga quam ipsa. Similique facere, omnis sed? Repellendus ut placeat adipisci soluta, totam voluptas culpa dolores deleniti accusamus deserunt illo hic, non optio quibusdam nesciunt explicabo. Iure blanditiis beatae quia laborum a ad repellendus dicta quam dolorem rem odio odit iusto, eveniet eligendi eaque explicabo nemo reprehenderit temporibus fugiat ullam dolorum ex! Deserunt aspernatur dolor quisquam qui, ut minima iste ipsam, mollitia commodi magnam, non reiciendis porro aperiam! Distinctio quibusdam natus, optio nostrum corporis. Dolores, nihil et. Deserunt atque deleniti voluptatibus excepturi veniam maiores tempore sequi aliquam quos aspernatur in, dolore velit ex, dicta dolor debitis, sint vitae nulla. Perspiciatis, odit debitis voluptas veniam nobis natus, tempora adipisci nulla dignissimos, odio tenetur rerum qui corporis ad voluptatibus? Iure tempore id labore, sapiente similique, error rem ratione omnis velit facere temporibus, cumque, at possimus minus enim eligendi blanditiis corrupti! Aut, quod ipsam laboriosam illo quae iusto, tenetur! Soluta aperiam officia ratione, eaque provident dignissimos illo maxime totam! Officia assumenda non ipsam incidunt alias commodi molestias quam obcaecati iusto beatae quas sed, unde fuga corporis odit possimus corrupti. Quas tempore iste pariatur quo omnis, doloribus iusto quibusdam placeat sunt commodi consectetur ducimus. Harum, in, ratione doloribus facere aliquam commodi aliquid rem veritatis repellendus, eum error sint placeat soluta iure alias quos dolore quas explicabo delectus labore! Est, corporis non cum ab amet earum, delectus sunt velit recusandae temporibus provident quibusdam. Ducimus rerum ullam eveniet obcaecati, cupiditate velit, repellat, incidunt ad eaque explicabo deleniti porro cumque excepturi corporis sunt deserunt enim maiores.
</p>
</div>
</div>
<h5 class="text-center my-3 p-3">Copyright © 2017 - Miguel92</h5>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tuupola/jquery_lazyload/2.x/lazyload.js"></script>
</body>
</html>
.autor-biografia {
width: 100%;
height: 215px;
display: flex;
padding: 6px 10px;
background-color: #E3E8F8;
position: relative;
margin-bottom: 10px;
margin: 0 auto;
}
.autor-biografia:before,
.autor-biografia:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:500px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.autor-biografia:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.autor-info {
height: 100%;
flex: 2 1 auto;
padding: 0 5px;
}
.avatar-autor {
flex: 0 1 auto;
width: 200px;
height: 200px;
float: left;
display: inline-block;
}
.autor-biografia h3 {
border-bottom: 2px solid #008080;
padding: 0;
}
.autor-enlaces { list-style: none; }
.autor-enlaces li { display: inline-block; }
.autor-enlaces a { text-decoration: none; }
.autor-enlaces a i {
font-size: 24px;
margin: 4px 2px;
color: #333;
display: block;
line-height: 1.8em;
width: 50px;
}
@media screen and (max-width: 575px) {
.autor-biografia { height: 250px; }
.autor-enlaces a i { margin: 1px 0; font-size: 20px; width: 60px; }
}
/* EN EL CASO QUE LE QUIERAS AGREGAR COLOR */
.autor_web a { color: #333; } /* Tu página web */
.autor_fb a { color: #333; } /* Facebook */
.autor_tw a { color: #333; } /* Twitter */
.autor_yt a { color: #333; } /* Youtube */
.autor_is a { color: #333; } /* Instagram */
.autor_li a { color: #333; } /* Linkedin */
.autor_gh a { color: #333; } /* Github */
.autor_bh a { color: #333; } /* Behance */
.autor_cp a { color: #333; } /* Code Pen */
// Funciones para el tooltip
$(function () {
$('[data-toggle="tooltip"]').tooltip();
$('.lazy').lazyload();
});
