1
resposta

HTML e CSS - Aula 4 - Atividade 7

Código - HTML

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

Código - CSS

body { background-color:#CCCCCC }

#banner { width: 100% }

h1 { text-align:center }

p { text-align:center }

#missao { font-size:20px }

em strong { color: #FF0000 }

1 resposta

Como deve ser as primeiras aulas de HMTL creio que a explicação esteja em torno dos Id. Mas para boa prática dá uma analisada no uso das class. Isso ajuda muito nos próximos passos considerando o fato de entender os elementos pai e filhos. Algumas configurações de estrutura requer um domínio bastante claro em torno do conceito de class, eu tive dificuldades pois não fiquei atento a esse aspecto. De toda forma espero ter ajudado. É boa prática usar class para reaproveitar as estilizações e o Id é casos específicos.

index.html:

<h1 class ="cabecalho">Sobre a Barbearia Alura</h1>

<p class= "texto">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 class="texto>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>


style.css:

Código - CSS

body { background-color:#CCCCCC }

#banner { width: 100% }

.cabecalho { text-align:center }

.texto { text-align:center }

#missao { font-size:20px }

em strong { color: #FF0000 }

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software