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

Desconfigurou o CSS depois que alterei o da página principal

por Jacira Sousa
| 72.8k xp | 10 posts

Olá! Estava tudo certinho no código até eu alterar o CSS da Home, a página de contato ficou grudada na margem e a do produto desconfigurou toda, não consigo achar o erro.

`

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

        <img class="utensilios" src="utensilios.jpg" alt="Utensílios de um barbeiro">
        <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>
    </section>

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

        <div class="mapa-conteudo">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.448598130907!2d-46.634653385542414!3d-23.588239368469353!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1580916426151!5m2!1spt-BR!2sbr" 
            width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
        </div>
    </section>

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

           <div class="conteudo-beneficios">
                <ul class="lista-beneficios">
                    <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>
                    <li class="itens">Pontualidade</li>
                    <li class="itens">Limpeza</li>
                </ul><img class="imagem-beneficios" src="beneficios.jpg" alt="homem fazendo a barba">
            </div> 
        <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        </section>
</main>
<footer>
    <img src="logo-branco.png" alt="logo da barbearia Alura">
    <p class="copyright">&copy; Copyright Barbearia Alura – 2019</p>
</footer>
`
7 respostas
por Jacira Sousa
| 72.8k xp | 10 posts


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

header{
    background: #bbbbbb;
    padding: 20 px 0;
}

.caixa{
    position: relative;
    width: 940px;
    margin: 0 auto;
}
nav{
    position: absolute;
    top: 110px;
    right: 0;
}

nav li{
    display: inline;
    margin: 0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}

nav a:hover{
    color: #C78C19;
    text-decoration: underline;
}

.produtos{
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.produtos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 10px;
}

.produtos li:hover{
    border-color: #C78C19;
}

.produtos li:active{
    border-color: #088C19;
}

.produtos li:hover h2{
    font-size: 34px;
}
.produtos h2{
    font-size: 30px;
    font-weight: bold;
}

.produto-descricao{
    font-size: 18px;
}

.produto-preco{
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

footer{
    text-align: center;
    background: url(bg.jpg);
    padding: 40px 0;
}

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



form{
    margin: 40px 0;
}

form label{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}


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


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

.checkbox{
    margin: 20px 0;
}

.enviar{
    width: 40%;
    padding: 15px 0;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none ;
    border-radius: 5px;
    transition: 1s all;   /*transição dos elementos de forma lenta juntpo com o hover*/
    cursor: pointer;
}

.enviar:hover{
    background: darkorange;
    transform: scale(1.2); /*calculo proporcional de 20%*/
    /*transform:rotate(70deg); medida de graus em ingles deg faz girar o botão*/
}

table{
    margin: 20px 40px;
}

thead{
    background: #555555;
    color: white;
    font-weight: bold;
}

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

/*css da pagina inicial*/

.banner{
    width: 100%;
}


/*clear que "limpa" o float, deixando o título com a formatação do style*/
.titulo-principal{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
    color: rgba(0,0,0,0.3); /*colocando opacidade na cor dos titulos*/
}

.principal{
    padding: 3em 0;
    background: #FEFEFE;
    width: 940px;
    margin: 0 auto;
}

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

.principal strong{
    font-weight: bold;
}

.principal em{
    font-style: italic;
}

/*float, Descolar o elemento na lateral e deixar os outros elementos ao redor.*/
.utensilios{
    width: 150px;
    float: left;
    margin: 0 20px 20px 0;
}

.mapa-conteudo{
    width: 940px;
    margin: 0 auto;
}

.mapa{
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888);
}

.mapa p{
    margin: 0 0 2em;
    text-align: center;
}

.beneficios{
    padding: 3em 0;
    background: #888888;
}

.conteudo-beneficios {
    width: 640px;
    margin: 0 auto;
}

