All comments

Amanda Lima•50

@amandalima1Submitted about 1 year ago

I had difficulty placing the icons and positioning them next to the text

card using html css

Mitsrael Souza•130

@M-itsPosted about 1 year ago

Você pode usar flex containers para alinhar os elementos e definir espaços entre eles. Pode ser um pouco desafiador no começo, mas compensa o esforço. Substituindo um trecho do seu código ficaria assim:

antes

section{
    background-color: hsl(216, 50%, 16%);
    padding: 20px;
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

depois

section {
    width: 300px;
    background-color: hsl(216, 50%, 16%);
    padding: 20px;    
    border-radius: 15px;
    
    //muda o display da section para um container flexível 
    display: flex;

    //indica a direção do container como coluna (vertical)
    flex-direction: column;

    //define o espaçamento entre cada elemento da section
    gap: 1.6rem;

    //sombras 
    -webkit-box-shadow: 6px 7px 25px 0px rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 6px 7px 25px 0px rgba(0, 0, 0, 0.19);
    box-shadow: 6px 7px 25px 0px rgba(0, 0, 0, 0.19);
}

Parabéns por terminar mais um desafio 🚀