Entrar Ainda não tem acesso?
4
respostas

Alguém pode me ajudar com esse código por favor? Não consigo entender o motivo do meu texto dentro da tag strong dentro da div fundoCor não ficar em negrito

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Finalizando a página de produtos e atividade Projeto da aula anterior

por Ewerton Lucas Ramos do Espirito Santo
| 37.7k xp | 20 posts
______________________________________HTML__________________________________________
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <!--CABEÇALHO-->
            <div class="cabecalho">
                <h1><img src="logo.png"></h1>
                <nav>
                    <ul>
                        <!--<li><a href="produtos.html">Home</a></li>-->
                        <li><a href="file:///C:/Users/Ewerton%20Lucas/Desktop/Curso%20Oracle/4%20-%20HTML5%20e%20CSS3%20(2)/produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contatos</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <!--TITULO PRINCIPAL-->
            <div class="fundoImg">
                <div class="faixaTransparente">
                    <h1 class="titulo">Barbearia Alura</h1>
                </div>
            </div>
            <!--SOBRE-->
            <div class="fundoCor">
                <div>
                    <h2 class="tituloSobre">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>
                </div>

            </div>
            <!--MISSÃO-->
            <div>
                <p id="nossaMissao">Nossa missão é: <em><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="fundoBranco">
                <h3 class="tittleCentral">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="img">
            </div>
        </main>

        <footer>
            <img src="logo-branco.png">
            <p class="copyright">© Copyright Barbearia Alura - 2020</p>
        </footer>    

    </body>    
</html>

__________________________________________CSS________________________________________
header {
    background: #BBBBBB;
    padding: 20px 0;
}
    .cabecalho {
        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-weight: bold;
                font-size: 22px;
                text-decoration: none;
            }
            nav a:hover {
                color: #C78C19;
                text-decoration: underline;
            }
main{}

    /*TITULO PRINCIPAL*/
    .fundoImg {
        background: url("img.webp");
        background-position: 50%;
        padding: 12.5% 0;    
    }
        .faixaTransparente {
            background-color: rgba(255,255,255,0.3);
            padding: 20px 0; 
        }
            .titulo {
                color: black;
                text-align: center;
                margin: 0 25%;
                font-style: bold;
                font-size: 80px;
                font-family: fantasy;
                border-bottom: 3px solid #000000;
                border-top: 3px solid #000000; 
            }

    /*SOBRE*/        
    .fundoCor{
        padding: 5% 2.5% 7.5% 2.5%;
        box-sizing: border-box;
        background-color:#F4A460;
    }
        .tituloSobre{
                color: white;
                margin: 0 0 5% 0;
                font-size: 40px;
                text-transform: uppercase;
                font-family: fantasy;
                /*-webkit-text-stroke-width: 0.25px;
                -webkit-text-stroke-color: #CD853F;*/
        }
        .fundoCor p{
            color: white;
            text-align: center;
            font-size: 30px;
            margin: 0 2.5% 0 2.5%;
        }

#nossaMissao{
    font-size: 20px;
}

em strong{
    color: rgb(255,0,0);
}

.itens{
    font-style: italic;
}

.fundoBranco{
    background: #FFFFFF;
    padding: 20px;
}

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

.img{
    width: 50%;
}

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}
    .copyright {
        color: #FFFFFF;
        font-size: 13px;
        margin-top: 20px;
    }
4 respostas
por Allan Almeida
| 176.2k xp | 220 posts
Desenvolvedor

Fala Ewerton.

Rapaz eu fiz um teste aqui e está ok. Ficou em negrito sim... Não mudei nada!

Coloca o conteúdo abaixo dentro da tag

e abre no Browser pra ver se vai. 
<style type="text/css">
            header {
                background: #BBBBBB;
                padding: 20px 0;
            }
            .cabecalho {
                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-weight: bold;
                font-size: 22px;
                text-decoration: none;
            }

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

        /*TITULO PRINCIPAL*/
        .fundoImg {
            background: url("img.webp");
            background-position: 50%;
            padding: 12.5% 0;    
        }
        .faixaTransparente {
            background-color: rgba(255,255,255,0.3);
            padding: 20px 0; 
        }
        .titulo {
            color: black;
            text-align: center;
            margin: 0 25%;
            font-style: bold;
            font-size: 80px;
            font-family: fantasy;
            border-bottom: 3px solid #000000;
            border-top: 3px solid #000000; 
        }

        /*SOBRE*/        
        .fundoCor{
            padding: 5% 2.5% 7.5% 2.5%;
            box-sizing: border-box;
            background-color:#F4A460;
        }
        .tituloSobre{
                color: white;
                margin: 0 0 5% 0;
                font-size: 40px;
                text-transform: uppercase;
                font-family: fantasy;
                /*-webkit-text-stroke-width: 0.25px;
                -webkit-text-stroke-color: #CD853F;*/
        }

        .fundoCor p{
            color: white;
            text-align: center;
            font-size: 30px;
            margin: 0 2.5% 0 2.5%;
        }

        #nossaMissao{
            font-size: 20px;
        }

        em strong{
            color: rgb(255,0,0);
        }

        .itens{
            font-style: italic;
        }

        .fundoBranco{
            background: #FFFFFF;
            padding: 20px;
        }

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

        .img{
            width: 50%;
        }

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

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

        </style>
por Ewerton Lucas Ramos do Espirito Santo
| 37.7k xp | 20 posts

Cara, eu fiz, porém continuou na mesma, eu conferi todo o código e está tudo ok, pelo menos ao meu ver, será que isso pode ser algum bug?

por Frederico Kipeca
| 67.6k xp | 9 posts
<!DOCTYPE html>
<html lang-"pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" type="text/css" 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ções</li>
                <li class="itens">Profissionais Qualificados</li>
            </ul>
            <img src="beneficios.jpg" class="imagembeneficios">
        </div>
    </body>

</html>
por Allan Almeida
| 176.2k xp | 220 posts
Desenvolvedor

É bem estranho mesmo, fiz novamente aqui e está funcionando. Barbearia Alura fica em negrito.

Coloquei assim (Acrescentando o código omitido é claro) e funcionou:

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

        <!-- style dentro de head -->
        <style type="text/css">
            header {
                background: #BBBBBB;
                padding: 20px 0;
            }
            .cabecalho {
                position: relative;
                width: 940px;
                margin: 0 auto;
            }
            nav {
                position: absolute;
                top: 110px;
                right: 0;
            }

            <!-- código omitido  . . . -->
        </style>
    </head>

    <!-- código omitido  . . . -->

</html>

Talvez você possa testar com navegadores diferentes.