1
resposta

planos.css

O códido do planos.css está disponível junto com os asquivos baixados no inicio da aula basta adicionar no html.

caso necessitem segue o código

.planos { background-color: var(--cinza-claro);

padding-top: 3rem;
padding-bottom: 3rem;

}

.planos__titulo { color: var(--cinza-escuro); font-weight: 700; font-size: 1.5rem; font-family: var(--montserrat); text-transform: uppercase; text-align: center;

margin-bottom: 1.25rem;

}

.planos__cartoes { display: flex; flex-direction: column; align-items: center; }

.cartao { display: flex; flex-direction: column;

background-color: var(--branco);

width: 100%;
max-width: 300px;

margin-bottom: 2rem;

border-radius: 5px;
box-shadow: 0 2px 10px 2px #00000010;

}

.cartao__titulo { font-weight: 700; font-size: 1.5rem; text-align: center;

padding: .75rem 0;

margin-bottom: .5rem;

border-bottom: 1px solid var(--azul-claro);

}

.cartao__conteudo { padding: 0 15%; }

.cartao__preco { font-weight: 700; font-size: 3rem; text-align: center;

margin-top: 1.25rem;
margin-bottom: 1.25rem;

}

.cartao__texto { color: var(--fonte-cinza); line-height: 28px; }

.cartao__botao { font-size: 1.2rem; font-weight: 700;

width: 100%;

align-self: center;

padding: .75rem 2rem;

margin-top: 1rem;
margin-bottom: 1rem;

}

.cartao--start { color: var(--planos-cartao-start); }

.cartao--ultra { color: var(--planos-cartao-ultra); }

.cartao--mega { color: var(--planos-cartao-mega); }

.cartao__botao--start { border-color: var(--planos-cartao-start); }

.cartao__botao--ultra { border-color: var(--planos-cartao-ultra); }

.cartao__botao--mega { border-color: var(--planos-cartao-mega); }

1 resposta

Oi Carlos, tudo certo?

Muito obrigada por compartilhar seu código aqui como solução para alunos que possam estar com a mesma dúvida!

Precisando de qualquer ajuda é só postar aqui no fórum que estamos à disposição! Abraços e bons estudos! =)