Ola tudo bão ai? eu resolvi tentar ja ir fazendo antes de ver o codigo do professor e logico que ficou muito muito diferente. vou deixar aqui o que eu fiz junto com o que o professor fez e o link para o meu github .
o que eu quero é saber se o que eu fiz ta bao ta rum ta muito ruim ou se poderia ser assim mesmo.
// comentarios sao correçoes. fiz antes do professor e agora vou corrigir e deixar comentado o que fiz q n ta igual mas ta funcionando ou n.
.contatos-form{
max-width: 50%;
// background: linear-gradient(180deg, #E8F5C8 0%, #FFFFFF 96.87%); eu fiz mas tinha uma variavel e eu esqueci
background: variaveis.$gradiente-primario;
//padding: 1rem 1.5rem 0 2rem; pra mim tava bom assim mas vou deixar o do professor
padding: 2rem 3rem;
border-radius: 2rem; // eu nem vi que tinha isso.
.titulo{ //o professor chamou pela classe titulo eu pela tag h4
@include mixins.ff-fs-cl(variaveis.$ft-titulos, 1.9rem, variaveis.$cor-secundaria); // eu coloquei a font-zise em px 31 arumei para rem para ficar igual ao professor
//font-weight: 400;
}
.infos{ //o professor chamou pela classe infos eu pela tag p
@include mixins.ff-fs-cl(variaveis.$ft-textos, 1.2rem, variaveis.$cor-primaria); // eu coloquei a font-zise em 22px arumei para rem para ficar igual ao professor
}
// daqui pra frente ta tudo muito diferente. vou deixar so o do professor e comentar o meu.
.inputs{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
align-self: stretch;
input{
border-radius: 25px;
padding: 1rem;
border: none;
}
.form-group{
width: 100%;
display: flex;
flex-direction: column;
gap: .5rem;
label{
@extend .infos;
font-weight: bold;
}
textarea{
@extend input;
}
}
.btn{
@extend input;
background: variaveis.$cor-terciaria;
margin-top: 2rem;
color: white;
font-size: 1rem;
width: 100%;
transition: .3s;
&:hover{
background: variaveis.$cor-secundaria;
}
}
}
// div {
// display: flex;
// flex-direction: column;
// padding-bottom: .5rem;
// }
// label{
// @include mixins.ff-fs-cl(variaveis.$ft-textos, 18px, variaveis.$cor-primaria);
// font-weight: 600;
// padding-bottom: .5rem;
// }
// input, textarea {
// @include mixins.ff-fs-cl(variaveis.$ft-textos, 15px, variaveis.$cor-primaria);
// border: none;
// background-color: transparent 60%;
// line-height: 2.5rem;
// }
// button{
// @include mixins.ff-fs-cl(variaveis.$ft-textos, 1.2rem, variaveis.$cor-texto-botao);
// width:487px;
// background: variaveis.$cor-secundaria;
// border-radius: 65px;
// border: none;
// cursor: pointer;
// line-height: 3rem;
// }
}