Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

(SOLUÇÃO) Código PLANOS.CSS

.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
solução!

.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); }

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software