Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

No banner gostaria de colocar duas fotos separadas ao invés de uma, como devo fazer?

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Criando uma nova página e atividade Revisão

por Marcio Rodrigo Rezzadori
| 66k xp | 44 posts
<!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>
        <div class="beneficios">
        <h3 class="titulo-centralizado"> Benefícios</h3>

        <ul>
            <li class="itens">* Atendimento</li>
            <li class="itens">* Espaço Diversificado</li>
            <li class="itens">* Localização</li>
            <li class="itens">* Profissionais Qualificados</li>
        </ul>
    <img src="beneficios.jpg" class="imagembeneficios">

    </div>
    </body>

</html>
4 respostas
por VINICIUS MENDES CALIXTO DA SILVA
| 44.7k xp | 18 posts

Boa noite Marcio,

Sou iniciante tbm na programação, mas imagino que para resolver seu problema, seria interessante vc determinar o tamanho de cada imagem!

Por exemplo:

width: 100%

e cada imagem ter 50% no máximo.

Espero que isso resolva! abs

solução!
por VINICIUS MENDES CALIXTO DA SILVA
| 44.7k xp | 18 posts

Acabei de fazer um teste usando esse código abaixo e funcionou!

veja se resolve:

<img src="./bannernovo2.jpg" style="width: 50%;">
<img src="./bannernovo3.jpg" style="width: 50%; float: right;">

as imagens ficaram lado a lado, completando a tela toda!

por Marcio Rodrigo Rezzadori
| 66k xp | 44 posts
<!DOCTYPE html>

<html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <title>Minha página</title>
        <link rel= "stylesheet" href="style.css">

    </head>
    <body>
        <header>
            <h1 class="titulo-principal">Nova Página<h1/>
        </header>
        <main></main>
            <ul class="fotosinicio">
                <li>
                    <img src="banner.jpg" style="width: 50%">
                    <img src="familiaunida.jpg" style="width: 50%; float: right;">
                </li>
            </ul>

Obrigado Vinicius, resolveu em parte, as imagens ficaram ao lado, porem em um tamanho muito pequeno e nao estou conseguindo aumentá-las e centraliza-las.

por Marcio Rodrigo Rezzadori
| 66k xp | 44 posts

Descobri meu erro,estava com o aquivo css com erro, mas com sua ajuda cosegui deixar as fotos uma ao lado da outra