[Dúvida] Não estou conseguindo deixar igual Figma para desktop no exercicio

Olá Robson, tudo bem?

Compreendo sua dúvida e estou aqui para ajudar. No entanto, com base no trecho de código fornecido, é um pouco difícil entender completamente o contexto e oferecer uma solução precisa. Seria de grande ajuda se você pudesse compartilhar mais informações sobre o projeto completo, e que pate destoa do figma.

Para que eu possa oferecer uma assistência mais assertiva, seria ótimo se você pudesse fornecer o link do seu projeto no GitHub ou compartilhar a pasta com o código no Drive. Dessa forma, poderei analisar todo o contexto e oferecer uma solução mais direcionada às suas necessidades.

Estou ansioso para ajudar você da melhor maneira possível. Por favor, não hesite em compartilhar mais detalhes e ficarei à disposição para lhe auxiliar.

Um grande abraço e até mais!

https://github.com/robson-haaland/aula.git

não sei pq nao estou conseguindo colocar a fonte tbm

Opa Robson, tudo certo?

O seu Header/cabeçalho está diferente do figma, para isso devemos melhorar os media para notebooks(min-width: 1024px) e para desktop a partir da ultima linha do arquivo header, e apagando a ultima chaves, você pode colocar o seguinte código, como é muita coisa para explicar peço encarecidamente a leitura detalha do código e caso de dúvidas retorne para eu lhe auxiliar:

.opções__botão:checked~.opções__rotulo>.opções__item {
        background: var(--azul-degrade);
        color: var(--branco);
    }

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

Mas observe que foi adicionado as palavras que não ficavam aparentes no header no caso de Desktop.

Para modificar a parte do carrosel, devemos primeiramente criar um @media para desktop desse modo podemos alterar e colocar um display flex para o container que contem o carrossel e o card, esse código será implementado no arquivo carrosel.css, deixo o código a ser implementado a seguir:

@media screen and (min-width: 1728px) { 
    .carrossel {  /*Novo bloco que permite realizar as devidas alterações*/
        display: flex;
        margin: 0 20vw 3em 20vw;
        align-items: center;
    }

    .swiper-pagination {
        margin: 1em 0;
    }

    .swiper {
        width: 50%;
    }

    .descrição__titulo {
        font-size: 32px;
    }

    .descrição__texto {
        font-size: 16px;
    }

    .descrição {
        margin-right: 2em;
    }

    .card {
        width: 60%;
        margin-left: 3em;
    }

}

Nesse bloco tem código a mais que será implementado ao longos das aulas restantes.

Por fim peço que nos h2 abaixo das section, você coloque na linha anterior como exemplificado mais abaixo:

    <h2 class="carrossel__titulo">Novos lançamentos</h2> <!--Essa linha deve ficar acima da section-->
    <section class="carrossel">

Recomendo que faça o mesmo procedimento na outra section que tem o h2, "Mais vendidos".

O que também me chamou atenção foi o footer ou rodapé, para repararmos isso basta acessar o arquivo styles.css, na 6ª linha que realiza o import do css do rodapé, devemos retirar o assento da palavra rodapé pois o arquivo se chama rodape.css, mas nos confesso que as vezes nos confundimos com os assentos, mas no mundo da programação é recomendável retirar para declaração de variáveis e na criação de arquivos, ficando desse modo:

@import url("styles/rodape.css");

Deste modo obtemos o seguinte resultado:

Algumas imagens em seu projeto estão quebradas, mas é de fácil resolução, é necessário refazer o link novamente!

Quantos as fontes aparentemente elas são idênticas ao do figma, e estão funcionando normalmente.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!