1
resposta

[Projeto] vim colocar a forma que fiz a aula

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;
        //     }
    } 	
1 resposta

Olá, Tairone, como vai?

Muito legal ver que você tomou a iniciativa de desenvolver o código antes de conferir a versão do professor. Essa é uma ótima forma de aprendizado! Obrigado por compartilhar seu código.

Sobre a estrutura que você montou, está bem organizada e funcional.

Só um detalhe: o link que você disponibilizou está retornando erro 404. Pode ser interessante verificar se ele está correto ou se o repositório está público.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)