1
resposta

alguem consegue me explicar pq a diferença ?

lado esquerdo meu projeto, direito aula

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Books</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="cabecalho">

        <div class="cabecalho__bloco">
            <input type="checkbox" id="menu" class="container__menu" placeholder="aa">
            <label for="menu">
                <span class="cabecalho__menu cabecalho__img"></span>  
            </label>  
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Progamação</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Front-End</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Infraestrutura</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Business</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Desingn & UX</a>
                </li>
            </ul>
            
            <img src="/img/Logo.svg" alt="logo alura book" class="cabecalho__img"></a>
        </div>
        <div class="cabecalho__bloco">
            <a href="#"><img src="/img/Frame 145.png" alt="favoritos" class="cabecalho__img"></a>
            <a href="#"><img src="img/Frame 98.png" alt="carrinho" class="cabecalho__img"></a>
            <a href="#"><img src="img/Frame 3.png" alt="perfil" class="cabecalho__img"></a>
        </div>
       
    </header>

    <section class="banner">

        <h2 class="banner__titulo">Já sabe por onde começar?</h2>
        <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
        <!-- <img src="./img/Pesquisa.svg" alt="pesquisar" class="banner__input_img"> -->
        <input type="search" id="busca-baner" name="busca-baner" class="banner__busca" placeholder="Qual sera sua próxima leitura?">            
            
             
    </section>

</body>
</html>
.cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;    
    background-color: var(--cor-menu);
    position: relative;
}

.cabecalho__bloco{
    display: flex;
    align-items: center;   
}

.cabecalho__menu {
    background-image: url("../img/menu.svg");
    width: 24px;
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;    
}

.cabecalho__img {
    padding: 1em;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;     
}

.container__menu:checked~.lista-menu{
    display: block;
    width: 60vw;    
}

.container__menu{
    display: none;
}

.lista-menu__item, .lista-menu__titulo {
    padding: 1em;
    background-color: var(--cor-menu);
    
}

.lista-menu__titulo{
    color: var(--cor-menu-titulo);
    font-weight: 700;
}

.lista-menu__link{
    text-decoration: none;
    text-transform: uppercase;
    background: var(--cor-menu-links);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

1 resposta

Oi, Roger. Tudo bem?

Você se refere ao espaçamento entre o logo do projeto e o os ícones do menu? Se for o caso, eu imagino que a causa seja referente ao tamanho da tela utilizada para simular o ambiente mobile. Note na imagem que a instrutora utiliza o tamanho de 390px. Agora, se não for o caso, eu notei que você está usando imagens png no seu projeto, enquanto a instrutora está usando svg, tente usar as imagens que foram disponibilizadas para download nesse link. Se você baixou os assets do figma pode ser que tenham vindo com um tamanho diferente.

Espero ter ajudado!

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

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado