3

Básicamente lo que intento hacer es colocar este h2: <h2> Entrenamientos online intensivos, prácticos y de corta duración. </h2> como un título centrado al comienzo del section pero cuando lo coloco se posiciona a la izquierda o me rompe las cards de abajo y lo toma como columna en lugar de fila que es lo que quiero. Les dejo el detalle de mi código html y css donde si bien no aparece el h2 quisiera saber dónde debería colocarlo.

 /*-----------------Cards cursos------------*/

.cardCursos{
background-image: url(../img/bckcursos.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
height: 100vh;
width: 100%;
}

.fnd{
background-color: #4489a8;
z-index: 0;
width: 100%;
position: absolute;
opacity: .75;
height: 100vh;
left: 0;
}

.cardForma{
height: 100vh;
padding: 0 4em;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
z-index: 10;
}

.undiv{
perspective: 1000px;
height: 28vh;
width: 100%;
cursor: pointer;
margin: 10px;
}

.cardFront{
transform-style: preserve-3d;
height: 100%;
width: 100%;
transition: 0.5s ease;
}

.front,.cardBack{
height: 100%;
width: 100%;
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0.4em;
position: absolute;
top: 0;
bottom: 0;
backface-visibility: hidden;
}

.front{
background: #ffffff;
}

.front img{
width: 80px;
height: 80px;
}

.cardBack{
background-color: #2e2b3f;
transform: rotateX(180deg);
}

.front h3{
color: #2e2b3f;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
}

.contentC{
transform: translateZ(60px);
}

.contentC h3{
margin-top: 1em;
}

.contentC p{
font-size: 14px;
line-height: 2em;
letter-spacing: 0.02em;
padding: 0 3em;
}

.undiv:hover .cardFront{
transform: rotateX(180deg);

}
/*-----------------Fin de Cursos------------*/

@media screen and (min-width: 992px) {
.cardCursos{
    padding: 0 1em;
}

.undiv{
    flex-basis: 0 0 25%;
    max-width: 25%;
    padding: 0 1em;
}

}

@media (max-width: 1440px){ 
.cardForma{
flex-wrap: nowrap;
}
}
        <section>
            <div class="cardCursos">
                <div class="fnd"></div>
                    <div class="cardForma">
                        <div class="undiv">
                            <div class="cardFront">
                                <div class="front">
                                    <div class="contentC">
                                        <img src="../img/1.png" alt="">
                                        <h3>100% remoto</h3>
                                    </div>
                                </div>
                                <div class="cardBack">
                                    <div class="contentC">
                                        <p>Podés acceder a la plataforma desde tu compu o celular desde donde te
                                            encuentres.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="undiv">
                            <div class="cardFront">
                                <div class="front">
                                    <div class="contentC">
                                        <img src="../img/2.png" alt="">
                                        <h3>Desarrollo de habilidades</h3>
                                    </div>
                                </div>
                                <div class="cardBack">
                                    <div class="contentC">
                                        <p>Buscamos simular los espacios de trabajo lo más real posible.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="undiv">
                            <div class="cardFront">
                                <div class="front">
                                    <div class="contentC">
                                        <img src="../img/3.png" alt="">
                                        <h3>Entrenamiento por cohorte</h3>
                                    </div>
                                </div>
                                <div class="cardBack">
                                    <div class="contentC">
                                        <p>Grupos limitados con espacios de intercambio.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="undiv">
                            <div class="cardFront">
                                <div class="front">
                                    <div class="contentC">
                                        <img src="../img/4.png" alt="">
                                        <h3>Comunidad de pares</h3>
                                    </div>
                                </div>
                                <div class="cardBack">
                                    <div class="contentC">
                                        <p>Forma parte de una comunidad compuesta por mentores, profesionales y
                                            compañeros.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>

2 respuestas 2

0

No se si esque antes quieres poner un h2 o si los h3 que tienes en los cards quieres centrarlos.

Igualmente te dejo una demo aqui, tanto en los h3 como implementando un h2

 <h2 style="text-align:center">Holiii</h2>
 <section>
                <div class="cardCursos">
                    <div class="fnd"></div>
                        <div class="cardForma">
                            <div class="undiv">
                                <div class="cardFront">
                                    <div class="front">
                                        <div class="contentC">
                                            <img src="../img/1.png" alt="">
                                            <h3 style="text-align:center">100% remoto</h3>
                                        </div>
                                    </div>
                                    <div class="cardBack">
                                        <div class="contentC">
                                            <p>Podés acceder a la plataforma desde tu compu o celular desde donde te
                                                encuentres.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="undiv">
                                <div class="cardFront">
                                    <div class="front">
                                        <div class="contentC">
                                            <img src="../img/2.png" alt="">
                                            <h3>Desarrollo de habilidades</h3>
                                        </div>
                                    </div>
                                    <div class="cardBack">
                                        <div class="contentC">
                                            <p>Buscamos simular los espacios de trabajo lo más real posible.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="undiv">
                                <div class="cardFront">
                                    <div class="front">
                                        <div class="contentC">
                                            <img src="../img/3.png" alt="">
                                            <h3>Entrenamiento por cohorte</h3>
                                        </div>
                                    </div>
                                    <div class="cardBack">
                                        <div class="contentC">
                                            <p>Grupos limitados con espacios de intercambio.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="undiv">
                                <div class="cardFront">
                                    <div class="front">
                                        <div class="contentC">
                                            <img src="../img/4.png" alt="">
                                            <h3>Comunidad de pares</h3>
                                        </div>
                                    </div>
                                    <div class="cardBack">
                                        <div class="contentC">
                                            <p>Forma parte de una comunidad compuesta por mentores, profesionales y
                                                compañeros.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </section>````

<!-- language: lang-css -->

 /*-----------------Cards cursos------------*/

.cardCursos{
    background-image: url(../img/bckcursos.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    height: 100vh;
    width: 100%;
}

.fnd{
    background-color: #4489a8;
    z-index: 0;
    width: 100%;
    position: absolute;
    opacity: .75;
    height: 100vh;
    left: 0;
}

.cardForma{
    height: 100vh;
    padding: 0 4em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
}

.undiv{
    perspective: 1000px;
    height: 28vh;
    width: 100%;
    cursor: pointer;
    margin: 10px;
}

.cardFront{
    transform-style: preserve-3d;
    height: 100%;
    width: 100%;
    transition: 0.5s ease;
}

.front,.cardBack{
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0.4em;
    position: absolute;
    top: 0;
    bottom: 0;
    backface-visibility: hidden;
}

.front{
    background: #ffffff;
}

.front img{
    width: 80px;
    height: 80px;
}

.cardBack{
    background-color: #2e2b3f;
    transform: rotateX(180deg);
}

.front h3{
    color: #2e2b3f;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.contentC{
    transform: translateZ(60px);
}

.contentC h3{
    margin-top: 1em;
}

.contentC p{
    font-size: 14px;
    line-height: 2em;
    letter-spacing: 0.02em;
    padding: 0 3em;
}

.undiv:hover .cardFront{
    transform: rotateX(180deg);

}
/*-----------------Fin de Cursos------------*/

@media screen and (min-width: 992px) {
    .cardCursos{
        padding: 0 1em;
    }

    .undiv{
        flex-basis: 0 0 25%;
        max-width: 25%;
        padding: 0 1em;
    }
    
}

@media (max-width: 1440px){ 
.cardForma{
    flex-wrap: nowrap;
}
} ```
0

Solo necesitas poner el encabezado dentro de la sección, pero antes del contenedor flexible y crear la regla CSS para centrar:

/*-----------------Cards cursos------------*/

.cardCursos{
background-image: url(../img/bckcursos.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
height: 100vh;
width: 100%;
}

/* Configurar encabezado */
.cardCursos h2 {
    text-align: center;
}

.fnd{
background-color: #4489a8;
z-index: 0;
width: 100%;
position: absolute;
opacity: .75;
height: 100vh;
left: 0;
}

.cardForma{
height: 100vh;
padding: 0 4em;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
z-index: 10;
}

.undiv{
perspective: 1000px;
height: 28vh;
width: 100%;
cursor: pointer;
margin: 10px;
}

.cardFront{
transform-style: preserve-3d;
height: 100%;
width: 100%;
transition: 0.5s ease;
}

.front,.cardBack{
height: 100%;
width: 100%;
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0.4em;
position: absolute;
top: 0;
bottom: 0;
backface-visibility: hidden;
}

.front{
background: #ffffff;
}

.front img{
width: 80px;
height: 80px;
}

.cardBack{
background-color: #2e2b3f;
transform: rotateX(180deg);
}

.front h3{
color: #2e2b3f;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
}

.contentC{
transform: translateZ(60px);
}

.contentC h3{
margin-top: 1em;
}

.contentC p{
font-size: 14px;
line-height: 2em;
letter-spacing: 0.02em;
padding: 0 3em;
}

.undiv:hover .cardFront{
transform: rotateX(180deg);

}
/*-----------------Fin de Cursos------------*/

@media screen and (min-width: 992px) {
.cardCursos{
    padding: 0 1em;
}

.undiv{
    flex-basis: 0 0 25%;
    max-width: 25%;
    padding: 0 1em;
}

}

@media (max-width: 1440px){ 
.cardForma{
flex-wrap: nowrap;
}
}
<section>
    <div class="cardCursos">
                <div class="fnd"></div>
                <!-- Poner encabezado fuera del contenedor flexible -->
                <h2>Entrenamientos online intensivos, prácticos y de corta duración.</h2>
                    <div class="cardForma">
                        <div class="undiv">
                            <div class="cardFront">
                                <div class="front">
                                    <div class="contentC">
                                        <img src="../img/1.png" alt="">
                                        <h3>100% remoto</h3>
                                    </div>
                                </div>
                                <div class="cardBack">
                                    <div class="contentC">
                                        <p>Podés acceder a la plataforma desde tu compu o celular desde donde te
                                            encuentres.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="undiv">
                            <div class="cardFront">
                                <div class="front">
                                    <div class="contentC">
                                        <img src="../img/2.png" alt="">
                                        <h3>Desarrollo de habilidades</h3>
                                    </div>
                                </div>
                                <div class="cardBack">
                                    <div class="contentC">
                                        <p>Buscamos simular los espacios de trabajo lo más real posible.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="undiv">
                            <div class="cardFront">
                                <div class="front">
                                    <div class="contentC">
                                        <img src="../img/3.png" alt="">
                                        <h3>Entrenamiento por cohorte</h3>
                                    </div>
                                </div>
                                <div class="cardBack">
                                    <div class="contentC">
                                        <p>Grupos limitados con espacios de intercambio.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="undiv">
                            <div class="cardFront">
                                <div class="front">
                                    <div class="contentC">
                                        <img src="../img/4.png" alt="">
                                        <h3>Comunidad de pares</h3>
                                    </div>
                                </div>
                                <div class="cardBack">
                                    <div class="contentC">
                                        <p>Forma parte de una comunidad compuesta por mentores, profesionales y
                                            compañeros.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>

Tu Respuesta

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

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