Solucionado (ver solução)
Solucionado
(ver solução)
15
respostas

Não consegui achar os erros no código

Não consegui ampliar a imagem. Não consegui centralizar o textos. Não consegui deixar nossa missão em vermelho e os textos em itálico. Não consegui deixar os blocos em cinza.

Segue o código:

<body>
   <img id="banner" src="banner.jpg">
   <div class="principal" 
            <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>
        </div>

<div class="beneficios">
        <h2>Benefícios</h2>

        <ul>
            <li class="itens">Atendimento aos clientes</li>
            <li class="itens">Espaço Diferenciado</li>
            <li class="itens">Localização</li>
            <li class="itens">Profissionais Qualificados</li>
        </ul>
    </div>
</body>

CSS: body { background: #CCCCCC }

#banner { width: 100%; }

.principal { background: #CCCCCC }

h1 { text-align: center }

p { text-align: center; }

#missao { font-size: 20px }

em strong { color: #FF0000; }

.itens { font-style: italic; }

.beneficios { background-color: #ffffff; }

15 respostas

Olá estudante, tudo bem?

Você está linkando o CSS na<head> do seu index.html? Dessa forma:

<link rel="stylesheet" href="style.css">

Só linkando dessa forma o que você fizer no seu CSS vai surtir efeito na página.

Se não for esse o problema, peço que você envie todo o seu código HTML para que eu possa visualizar melhor o que pode tá acontecendo.

Espero ter ajudado.

Bons estudos (:

Olá, tudo bem?

Faz uma correção ai, sua tag <div class="principal" está faltando fechar com o >. <div class="principal"> <h1>Sobre a Barbearia Alura</h1> . . .

Poderia compartilhar conosco o head do seu HTML e como está a estrutura de pastas do seu projeto? Acredito que o documento HTML não está lendo o seu arquivo CSS.

Aguardo, bons estudos.

file:///C:/Users/talita.reis/Downloads/index.html

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

    <body>
        <header>
            <h1 class="titulo-principal">Barbearia Alura</h1> 
        </header>

       <img id="banner" src="banner.jpg">
       <div class="principal"> 
                <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

                <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>
            </div>

    <div class="beneficios">
            <h3 class="titulo-centralizado">Benefícios</h3>
            <ul>
                <li class="itens">Atendimento aos clientes</li>
                <li class="itens">Espaço Diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais Qualificados</li>
            </ul>

            <img src="beneficios.jpg" class="imagembeneficios">
        </div>
    </body>
</html>

body { background: #CCCCCC }

#banner { width: 50%; }

.principal { background: #CCCCCC padding: 30px; }

.titulo-principal { padding-left: 20px; }

.titulo-centralizado { text-align: center;

}

p { text-align: center; }

#missao { font-size: 20px }

em strong { color: #FF0000; }

.itens { font-style: italic; }

.beneficios { background-color: #ffffff; padding: 20px; }

ul { display: inline-block; vertical-align: top; width: 20%; margin-right: 15%; }

.imagembeneficios { width: 50%; }

Olá!

Você precisa importar o link do CSS no seu head, sem essa importação nada do que você colocar de estilo irá aplicar na página, faça dessa maneira:

<head> 
        <link rel="stylesheet" href="style.css">
<head>

Escrevi style.css pois é um exemplo, coloque o nome do seu arquivo CSS. Faça essas alterações que você vai conseguir ver os estilos aplicados.

Para deixar a imagem ocupando 100% da página você precisa colocar assim no CSS:

.banner { 
    width: 100%;
 }

Em .principal depois da cor, você precisa colocar um ** ;**, ele está acusando um errinho no editor de código por conta disso, deixando assim:

.principal {
    background: #CCCCCC;
    padding: 30px;
}

No seu está apenas 50%.

Ah lembrando que todos os arquivos precisam estar salvos na mesma pasta. Testando seu código com a importação certinha e tudo na mesma pasta, deu tudo certo.

Você pode baixar o projeto do curso e comparar com o seu também, deixo o link aqui, é uma boa forma de você praticar também.

Espero ter ajudado!

Bons estudos.

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

O nome do arquivo está certo "arquivo.css" estão na mesma pasta. A imagem de cima precisa ocupar o espaço todo mas a de baixo tem que ser 50% conforme está no vídeo.

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

Sim, a imagembeneficios precisa ocupar 50%, essa você deixa a configuração assim:

.imagembeneficios {
    width: 50%;
}

Mas o banner você precisa ajustar para a width: 100%;, são imagens e classes diferentes, ao mudar na classe do banner, não irá afetar a de imagembeneficios.

O seu arquivo CSS tá vermelho, o que dizer que tem um erro nele, verifica por favor se está faltando algum ;ou fechamento de }.

Poderia mandar um print de como está a visualização da página pra você?

Fico no aguardo.

Mudei para 100% o banner, agora ficou assim:

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

o Z de localização ficou estranho na página.

<body>
    <header>
        <h1 class="titulo-principal">Barbearia Alura</h1> 
    </header>

   <img id="banner" src="banner.jpg">
   <div class="principal"> 
            <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

            <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>
        </div>

<div class="beneficios">
        <h3 class="titulo-centralizado">Benefícios</h3>
        <ul>
            <li class="itens">Atendimento aos clientes</li>
            <li class="itens">Espaço Diferenciado</li>
            <li class="itens">Localização</li>
            <li class="itens">Profissionais Qualificados</li>
        </ul>

        <img src="beneficios.jpg" class="imagembeneficios">
    </div>
</body>

body { background: #CCCCCC }

#banner { width: 100%; }

.principal { background: #CCCCCC padding: 30px; }

.titulo-principal { text-align: center; }

.titulo-centralizado { text-align: center;

}

p { text-align: center; }

#missao { font-size: 20px }

em strong { color: #FF0000; }

.itens { font-style: italic; }

.beneficios { background-color: #ffffff; padding: 20px; }

ul { display: inline-block; vertical-align: top; width: 20%; margin-right: 15%; }

.imagembeneficios { width: 50%; }

A primeira imagem deveria estar com fundo branco, e não dentro do fundo cinza.

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

Ele tá indicando 2 erros no arquivo css:

Já tentei digitar padding aqui e dá erro.

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

solução!

Oi!

Você precisa colocar o; depois da cor, ficando assim:

.principal {
    background: #CCCCCC;
    padding: 30px;
}

Tem que verificar no CSS todo se mais algum está sem o ;, pois pode causar alguma diferença no seu código.

aqui a imagem parece ter ficado maior do que 50% Como posso corrigir?

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

ul { display: inline-block; vertical-align: top; width: 20%; margin-right: 15%;