Entrar Ainda não tem acesso?
4
respostas

[Projeto] Lista de Exercícios.5

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Lista de exercícios

por Estanislau Antonio da Silva Junior
| 52.9k xp | 175 posts

Header Css.

.container__botao:checked~.container__rotulo >.cabeçalho__menu-hamburguer {
    background-image: url("../img/Menu Aberto.svg");
}
.container__botao:checked~.container__rotulo {
    background: var(--azul-degrade);
}
.opções__botão:checked ~ .opções__rotulo > .opções__item {
    background: var(--azul-degrade);
    color: var(--branco);
}
@media screen and (min-width: 1024px) {
    .opções__item {
        padding: 2em 1em;
    }
    .lista-menu__item:hover {
        background: var(--azul-degrade);
    }
    .lista-menu__item:hover > .lista-menu__link {
        -webkit-text-fill-color: var(--branco);
        text-decoration: none;
    }
    
    }
    @media screen and (min-width: 1728px) {
        .container__link {
            display: flex;
            align-items: center;
            text-decoration: none;
        color: var(--preto);
    }
    .cabeçalho {
        padding: 0 2em;
    }
    .opções {
        margin-right: auto;
    }
    .container__texto {
        display: block;
    }
}
4 respostas
por Estanislau Antonio da Silva Junior
| 52.9k xp | 175 posts

HTML.

<div class="container">
    <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos"
            class="container__imagem container__imagem-transparente"></a>
            <a href="#" class="container__link">
                <img src="img/Compras.svg" alt="Carrinhos de compras" class="container__imagem">
                <p class="container__texto">Minha sacola</p>
            </a>
            <a href="#" class="container__link">
                <img src="img/Usuario.svg" alt="Meu perfil" class="container__imagem">
                <p class="container__texto">Meu perfil</p>
            </a>
        </div>
        <div class="carrossel__container">
            <div class="swiper">
                <!-- Additional required wrapper -->
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="img/ApacheKafka.svg"
                        alt="Livro sobre apache kafka e spring boot da alura books"></div>
                        <div class="swiper-slide"><img src="img/Liderança.svg"
                                alt="Livro sobre liderança em design da alura books"></div>
                                <div class="swiper-slide"><img src="img/Javascript.svg"
                                    alt="Livro sobre javascript assertivo da alurabooks"></div>
                                    <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia front end"></div>
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol"></div>
                <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="livro sobre acessibilidade"></div>
            </div>
por Estanislau Antonio da Silva Junior
| 52.9k xp | 175 posts

Banner.

.banner__pesquisa {
    width: 35%;
}
.banner__pesquisa::placeholder {
    background-position: 12em;
}

.banner {
    padding: 6em 0;
}

}
por Estanislau Antonio da Silva Junior
| 52.9k xp | 175 posts

Carrossel.

@media screen and (min-width:1728px) {
    .carrossel__container {
        display: flex;
        margin: 0 20vw 3em 20vw;
        align-items: center;
    }
    .swiper-pagination {
        margin: 1em 0;
    }
    .swiper {
        width: 50%;
    }
    .ddescrição__titulo {
        font-size: 32px;
    }
    .descrição__texto {
        font-size: 16px;
    }
    .descrição {
        margin-right: 2em;
    }
    .card {
        width: 60%;
        margin-left: 3em;
    }
    
}
por Mike de Sousa
| 1350.8k xp | 2439 posts
Alura Scuba Team Suporte Educacional

Olá, Estanislau, como vai?

Seu código está bem estruturado e organizado, demonstrando um bom entendimento de responsividade e estilização com CSS. A utilização de media queries para ajustar o layout em diferentes tamanhos de tela está correta, e a organização dos elementos no HTML segue boas práticas.

Obrigado por compartilhar seu projeto. Continue praticando e explorando novas técnicas de responsividade e design. O fórum está à disposição para qualquer dúvida ou novo projeto que queira compartilhar.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!