Skip to main content
Aviso eliminado Atraer atención por Valentina
Recompensa finalizada con Publisere.com's answer elegida por Valentina
Aviso añadido Atraer atención por Valentina
Recompensa iniciada por un valor de 100 de reputación por Valentina
se añadieron 8780 caracteres en el cuerpo
Origen Enlace
.fivebg-columnsdark-1 {
    background-color: #1A1A1A;
}
.module-1 {
    display: flex;
    flex: 1;
}
.col-flowcover-five {
    flex: row1;
 wrap;   order: 1;
}
.columncol-itemflex {
    flexdisplay: flex;
}
.col-basis1 {
    display: 19%;flex;
    flex: 2;
    flex-growdirection: 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.5%5em !important;0;
}
.date-text ul li {
 min   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: 240px;100%;
    position: relative;
    display: flex;
}
.thumbnail-left.max img {
    max-height: 12em;
    max-width: 50em;
}
.post-content-x2 {
    padding-left: 15px;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: chocolate;#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="five-columns">
        <div class="column-item">1</div>
        <div class="column-item">2</div>
        <div class="column-item">3</div>
        <div class="column-item">4</div>
        <div class="column-item">5</div>
    </div><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 una que deba seralgunos aspecto del diseño, tener 3 filas de imágenes más grande quepequeñas y las demásdos más grandes, como este diseñomediante 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íintroducir la descripción de la imagen aquí

¿Qué cambios se debe emplear?

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>
.five-columns {
    display: flex;
    flex-flow: row wrap;
}
.column-item {
    flex-basis: 19%;
    flex-grow: 1;
    margin: 0.5% !important;
    min-width: 240px;
    padding: 15px;
    background-color: chocolate;
}
    <div class="five-columns">
        <div class="column-item">1</div>
        <div class="column-item">2</div>
        <div class="column-item">3</div>
        <div class="column-item">4</div>
        <div class="column-item">5</div>
    </div>

No obstante lo que deseo lograr es crear unas cuadriculas de 5, a excepción de una que deba ser más grande que las demás, como este diseño:

introducir la descripción de la imagen aquí

¿Qué cambios se debe emplear?

.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>
Publicación recuperada por Valentina
Publicación eliminada por Valentina
se eliminaron 299 caracteres en el cuerpo
Origen Enlace

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%.

La idea principal que se adapte esta funcionando correctamente se la puede observar cambiando la resolución de pantalla:

.five-columns {
    display: flex;
    flex-flow: row wrap;
}
.column-item {
    flex-basis: 19%;
    flex-grow: 1;
    margin: 0.5% !important;
    min-width: 240px;
    padding: 15px;
    background-color: chocolate;
}
    <div class="five-columns">
        <div class="column-item">1</div>
        <div class="column-item">2</div>
        <div class="column-item">3</div>
        <div class="column-item">4</div>
        <div class="column-item">5</div>
    </div>

Deseo poder obtener estos 4 diseños que modificaciones flexbox se le tieneNo obstante lo que agregar adicional paradeseo lograr lo conseguido flex 1 10% o order he buscando muchos ejemplos en la web pero la mayoría se basanes crear unas cuadriculas de 5, a loexcepción de una que ya dispongo.deba ser más grande que las demás, como este diseño:

Como puedo obtener estos diseños como se muestran en la siguiente images:introducir la descripción de la imagen aquí

¿Qué cambios se debe emplear?

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%.

La idea principal que se adapte esta funcionando correctamente se la puede observar cambiando la resolución de pantalla:

.five-columns {
    display: flex;
    flex-flow: row wrap;
}
.column-item {
    flex-basis: 19%;
    flex-grow: 1;
    margin: 0.5% !important;
    min-width: 240px;
    padding: 15px;
    background-color: chocolate;
}
    <div class="five-columns">
        <div class="column-item">1</div>
        <div class="column-item">2</div>
        <div class="column-item">3</div>
        <div class="column-item">4</div>
        <div class="column-item">5</div>
    </div>

Deseo poder obtener estos 4 diseños que modificaciones flexbox se le tiene que agregar adicional para lograr lo conseguido flex 1 10% o order he buscando muchos ejemplos en la web pero la mayoría se basan a lo que ya dispongo.

Como puedo obtener estos diseños como se muestran en la siguiente images:

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%.

.five-columns {
    display: flex;
    flex-flow: row wrap;
}
.column-item {
    flex-basis: 19%;
    flex-grow: 1;
    margin: 0.5% !important;
    min-width: 240px;
    padding: 15px;
    background-color: chocolate;
}
    <div class="five-columns">
        <div class="column-item">1</div>
        <div class="column-item">2</div>
        <div class="column-item">3</div>
        <div class="column-item">4</div>
        <div class="column-item">5</div>
    </div>

No obstante lo que deseo lograr es crear unas cuadriculas de 5, a excepción de una que deba ser más grande que las demás, como este diseño:

introducir la descripción de la imagen aquí

¿Qué cambios se debe emplear?

Origen Enlace

¿Cómo crear cajas de diseño responsive flexboox?

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%.

La idea principal que se adapte esta funcionando correctamente se la puede observar cambiando la resolución de pantalla:

.five-columns {
    display: flex;
    flex-flow: row wrap;
}
.column-item {
    flex-basis: 19%;
    flex-grow: 1;
    margin: 0.5% !important;
    min-width: 240px;
    padding: 15px;
    background-color: chocolate;
}
    <div class="five-columns">
        <div class="column-item">1</div>
        <div class="column-item">2</div>
        <div class="column-item">3</div>
        <div class="column-item">4</div>
        <div class="column-item">5</div>
    </div>

Deseo poder obtener estos 4 diseños que modificaciones flexbox se le tiene que agregar adicional para lograr lo conseguido flex 1 10% o order he buscando muchos ejemplos en la web pero la mayoría se basan a lo que ya dispongo.

Como puedo obtener estos diseños como se muestran en la siguiente images: