Entrar Ainda não tem acesso?
2
respostas

p do "nosso estabelecimento" não fica no mesmo posicionamento que os demais

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Conteúdo externo e atividade Trabalhando com mapas

por Ana Carolina Vilela Moreira Dias
| 55.4k xp | 16 posts

Em vez de seguir o padrão, ele fica colado no canto do site

<! DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css/reset.css">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2? família=Montserrat:wght@100&display=swap" rel="stylesheet">
    </head> 
        <body>  

            <header>
                <div class="caixa">
                    <h1><img src="logo.png" alt="Logo da barbearia Alura"></h1>
                        <ul class="navegacao">
                     <nav>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="produtos.html">Produtos</a></li>
                            <li><a href="contatos.html">Contato</a></li>
                        </ul>
                    </nav>  
                </div>
            </header>

            <img class="banner" src="banner.jpeg">
     <main>    
        <section class="principal">

            <h2 class="titulo-principal"> Sobre a Barbearia Alura</h2>

            <img src="utensilios.jpg" alt="Utensilios de um barbeiro" class="utensilios">

            <p>Localizada no coração da cidade a <b>Barbearia Alura</b> 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> <i>Nossa missão é: <b>"Proporcionar auto-estima e qualidade de vida aos clientes".</b></i></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>

        </section>

        <section class="mapa">

            <h3 class="titulo-principal">Nosso estabelecimento</h3>
            <p >Nosso estabelecimento está localizado no coração da cidade.</p>

        </section>

        <section class="beneficios">
            <h3 class="titulo-principal">Benefícios</h3>

            <ul class="itens">
            <li>Atendimento aos clientes</li>
            <li>Espaço diferenciado</li>
            <li>Localização</li>
            <li>Profissionais qualificados</li>

            </ul>

            <img src="beneficios.jpg" alt="" class="imagembeneficios">


        </section> 
     </main>
    </body>


<footer>
    <img src="logo-branco.png" alt="logo da barbearia Alura">
    <p class="copyright"> &copy; Copyright Barbearia Alura 2019</p>


    </footer>

</html>
2 respostas
por Ana Carolina Vilela Moreira Dias
| 55.4k xp | 16 posts
css: 

`body{
    font-family:  'Montserrat', sans-serif;
}


header{
    background-color: #BBBBBB;
    padding: 20px 0;

}

.caixa{

    width: 940px;
    position: relative;
    margin: 0 auto;

    }

    nav{
    position:absolute;
    top: 110px;
    right: 0;
}

nav li{
    display: inline-block;
    margin-left: 20px;
}

nav a{

text-transform: uppercase;
color: black;
font-weight: bold;
font-size: 22px;
text-decoration-line: none;
}

nav li :hover{
color: rgb(143, 121, 51);
text-decoration: underline;

}

.principal{
    width: 940px;
    margin: 0 auto;
}

.beneficios{
    width: 940px;
    margin: 0 auto;
}
footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

.copyright {
    font-size: 13px;
    margin: 20px 0 0;
    color: white;
}



form {
  margin: 40px 0;
}

form label, form legend{
display: block;
font-size: 20px;
margin-bottom: 10px;
}

.input-padrao{
    display: block;
    margin-bottom: 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox{
    margin: 20px 0;

}

.enviar{
    width: 40%;
    padding: 15px 0;
    background-color: orange;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: unset;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;

}

.enviar:hover {
    background-color: red;
    transform: scale(1.2);

}

table{
    margin: 20px 40px;

}

thead{
    background-color: rgb(75, 73, 73);
    color: white;
    font-weight: bold;
}

td, th{
    border: 1px solid black;
    padding: 8px 15px ;
}


.banner /* css da página inicial*/{

width: 100%;
height: 600px;

}

.titulo-principal{
text-align: center;
font-size: 2em;
margin-bottom: 1em;
margin-top: 0.5em;
clear: left;
}

.principal p{
    margin: 0 0 1em;
}

.principal b {
    font-weight: bold;
}

.principal i{
    font-style: italic;
}

.utensilios{
    width: 12%;
    float:left;
    margin: 0 20px 20px 0;
}

.imagembeneficios{

    width: 60%;
}`
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Ana, tudo bem?

Por padrão, os textos <p> ficam alinhados no canto da esquerda, para que possamos modificar esse padrão para o centro, é preciso setar a propriedade text-align: center no CSS.

Para que essa disposição no centro não seja aplicada em todos os parágrafos da página, iremos adicionar um seletor nesse elemento que irei chamar simbolicamente de .texto-mapa.

  • No html:
<section class="mapa">
        <h3 class="titulo-principal">Nosso estabelecimento</h3>
        <p class="texto-mapa">Nosso estabelecimento está localizado no coração da cidade.</p>
</section>
  • No CSS:
.texto-mapa {
    text-align: center;
}

Espero ter ajudado, em caso de dúvidas fique a vontade para pereguntar. Bons estudos!