<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
<div class="row">
<!-- HEADER -->
<div class="header">
<img style="width:100%" src="http://www.limontasport.com/wp-content/uploads/2016/03/limonta-sport-slider-1-2-1800x720.jpg" />
<div class="triangulo"></div>
<div class="profile">
<img class="photo-author img-circle" src="http://www.bordeaux-tourism.co.uk/var/ezwebin_site/storage/images/media/images/regards-bordelais/jean-poutge/profil-jean/12599-2-fre-FR/Profil-Jean_format_360x360.jpg" />
<span class="name-author">por Rubén Garcia</span>
</div>
<h5 class="sub-title">DEPORTES</h5>
<h2 class="title">El estadio más impactante del mundo...</h2>
</div>
<!-- INFO -->
<div class="row">
<div class="col-xs-12">
<h4 style="line-height: 25px;">Tiene capacidad para 150.000 personas, sorprende a todo el mundo y no es el Santiago Bernabéu del Real Madrid, ni el Old Trafford del Manchester United, ni el Camp Nou del FC Barcelona.</h4>
</div>
</div>
<div class="row row-eq-height" style="padding-right:15px">
<div class="col-xs-9 text">
<p>El estadio de fútbol más grande del mundo es el Reungrado Primero de Mayo, ubicado en Pionyang, capital de la república socialista de Corea del Norte.</p>
<p>Su edificación empezó en el año 1980. Nueve años después, concretamente el 1 de mayo de 1989, se abrió al público.</p>
<p class="semi-title">Tamaño y diseño</p>
<p>El área del inmueble es de 207.000 metros cuadrados, con un total de ocho pisos, y puede albergar a 150.000 personas.</p>
<p>El techo posee 16 arcos que emulan los pétalos de una flor, y el césped es natural. También cuenta con una piscina y saunas.</p>
<p>En él no solo se llevan a cabo partidos de fútbol y competencias de atletismo (dispone de una pista de 400 metros), sino festivales artísticos, así como eventos del Partido de los Trabajadores, que gobierna el país desde 1948. </p>
<p>Dentro de las actividades que se realizan destaca el Festival Arirang, que incluye espectáculos de circo, música, gimnasia y danza.</p>
<p>Según la agencia EFE, este festival se celebra desde 2002 para recordar el nacimiento del líder fundador de Corea del Norte, Kim Il-sung.</p>
<p class="semi-title">Remodelación</p>
<p>En 2014, el estadio fue remodelado y el año pasado reabrió sus puertas. </p>
<p>De acuerdo con el diario inglés The Guardian, entre las renovaciones están nuevos vestuarios, equipo de fisioterapia, salas de juntas y un centro de medios. </p>
</div>
<!-- Sidebar // advertising -->
<div class="col-xs-3 side">
<img style="max-width: 100%" src="http://youthnesia.id//assets/img/images/Advertise-here.png" alt="Photograph" />
<small>
<p style="margin-bottom:0px;"><b>Estadísticas</b></p>
<div class="statistics">
<p><span class="label label-default">Visitas 2550</span></p>
<p><span class="label label-default">Comentarios 15</span></p>
<p><span class="label label-default">Compartido 50 veces</span></p>
<p><span class="label label-default">Me gusta 20</span></p>
</div>
<p style="margin-bottom:0px;margin-top:25px;"><b>Noticias importantes</b></p>
<ul class="list-group">
<li class="list-group-item"><big><b>1.</b></big> Cras justo odio</li>
<li class="list-group-item"><big><b>2.</b></big> Dapibus ac facilisis in</li>
<li class="list-group-item"><big><b>3.</b></big> Morbi leo risus</li>
<li class="list-group-item"><big><b>4.</b></big> Porta ac consectetur ac</li>
<li class="list-group-item"><big><b>5.</b></big> Vestibulum at eros</li>
</ul>
</small>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body{font-family: 'Open Sans', sans-serif;}
.header{position:relative;overflow:hidden;max-height:350px;display:flex;align-items:center;justify-content:center}
.text{
/*-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; */
margin-top:15px;
}
.statistics > p{margin-bottom:2px;}
.statistics > p > span.label{background-color:white;color:gray;}
.side{background:#fafafa;padding-top:15px}
.side > img { margin-bottom:15px;}
.semi-title{font-weight: bold;margin-top:30px;}
.title{
position: absolute;
bottom: 45px;
padding: 7px;
right: 25px;
padding-left: 25px;
padding-right: 30px;
color: white;
background: rgba(0,0,0,0.5);
}
.sub-title{
position: absolute;
bottom: 94px;
padding: 7px;
right: 25px;
padding-left: 12px;
padding-right: 12px;
color: orange;
background: rgba(0,0,0,0.7);
}
.name-author{
position: absolute;
bottom: 35px;
left: 100px;
font-size: 11px;
color: white;
background: black;
padding: 2px;
padding-right: 10px;
padding-left: 22px;
margin-left: -21px;
z-index: 1;
font-weight: 500;
}
.photo-author{
max-height: 70px;
padding: 2px;
position: absolute;
left: 25px;
bottom: 25px;
background: white;
z-index: 3;
}
.triangulo{
position:absolute;
bottom:0px;
left:0px;
width: 0;
height: 0;
border-style: solid;
border-width: 60px 0 0 1200px;
border-color: transparent transparent transparent #ffffff;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 426px) {
.header{
margin-left: -15px;
margin-top: -15px;
margin-right: -15px;
}
.title{
font-size:15px;
bottom:-12px;
right:0px;
padding-left:10px;
padding-right:10px;
}
.photo-author{
max-height:45px;
left:5px;
bottom:40px;
}
.name-author{
font-size:9px;
margin-left:-63px;
bottom:44px;
}
.sub-title{
right:0px;
bottom:18px;
padding:5px;
font-size:10px;
}
}
