Bom dia! Consegui fazer o card da escritora, porém ao adicionar a imagem da escritora, notei que ela ficou um pouco mais abaixo da borda do que no projeto do Figma (e diferente também da imagem do Angular, no card de cima, que está bem proxima a borda superior). Qual o comando que uso para ajustar a posição da imagem, para que ela comece mais proximo da borda superior?
Obrigado desde já
CSS
.carrossel__titulo {
color: var(--laranja);
background-color: var(--branco);
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1em 0 0.5em 0;
}
.swiper-slide img {
width: 100%;
}
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-pagination {
position: initial;
margin: 0.5em 0;
}
.card__descrição {
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
padding: 2px;
}
.card__botoes {
display: flex;
justify-content: space-between;
}
.botoes {
display: flex;
}
.card {
background: var(--branco);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
margin: 1em;
padding: 1em;
}
.descrição__titulo {
color: var(--laranja);
font-weight: 700;
}
.descrição__titulo__livro {
color: var(--azul);
font-size: 18px;
font-weight: 700;
margin: 0.5em 0;
}
.descrição__texto {
font-size: 14px;
padding-right: 28px;
}
.botoes__ancora {
background-color: var(--laranja);
padding: 1em 2.2em;
color: var(--branco);
text-decoration: none;
font-weight: 700;
}
.estrelas {
padding: 1px;
}
será que essa imagem não esta pegando 100% da linha tipo ficando acima da imagem da mulher ?? acho que isso faria fica diferente da do angular.
tenta abrir o F12 na opção de inspecionar elemento com o mouse e tentar colocar acima das estrelas se ela estiver como se fossem inline o que faria pegar 100% da linha você ja sabe por onde começar a arrumar o problema. kkkk
espero ter ajudado, ou pelo menos ter dado uma ideia de como achar o problema.
Bons estudos.
Entendi sua ideia Maycon, mas ao fazer isso, as estrelas aparecem somente no espaço que ocupam mesmo... Mas obrigado pela ideia...vou seguir tentando achar o detalhe que falta..
Amigo acho q no seu caso você colocou a imagem fora do container 'descrição', pela imagem da pra ver q você colocou acima da primeira linha então ele pega como se fosse uma linha fora da flexbox do card__descrição. Tenta colocar ele dentro da <div class="descrição">.