Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

não estou conseguindo alinha o meu card

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Cards

por Luciano Proença Andrade
| 21.6k xp | 16 posts
Vendedor e-commerce

boa noite amigos, estou seguindoa risca a aula porem o meu card nao esta ficando como arprofessora esta passando na aula. Alguem poderia me ajudar por favor?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

<div class="card">
        <!--1° linha-->
        <div class="card__descricao">
            <!-- 1° coluna-->
            <div class="descricao">
                <h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
                <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
                <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
            </div>
            <!--2° coluna-->
            <img src="img/angular.svg" class="descriçao__imagem">
        </div>
    </div>

    <!--2° LINHA-->
    <div class="card__botoes">
        <!--1° coluna-->
        <ul class="botoes">
            <li class="botoes__item"><img src="img/Favoritos.svg" alt="favoritar livros"></li>
            <li class="botoes__item"><img src="img/Compras.svg" alt="add carrinho"></li>
        </ul>
        <!--2° coluna-->
        <a href="#" target="_blank" class="botoes__ancora" >Saiba mais</a>
    </div>
        </section>

.card{
    background-color: var(--branco);
    box-shadow:  0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 1em;
    padding: 1em;
}
.card__descricao, .card__botoes{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card__descricao{
    margin-bottom: 0.5em;
    text-align: left;
}
.descricao__titulo{
    font-weight: 700;
    color: var(--laranja);
}
.descricao__titulo-livro{
    color: var(--azul);
    font-size: 18px;
    font-weight: 700;
    margin: 0.5em;
}
.descricao__texto{
    font-size: 14px;
}
.descricao__imagem{
    width: 162px;
    height: 168px;
}
.botoes{
    display: flex;
    height: 3em;
2 respostas
solução!
por RODRIGO SILVA HARDER
| 2297.3k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Luciano, tudo bem?

O problema que você está tendo ocorre devido ao encapsulamento das informações dentro das tags <div>. No código a tag <div>que possui a classe card deve incorporar as duas linhas, mas ela só encapsula a primeira, fazendo com que os ícones e o botão de "Saiba mais" fiquem de fora do card. Para resolver esse problema precisamos mover a tag de fechamento </div> que está antes da tag <div class="card__botoes"> para o final do código antes do fechamento da tag </section>. Ficaria assim:

<div class="card">
    <!--1° linha-->
    <div class="card__descricao">
        <!-- 1° coluna-->
        <div class="descricao">
            <h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
            <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
            <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
        </div>
        <!--2° coluna-->
        <img src="img/angular.svg" class="descriçao__imagem">
    </div>

    <!--2° LINHA-->
    <div class="card__botoes">
        <!--1° coluna-->
        <ul class="botoes">
            <li class="botoes__item"><img src="img/Favoritos.svg" alt="favoritar livros"></li>
            <li class="botoes__item"><img src="img/Compras.svg" alt="add carrinho"></li>
        </ul>
        <!--2° coluna-->
        <a href="#" target="_blank" class="botoes__ancora">Saiba mais</a>
    </div>
</div>

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Luciano Proença Andrade
| 21.6k xp | 16 posts
Vendedor e-commerce

obrigado pela ajuda Rodrigo!