[Projeto] Lista de exercícios

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

INDEX.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>

BANNER.CSS

    .banner__pesquisa {
        width: 35%;
    }

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

    .banner {
        padding: 6em 0;
    }
    
}

CARROSSEL.CSS

@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;
    }
    
}