1
resposta

Como centralizar?

Como cenralizar a parte de certificações?

<section class="box-certificicoes hidden">
        <div class="certificacoes">
            <h2 class="title">Certificações</h2>
            <div class="linha-horizontal"></div>
    
            <div class="swiper-container">
                <div class="card--container swiper">
                    <div class="card--content">
                        <div class="swiper-wrapper">

                            <div class="swiper-slide">
                                <div class="card">
                                    <h3 class="title-certificacao">JavaScript: elementos no DOM</h3>
                                    <p class="certificacao-txt">Instituição: <span>Alura</span></p>
                                    <p class="certificacao-txt">Duração: <span>6 horas</span></p>
                                    <p class="certificacao-txt">Ano de conclusão: <span>24/08/2023</span></p>
                                    <p class="certificacao-txt">Certificado: <span>
                                        <a class="link-certificado" href="https://cursos.alura.com.br/user/mebuffbeka/course/javascript-manipulando-elementos-dom/formalCertificate">Clique aqui</a>
                                    </span></p>
                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="card">
                                    <h3 class="title-certificacao">Algoritmos com JavaScript II</h3>
                                    <p class="certificacao-txt">Instituição: <span>Alura</span></p>
                                    <p class="certificacao-txt">Duração: <span>10 horas</span></p>
                                    <p class="certificacao-txt">Ano de conclusão: <span>18/10/2023</span></p>
                                    <p class="certificacao-txt">Certificado: <span>
                                        <a class="link-certificado" href="https://cursos.alura.com.br/user/mebuffbeka/course/algoritmos-javascript-ii-aprofundando-ordenacao-busca/formalCertificate">Clique aqui</a>
                                    </span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    
                    <div class="swiper-button-next"></div>
                    
                    <!-- Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>                           
        </div>
    </section>
.box-certificicoes{
    height:70vh;  
    
}

.swiper-container {
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    width:80%;
    /* height:100vh; */
}

.card-container {
    padding-block:5rem;
}

.card--content{

    margin-inline: 1.75rem;
    /* border-radius: 1.25rem; */
    overflow:hidden;
}

.card {
    
    border: 3px solid var(--neon-azul);
    border-radius:5%;
    width: 200px;
    height: 240px;
    padding:1rem;
    margin-top:3rem;
    overflow:hidden;
}
.title-certificacao{
    color:var(--azul-medio);
    font-weight:400;
    position: relative;
    padding-bottom:.5rem;
}

.certificacao-txt{
    font-size:1rem;
    margin-bottom:.5rem;
}

.link-certificado{
    text-decoration:none;
    color:var(--vermelho);
}

/* Swiper class */
.swiper-pagination-bullet{
    background-color:hsl(212, 32%, 40%);
    opacity:1;
}
let swiperCards = new Swiper('.card--content', {
    loop: true,
    spaceBetween:30,
    grabCursor:true,

    pagination: {
        el: '.swiper-pagination',
        clickable:true,
        dynamicBullets:true,
    },

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    breakpoints: {
        600:{
            slidesPerView: 2,
        },
        969:{
            slidesPerView: 3,
        },
    },
})

Nessa parte em especifico:

<div class="swiper-pagination"></div>

Como colocar mais a baixo do conteudo? Segui abaixo o git: https://github.com/RebecaTI/Portfolio-Rebeca/blob/main/index.htm

O site: https://rebecati.github.io/Portfolio-Rebeca/

1 resposta

Olá Rebeca, tudo bem?

Para centralizar a parte de certificações, você pode usar a propriedade margin: auto; no CSS da classe .certificacoes. Isso fará com que a margem seja automaticamente ajustada para centralizar o elemento. Veja como ficaria:

.certificacoes {
    margin: auto;
}

Sobre a paginação do Swiper, você pode usar a propriedade margin-top para mover a paginação mais para baixo. A quantidade de pixels que você deve usar depende do quanto você quer mover para baixo. Por exemplo, se você quiser mover 20 pixels para baixo, você pode usar margin-top: 20px;. Veja como ficaria:

.swiper-pagination {
    margin-top: 20px;
}

Lembre-se de ajustar o valor de margin-top conforme a necessidade do seu layout.

Espero ter ajudado e bons estudos!