1

Tengo la siguiente estructura de diseño muy elegante en su forma de adaptarse en pantallas muy pequeñas cada columna se vuelve al 100%.

.bg-dark-1 {
    background-color: #1A1A1A;
}
.module-1 {
    display: flex;
    flex: 1;
}
.col-cover-five {
    flex: 1;
    order: 1;
}
.col-flex {
    display: flex;
}
.col-1 {
    display: flex;
    flex: 2;
    flex-direction: column;
}
.col-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.col-text {
    width: 25%;
    order: 3;
}
.text-category {
    overflow-y: scroll;
    max-height: 40em;
}
.date-text h4 {
    color: rgba(58, 134, 68, 0.9);
    font-size: .875em;
    text-transform: uppercase;
    margin: 0.5em 0;
}
.date-text ul li {
    display: block;
    margin: .5em 0;
    white-space: normal;
}
.date-text ul li a {
    color: #B7B7B7;
    font-size: .875em;
    text-decoration: none;
}

.post {
    margin: 0.7em;
    overflow: hidden;
}
.post-module-x2 {
    width: 100%;
    position: relative;
    display: flex;
}
.thumbnail-left.max img {
    max-height: 12em;
    max-width: 50em;
}
.post-content-x2 {
    padding-left: 1em;
}
/**/
.post-module {
    overflow: hidden;
}
.module-width {
    width: 390px;
}
.module-full {
    width: 100%;
}
.post-module .post-content{
    margin-top: -5px;
    width: 100%;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 200px;
}
.thumbnail img {
    width: 100%;
    object-fit: cover;
}
.pixels-img-x2 img {
    height: 200px;
}
.pixels-img-x3 img {
    height: 300px;
}
.pixels-img-x35 img {
    height: 350px;
}
.post-module .post-content p{
    font-size: 13px;
    margin-bottom: 1.5em;
}
.post-date img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 40px;
    margin-right: 10px;
}
.post-module .post-date{
    display: flex;
    align-items: center;
    margin-top: auto;
}
.thumbnail {
    position: relative;
}
.date {
    position: absolute;
    min-width: 48px;
    min-height: 48px;
    background-color: #fff;
    color: #700877;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    text-align: center;
    text-transform: uppercase;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.date * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.date span {
    display: block;
    line-height: 14px;
}
.date .month {
    font-size: 11px;
}

.post-date small{
    color: #888;
}
<div class="box module-1 bg-dark-1">
                            <div class="col-cover-five">
                                <div class="box col-flex">
                                    <div class="col-1"><div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div></div><div class="col-grid"><div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/ZGd83BY.jpg" alt="Salida de jugadores">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div><div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">18 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2>
                                        </a>
                                        <p class="result">Pablo Repetto con problemas al definir su once titular</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Hace 4 días</span>
                                        </div>
                                    </div>
                                </div></div>                                </div>
                            </div>
                            <div class="col-text">
                                <div class="text-category">
                                    <div class="date-text">
                                        <h4>Titulo Principal</h4>
                                        <ul>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

No obstante lo que deseo lograr es crear unas cuadriculas de 5, a excepción de algunos aspecto del diseño, tener 3 filas de imágenes más pequeñas y las dos más grandes, mediante el uso de flexbox es posible pero no doy con los cambios que se debe realizar para tener el siguiente aspecto:

introducir la descripción de la imagen aquí

Nota: Que los cambios que se deban realizar sea solamente en esta estructura HTML y estilo css

<div class="box col-flex">
    <div class="col-1"></div>
    <div class="col-grid"></div>
</div>
3
  • Puedes hacerlo con Media queries y haciendo el respectivo diseño en css para cada una
    – Miguel27
    Commented el 20 oct. 2020 a las 9:33
  • @Miguel27 Hola, con las media queries es para que esta sea responsiva pero ya mi código ya está, solo deseo agregar un diseño distintos a las 4 columnas.
    – Valentina
    Commented el 21 oct. 2020 a las 13:06
  • Para grillas es mucho más simple css grid
    – user128299
    Commented el 23 nov. 2020 a las 4:03

2 respuestas 2

4

Si te entendí correctamente puedes usar display: grid y grid-template-columns en el grid exterior y grid-template-columns: auto adentro un articulo de grid.

<div class="grid-container">
  <div class="grid-articulo">
    <div class="grid-articulo-container">
      <div class="grid-articulo-largo"></div>
    </div>
  </div>
</div>

Este ejemplo no tiene CSS correcto, pero muestra el grid:

.col-flex {
  display: grid;
  grid-template-columns: 50% 35% auto;
}

.col-1,
.col-grid,
.col-text {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 16px;
}


}
.grid-articulo {
  grid-template-columns: auto;
}
.grid-articulo-largo img,
.grid-articulo-medio img {
  width: 100%
}
.thumbnail {
  position: relative;
}
.date {
  position: absolute;
  min-width: 48px;
  min-height: 48px;
  background-color: #fff;
  color: #700877;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 0;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  top: 20px;
  right: 20px;
  z-index: 1;
  text-align: center;
}
.date * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.date span {
  display: block;
  line-height: 14px;
}
.date .month {
  font-size: 11px;
}
.post-date small {
  color: #888;
}
h2 {
  font-size: 18px;
}
@media only screen and (max-width:640px) {
  .col-flex {
    grid-template-columns: auto;
  }
}
<div class="box module-1 bg-dark-1">
  <div class="col-cover-five">
    <div class="box col-flex">
      <div class="col-1">
        <div class="grid-articulo grid-articulo-largo">
          <div class="thumbnail">
            <div class="date">

              <span class="day">22 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
            </a>
            <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Justo ahora</span>
            </div>
          </div>
        </div>
        <div class="grid-articulo grid-articulo-largo">
          <div class="thumbnail">
            <div class="date">

              <span class="day">22 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
            </a>
            <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Justo ahora</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-grid">
        <div class="grid-articulo grid-articulo-medio">
          <div class="thumbnail">
            <div class="date">

              <span class="day">22 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
            </a>
            <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Justo ahora</span>
            </div>
          </div>
        </div>
        <div class="grid-articulo grid-articulo-medio">
          <div class="thumbnail">
            <div class="date">

              <span class="day">18 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2>
            </a>
            <p class="result">Pablo Repetto con problemas al definir su once titular</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Hace 4 días</span>
            </div>
          </div>
        </div>
        <div class="grid-articulo grid-articulo-medio">
          <div class="thumbnail">
            <div class="date">

              <span class="day">18 </span>
              <span class="month">Nov</span>

            </div>
            <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias">
          </div>
          <div class="text-horizontal">
            <a href="#">
              <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2>
            </a>
            <p class="result">Pablo Repetto con problemas al definir su once titular</p>
            <div class="post-date">
              <span class="timestamp colr-white2">Hace 4 días</span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-text">
        <div class="grid-articulo">
          <div class="date-text">
            <h4>Titulo Principal</h4>
            <ul>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
              <li><a href="">Enlaces Resultado</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Y si quieres los artículos ocupen el 100% de la página en móvil. Puedes usar media queries:

