5
respostas

[Dúvida] a imagem não amplia 100%

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Estilizando imagens e atividade CSS para imagens

por Diego Pinheiro Alves
| 6k xp | 5 posts
  </body>

      <img src = "banner.jpg" id="banner">


       <h1>Sobre a Barbearia Alura</h1>

       <p style="">Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

       <p style="font-size: 20pxs;"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</em></strong>.<p/>

<p id="missão" style="">Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.<p/>
</body>

body{ background: #cccccc; }

#banner { width:100p%; }

h1 { text-align: center; }

p { text-align: center; }

#missao { font-size: 20px; }

em strong { color:red ; }

5 respostas
por Lorena Garcia
| 11912.9k xp | 17866 posts
Alura Scuba Team

Oi Diego, tudo bem?

Você precisa fazer um ajuste, tira o pdepois de 100 , salvar o documento e atualizar a página:

#banner {
    width: 100%;
}

Vê se fazendo isso resolve.

Um abraço e bons estudos.

por Diego Pinheiro Alves
| 6k xp | 5 posts

não, não resolveu

por Lorena Garcia
| 11912.9k xp | 17866 posts
Alura Scuba Team

Oi Diego, então peço que você envie todo o seu HTML, que aí podemos te ajudar melhor.

Manda desde o começo até o fim, o que você mandou aqui não veio todo.

Abraços.

por Diego Pinheiro Alves
| 6k xp | 5 posts

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Lorena Garcia
| 11912.9k xp | 17866 posts
Alura Scuba Team

Oi Diego.

Pelo print que mandou ainda está o p depois do 100 que disse para retirar no CSS.

E seu HTML tem alguns erros. Você está fechando a tag <body> duas vezes. E só podemos fechar uma vez.

Sua tag lang está com erro de digitação, precisa corrigir para: <html lang="pt-br">

E nessa aula o instrutor já retirou a tag style do HTML, você precisa atualizar também.

E está vendo essa bolinha ao lado do nome do seu documento? Isso significa que você tem alterações que não salvou. Toda vez que você faz uma alteração você precisa salvar, senão não vai surtir efeito.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Vou mandar o HTML correto de acordo com a aula que você está:

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

    <body>
        <img id="banner" src="banner.jpg">

        <h1>Sobre a Barbearia Alura</h1>

        <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

        <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

        <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
    </body>
</html>

CSS:

body {
    background: #CCCCCC;
}

#banner {
    width: 100%;
}

h1 {
    text-align: center;
}

p {
    text-align: center;
}

#missao {
    font-size: 20px;
}

em strong {
    color: #FF0000;
}

Lembrando que a imagem precisa estar na mesma pasta do projeto para que o caminhe funcione. Todos os arquivos precisam estar na mesma pasta.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade