"Model News/Blog"
Bootstrap 3.3.0 Snippet by pablocorezzola

<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; } }

Related: See More


Questions / Comments: