projeto culturama alura | Front-end | Alura - Cursos online de tecnologia

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="estilo.css">
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <header>
        <nav class="menu-cabecalho">
            <li class="cabecalho">
                <img src="/img/Logo - branco 1.png" class="imagem">
            </li>       
            <li class="menu-item"><a href="#" class="menu">Programação</a></li>
            <li class="menu-item"><a href="#" class="menu">Categorias</a></li>
            <li class="menu-item"><a href="#" class="menu">Seu local</a></li>
            <label class="menu-label" for="pesquisar">
                <input class="menu-input" type="search" name="" placeholder="O que você procura?"
                id="pesquisar">
            </label>
        </li>
        </nav>
    </header>

    <section class="banner">
        <div class="banner-menu">
        <img src="/img/Banners.png" alt="imagem culturama">
        </div>
    </section>

    <section>
        <div class="categorias">
            <h2 class="subtitulo-categorias">Categorias</h2>
            <ul class="categorias-menu">
                <li class="item-categorias">Show</li>
                <li class="item-categorias">Teatro</li>
                <li class="item-categorias">Festivais</li>
                <li class="item-categorias">Cinema</li>
                <li class="item-categorias">Arte</li>
                <li class="item-categorias">Fotografia</li>
                <li class="item-categorias">Tecnologia</li>
                <li class="item-categorias">Designer</li>
            </ul>
        </div>

    </section>


</body>
</html>

CSS:

*{
    margin:0;
    padding:0;
}

.imagem{
    margin: 0 2em;
}

.menu-item{
    background-color: black;
    list-style-type: none;

}

.menu{
    color: white;
    font-size: 18px;
    text-decoration: none;
}

.menu-cabecalho{
    padding: 2.5em;
    gap:1.5em;
    background-color: black;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.menu-input{
    height: 2em;
    border: 2px solid white;
    border-radius: 10px;
    font-size: 23px;
    color: gray;
    background-color: black;
}


.banner-menu{
    display: flex;
    justify-content: center;
}

.subtitulo-categorias{
    text-transform: uppercase;
    font-size: 20px;
    margin: 1em 0 0 2.2em;
}

.categorias-menu{
    display: flex;
    margin: 10px 0;
    gap: 10px;
    align-items: center;
    flex-direction: column;
    list-style-type: none;
    text-transform: uppercase;
}

.item-categorias{
    padding: 1em 2em;
    text-align: center;
    width: 60%;
    background-color: brown;
}

.item-categorias:nth-child(2),
.item-categorias:nth-child(6){
   background-color: rgb(231, 85, 31);
}

.item-categorias:nth-child(1),
.item-categorias:nth-child(5){
    background-color: rgb(221, 221, 50);
}

.item-categorias:nth-child(3),
.item-categorias:nth-child(7){
    background-color: rgb(87, 87, 202);
}

.item-categorias:nth-child(4),
.item-categorias:nth-child(8){
    background-color: rgb(55, 151, 55);
}

@media screen and (min-width:700px){
    .menu-cabecalho{
        align-items: center;
    }

    .menu-input{
       margin-left: 6em;
    }

    .subtitulo-categorias{
        margin:1em 6em;
    }

}

@media screen and (min-width:1024px){
    .subtitulo-categorias{
       text-align: center;
       margin: 2em;
    }
}

algo em que possa melhorar?

Olá, Caroline, como vai?

Seu código está bem estruturado, mas há alguns pontos que podem ser ajustados para melhorar a organização e a semântica do HTML, além de otimizar o CSS. Vou destacar algumas sugestões:

1 - Uso da <ul> e <li>: No seu menu de navegação, você está usando <li> diretamente dentro de <nav>. O correto é envolver os itens de lista (<li>) em uma <ul> ou <ol>. Por exemplo:

<nav class="menu-cabecalho">
    <ul>
        <li class="cabecalho">
            <img src="/img/Logo - branco 1.png" class="imagem">
        </li>
        <li class="menu-item"><a href="#" class="menu">Programação</a></li>
        <li class="menu-item"><a href="#" class="menu">Categorias</a></li>
        <li class="menu-item"><a href="#" class="menu">Seu local</a></li>
    </ul>
    <label class="menu-label" for="pesquisar">
        <input class="menu-input" type="search" placeholder="O que você procura?" id="pesquisar">
    </label>
</nav>

2 - Acessibilidade: Adicione atributos alt descritivos nas imagens para melhorar a acessibilidade. Por exemplo, em vez de alt="imagem culturama", você pode usar algo como alt="Banner do projeto Culturama".

Essas pequenas melhorias podem ajudar a tornar seu projeto mais robusto e acessível. Parabéns pelo trabalho, se precisar de mais ajuda, o fórum está à disposição.

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