@media only screen and (max-width:640px) {
  .col-flex {
    grid-template-columns: auto;
  }
}
5
  • Hola amigo, se observa muy bien todo, pero podemos hacer cambio solo a <div class="col-1"></div> que es donde se desea mostrar las dos imágenes más grandes, sin alterar al resto que está mostrando como lo deseo.
    – Valentina
    Commented el 26 nov. 2020 a las 2:50
  • Amiga* Los nombres de las clases son solo para explicar el propósito. Puedes renombrar a los nombres que quieres. Actualicé mi respuesta para usar los nombres de tus clases. Espero que sea lo que quieres.
    – milmal
    Commented el 26 nov. 2020 a las 5:53
  • no exactamente era el nombre de las clases, sino que los cambios de las dos imágenes grandes que van este contenedor <div class="col-1"></div> se ahí en esa clase las modificaciones para esa parte, porque los otros contenedores ya cumple su propósito ya tengo el de 3 imágenes verticales que es en: <div class="col-grid"></div> y también tengo la columna de texto col-text esos dos contenedores ya cumple su propósito, el único que no cumple es <div class="col-1"></div>
    – Valentina
    Commented el 26 nov. 2020 a las 6:52
  • en conclusión amigo, es posible que en este contenedor <div class="col-1"></div> se muestre las dos imágenes grandes tal cuál se muestra en la imagen adjuntada.
    – Valentina
    Commented el 26 nov. 2020 a las 6:54
  • Cuál es el problema con <div class="col-1"></div>? Puedes poner dos imagenes o más adentro de <div class="col-1"></div> comó te muestro en el código. Podrias dejar de decirme "amigo", ya que soy una mujer? ;)
    – milmal
    Commented el 26 nov. 2020 a las 7:25