.lista-beneficios {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.itens{
    line-height: 2;
}

.itens:first-child{  /*estiliza o primeiro elemento, se quiser outro muda o*/
    font-weight: bold;
}

.itens:before {
    content: "★";
}

.imagem-beneficios{
    width: 60%;
    opacity: 0.3;
    transition: 400ms;
    box-shadow: 10px 10px 5px #000000; /*sombra na imagem*/
}

.imagem-beneficios:hover{
    opacity: 1;                 /*opacidade na imagem, qdo o mouse está por cima e com o transition*/
}

.video {
    width: 560px;
    margin: 2em auto;
}
por Jacira Sousa
| 72.8k xp | 10 posts
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Produtos - Barbearia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="produtos.css">
</head>

<body>
    <header>
        <div class="caixa">
                <h1><img src="logo.png" alt="logo"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
        </div>
    </header>

    <main>
        <ul class="produtos">
            <li>
                <h2>Cabelo</h2>
                <img src="cabelo.jpg" alt="silhueta de um cabelo">
                <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir.</p>
                <p class="produto-preco">R$ 25,00</p>
            </li>   
            <li>
                <h2>Barba</h2>
                <img src="barba.jpg" alt="silhueta de uma barba">
                <p class="produto-descricao">Corte e desenho profissional de barba.</p>
                <p class="produto-preco">R$ 18,00</p>  
            </li>   
            <li>
                <h2>Cabelo + Barba</h2>
                <img src="cabelo+barba.jpg" alt="silhueta de cabelo e barba">
                <p class="produto-descricao">Pacote completo de cabelo e barba.</p>
                <p class="produto-preco">R$ 35,00</p>
            </li> 
        </ul>

    </main>
    <footer>
        <img src="logo-branco.png">
        <p class="copyright">&copy; Copyright Barbearia Alura – 2019</p>
    </footer>
</body>
</html>
por Jacira Sousa
| 72.8k xp | 10 posts
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contato - Barbearia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>

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

        <main>
            <form>
                <label for="nomesobrenome">Nome e sobrenome</label>
                <input class="input-padrao" required type="text" id="nomesobrenome">

                <label for="email">E-mail</label>
                <input class="input-padrao" required placeholder="seuemail@dominio.com" type="email" id="email">

                <label for="telefone">Telefone</label>
                <input  class="input-padrao" required placeholder="(XX) XXXXX-XXXX" type="tel" id="telefone">

                <label for="mensagem">Mensagem</label>
                <textarea id="mensagem" cols="70" rows="10"  class="input-padrao" required></textarea>

                <fieldset>
                    <legend>Como prefere o nosso contato?</legend>

                    <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>

                    <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>

                    <label for="radio-whatsapp"><input type="radio" name="contato" value="whatsapp" id="radio-whatsapp" checked>WhatsApp</label>
                </fieldset>

                <fieldset>
                    <legend>Qual horário prefere ser atendido?</legend>
                    <select>
                        <option>Manhã</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
                </fieldset>

                    <label class="checkbox"><input type="checkbox" checked>Gostaria de receber nossas novidades por email?</label>

                    <input type="submit" value="Enviar formulário" class="enviar">
            </form>
                <table>
                    <thead>
                        <tr>
                            <th>Dia</th>
                            <th>Horário</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Segunda</td>
                            <td>8h ~ 20h</td>
                        </tr>
                        <tr>
                            <td>Quarta</td>
                            <td>8h ~ 20h</td>
                        </tr>
                        <tr>
                            <td>Sexta</td>
                            <td>8h ~ 20h</td>
                        </tr>
                    </tbody>
                </table>

        </main>
    <footer>
        <img src="logo-branco.png" alt="logo da barbearia Alura">
        <p class="copyright">&copy; Copyright Barbearia Alura – 2019</p>
    </footer>
</body>
</html>
por Jacira Sousa
| 72.8k xp | 10 posts

faltou essa parte do index.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Barbearia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>

<body>
    <div>
        <header>
            <div class="caixa">
                <h1><img src="logo.png" alt="logo da barbearia Alura"></h1>
                    <nav>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="produtos.html">Produtos</a></li>
                            <li><a href="contato.html">Contato</a></li>
                        </ul>
                    </nav>
            </div>
        </header>
    </div>
    <img class="banner" src="banner.jpg" alt="cadeira_barbearia">
por Jacira Sousa
| 72.8k xp | 10 posts

Consegui acertar a página de produtos, descobri o erro, coloquei produtos.css no lugar de style.css, mas ainda não acertei a de contato, continua colado na borda

solução!
por Lorena Garcia
| 9159k xp | 13577 posts
Alura Scuba Team Suporte Educacional

Oi Jacira, tudo bem?

Fiz umas modificações no seu CSS.

No seu form, defina uma altura, uma margin auto e um padding top para dar um respiro:

form {
    width: 960px;
    margin: auto;
    padding-top: 20px;
}

Você tem dois form label, apaga um dos dois, eu comentei o primeiro para ele não ser levado em conta e fiz umas modificações no segundo:

/* form label {
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
} */


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

Para descolar a tabela de horário da borda, fiz assim, coloquei uma class no main do formulário, chamei demain-formulario:

<main class="main-formulario">
            <form>
                <label for="nomesobrenome">Nome e sobrenome</label>
                <input class="input-padrao" required type="text" id="nomesobrenome">

                <label for="email">E-mail</label>
                <input class="input-padrao" required placeholder="seuemail@dominio.com" type="email" id="email">

                <label for="telefone">Telefone</label>
                <input  class="input-padrao" required placeholder="(XX) XXXXX-XXXX" type="tel" id="telefone">

                <label for="mensagem">Mensagem</label>
                <textarea id="mensagem" cols="70" rows="10"  class="input-padrao" required></textarea>

                <fieldset>
                    <legend>Como prefere o nosso contato?</legend>

                    <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>

                    <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>

                    <label for="radio-whatsapp"><input type="radio" name="contato" value="whatsapp" id="radio-whatsapp" checked>WhatsApp</label>
                </fieldset>

Chamei no CSS e dei uma altura e margin 0 auto:

.main-formulario {
    width: 960px;
    margin: 0 auto;
}

E na table defini esses valores:

table {
    margin: 40px 0;
}

Ficou assim:

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

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

Você pode ir alterando os valores para ir testando e explorando o CSS, é uma ótima maneira de praticar :D Espero que tenha ajudado!

Um abraço e bons estudos.

por Jacira Sousa
| 72.8k xp | 10 posts

Obrigada Lorena! Vou conferir suas dicas e alterar no projeto. valeu mesmo!!