Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Refazendo a primeira página

Boa noite.

Estou refazendo a primeira página gostaria de saber como posso deixar a imagem inicial sem partes brancas. O meu código HTML, é esse até agora.

<!DOCTYPE html>

    <html lang = "pt-br">
        <head>
            <meta charset = "UTF-8">
            <title>Barbearia Alura</title>
            <link rel = "stylesheet" href ="style.css">
        </head>

        <body>
            <header>
                <div class = "inicial">
                <h1>
                    <img src ="Capa.jpg" id = "capa">
                </h1>
                </div>
            </header>
        </body>
    </html>

E o meu CSS está assim:

header {
    padding: auto auto;
    margin: auto;
}

#capa{
    width: 99vw;
    height: 25vw;
}

E o resultado até o presente momento está assim. Insira aqui a descrição dessa imagem para ajudar na acessibilidadeComo posso melhorar essas margens? E melhorar a página?

1 resposta
solução!

Boa noite Alberinando, tudo na paz?

Então, provavelmente essas áreas brancas estão definidas por um "css base" que os navegadores tem.

Para resolver tal problema, aconselho baixar o arquivo RESET.CSS https://github.com/MasterKelwin/AluraChallenge-Front-End/blob/main/Projeto/reset.css

Esse arquivo reseta as propriedades padrão presentes no navegador.

O próximo passo é anexar esse arquivo no seu projeto.

Lá no HTML, você antes de linkar o CSS principal, linka o reset.css.

Ficando da seguinte forma:

 <link href="./assets/css/reset.css" rel="stylesheet">
 <link href="./assets/css/style.css"  rel="stylesheet">