1
+100

Cómo ya habían comentado, es mucho más simple realizarlo con css grid pero si deseas conservar las mismas reglas de estilos, simplemente solo tenías que agregar un artículo más dentro de <div class="col-1"></div> es decir dicho contenedor debe contener dos artículos y, en <div class="col-grid"></div> agregar un artículo más, en total 3 y, de esa manera siguiendo sus mismas reglas de estilos obtenemos como resultado lo deseado de la imagen posteado:

.bg-dark-1 {
    background-color: #1A1A1A;
}
.module-1 {
    display: flex;
    flex: 1;
}
.col-cover-five {
    flex: 1;
    order: 1;
}
.col-flex {
    display: flex;
}
.col-1 {
    display: flex;
    flex: 2;
    flex-direction: column;
}
.col-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.col-text {
    width: 25%;
    order: 3;
}
.text-category {
    overflow-y: scroll;
    max-height: 40em;
}
.date-text h4 {
    color: rgba(58, 134, 68, 0.9);
    font-size: .875em;
    text-transform: uppercase;
    margin: 0.5em 0;
}
.date-text ul li {
    display: block;
    margin: .5em 0;
    white-space: normal;
}
.date-text ul li a {
    color: #B7B7B7;
    font-size: .875em;
    text-decoration: none;
}

.post {
    margin: 0.7em;
    overflow: hidden;
}
.post-module-x2 {
    width: 100%;
    position: relative;
    display: flex;
}
.thumbnail-left.max img {
    max-height: 12em;
    max-width: 50em;
}
.post-content-x2 {
    padding-left: 1em;
}
/**/
.post-module {
    overflow: hidden;
}
.module-width {
    width: 390px;
}
.module-full {
    width: 100%;
}
.post-module .post-content{
    margin-top: -5px;
    width: 100%;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 200px;
}
.thumbnail img {
    width: 100%;
    object-fit: cover;
}
.pixels-img-x2 img {
    height: 200px;
}
.pixels-img-x3 img {
    height: 300px;
}
.pixels-img-x35 img {
    height: 350px;
}
.post-module .post-content p{
    font-size: 13px;
    margin-bottom: 1.5em;
}
.post-date img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 40px;
    margin-right: 10px;
}
.post-module .post-date{
    display: flex;
    align-items: center;
    margin-top: auto;
}
.thumbnail {
    position: relative;
}
.date {
    position: absolute;
    min-width: 48px;
    min-height: 48px;
    background-color: #fff;
    color: #700877;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    text-align: center;
    text-transform: uppercase;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.date * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.date span {
    display: block;
    line-height: 14px;
}
.date .month {
    font-size: 11px;
}

.post-date small{
    color: #888;
}
<div class="box module-1 bg-dark-1">
    <div class="col-cover-five">
        <div class="box col-flex">
            <div class="col-1">
                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">                  
                        <span class="day">22 </span>
                        <span class="month">Nov</span>
        
                        </div>
                            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
                        </div>
                        <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div></div>
                </div>
                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">                  
                        <span class="day">22 </span>
                        <span class="month">Nov</span>
        
                        </div>
                            <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
                        </div>
                        <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div></div>
                </div>     
            </div>
                
                
                <div class="col-grid">
                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/ZGd83BY.jpg" alt="Salida de jugadores">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div>
                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/ZGd83BY.jpg" alt="Salida de jugadores">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">18 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2>
                                        </a>
                                        <p class="result">Pablo Repetto con problemas al definir su once titular</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Hace 4 días</span>
                                        </div>
                                    </div>
                                </div>
                </div>
                </div>
                            </div>
                            <div class="col-text">
                                <div class="text-category">
                                    <div class="date-text">
                                        <h4>Titulo Principal</h4>
                                        <ul>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.