Entrar Ainda não tem acesso?
2
respostas

Mão na massa

Referente ao curso SASS com Vite: otimizando e modularizando seu CSS, no capítulo Trabalhando com partials e mixins no SASS e atividade Mão na massa: estilizando a home, o header e os cards

por Raynara Vitoria Ferreira da Silva
| 49.5k xp | 21 posts
//header
.cabecalho-navbar
    display: flex
    justify-content: space-around
    padding: .5rem 3rem

    img
        width: 250px
    &-lista
        display: flex
        gap: 1rem
        list-style-type: none
        align-items: center
        margin-right: 1rem
        li
            font-size: $texto
            color:$cinza-medio
            display: flex
            align-items: bottom
            a
                text-decoration: none
                color: $cinza-medio           

//banners
.banner
    height: 80vh
    display: flex
    flex-direction: column
    gap: 1rem
    padding: 2rem 0
    align-items: start
    justify-content: center
    img
        width: 100px
    .banner-conteudo
        h2
            font-size: $h2
            color: $amarelo
            font-family: $fonte
            margin-bottom: 2rem
            font-weight: 500
            span
                font-weight: bold
        p
            font-size: $texto
            color: #fff

            span
                font-weight: bold

.banner1
    background-image: url(./assets/banner-1.png)
    background-repeat: no-repeat
    background-size: 100% 100%
    padding: 2rem 25rem

.banner2
    background-image: url(./assets/banner-2.png)
    background-repeat: no-repeat
    background-size: 100% 100%
    height: 340px

    .banner-conteudo
        text-align: center
        width: 100%
        h2
            font-weight: bold
            font-size: $h3

.banner3
    margin-top: 6rem
    background-image: url('./assets/cafe-graos.png')
    background-repeat: no-repeat
    background-size: 100% 100%
    height: 400px
    

//cards
.cards
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    padding: 3rem 0
    gap: $gap-xxl
    margin-top: 3rem
    margin-bottom: 3rem
    h2
        color: $marrom-escuro
        font-size: $h3
    .card-container
        display: flex
        align-items: center
        justify-content: center
        gap: $gap-xl
        .card
            border: 1px solid $marrom-claro
            width: 350px
            height: 480px
            border-radius: .5rem
      
            &:hover
                opacity: 70%
                color: black

            img
                width: 100%
            &-conteudo
                display: flex
                flex-direction: column
                gap: $gap-medio
                padding: $padding-xl 1.5rem
            &-conteudo-titulo
                color: $marrom-escuro
                font-weight: 700
                font-size: $h5
            &-conteudo-texto
                color: $cinza-medio
                font-size: $texto-small

//produtos

.produtos
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    gap: $gap-xxl
    h2
        padding: $padding-xl
        font-size: $h4
        color: $marrom-escuro
        margin-top: 3rem
    .produto-container
        display: grid
        grid-template-columns: 1fr 1fr 1fr
        gap: $gap-xxl
        .produto
            display: flex
            flex-direction: column
            justify-content: center
            align-items: center
            width: 100%
            height: 100%
            gap: $gap-xl

            img
                width: 300px
                height: 290px
            h3
                font-size: $h5
                color: $marrom-escuro
2 respostas
por Raynara Vitoria Ferreira da Silva
| 49.5k xp | 21 posts
//contatos
.formulario
    width: 100%
    display: flex
    align-items: center
    justify-content: center
    padding: 6rem 0


    .formulario-container
        width: 650px
        display: flex
        flex-direction: column
        padding: 3rem
        border: solid 1px $cinza-claro
        border-radius: 10px
        height: 400px
        gap: 1rem

        .formulario-titulo
            color: #462E09

        form
            display: flex
            flex-direction: column
            margin: 1rem 0
            gap: 1rem

            input 
                height: 20px
                padding: .5rem
                margin: 7px 0
                width: 630px
                border: 1px solid $cinza-claro
                border-radius: 5px
                
                &::placeholder
                    color: $cinza-medio
                    font-size: 1.2rem

            select
                height: 34px
                padding: 1.2rem
                margin: 7px 0
                width: 650px
                font-size: 1.5rem
                border: 1px solid $cinza-claro
                background-color: white
                border-radius: 5px
                option
                    color: $cinza-medio
                    font-size: 1rem

        .formulario-botao
            border: none
            border-radius: 5px
            color: white
            font-size: 1.2rem
            font-weight: 700
            padding: 1.2rem
            background-color: $marrom-medio
por Victor Costa Santos
| 2272.9k xp | 4529 posts
Alura Scuba Team

Oi, Raynara! Como vai?

Agradeço por compartilhar suas reflexões e aprendizados com a comunidade Alura.

Seu código está muito bem organizado, e você aplicou os mixins e partials de forma eficiente para manter a estilização limpa e modular. Gostei de ver como você estruturou os elementos do layout com flexbox e grid, separando bem cada seção.

Continue nesse ritmo! Essa clareza na organização facilita bastante a manutenção do projeto.

Conte com o apoio do Fórum na sua jornada. A

Bons estudos!

Sucesso ✨

Imagem da comunidade