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

Não consigo usar a tag <strong> neste trecho do meu código, alguem pode me ajudar? Gostaria de deixar o "á vista" em destaque

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação

por LUCAS BUSCARIOLI
| 53.7k xp | 9 posts
<main>
            <ul class="planos">
                <li>
                    <h2>Mensal</h2>
                    <img id="imagem-planos" src="guitar1.png">
                    <p>Plano mensal com valor cheio</p>
                    <p class="plano-preco">R$ 240</p>
                </li>
                <li>
                    <h2>Trimestral</h2>
                    <img id="imagem-planos" src="guitar2.png">
                    <p>Plano trimestral <strong>á vista</strong> com desconto de 5%</p>
                    <p class="plano-preco">R$ 684,00</p>
                </li>
                <li>
                    <h2>Semestral</h2>
                    <img id="imagem-planos" src="guitar3.png">
                    <p>Plano semestral <strong>á vista</strong> com desconto de 10%</p>
                    <p class="plano-preco">R$ 1296,00</p>
                </li>
            </ul>
        </main>
6 respostas
por Lorena Garcia
| 8381.3k xp | 12233 posts
Alura Scuba Team Suporte Educacional

Oi Lucas, tudo bem?

Testei seu código aqui e ele funcionou certinho, veja:

print trabalho

As imagens ficaram assim porque não tenho na minha máquina, mas o <strong> está sendo aplicado. Testei no Google Chrome e Mozilla. Pode ser que tenha algo no resto do seu código que está errado. Faz essa verificaçãozinha :D

Bons estudos!

por LUCAS BUSCARIOLI
| 53.7k xp | 9 posts

será que é culpa do meu CSS? aqui nao consegui

por Lorena Garcia
| 8381.3k xp | 12233 posts
Alura Scuba Team Suporte Educacional

Oi Lucas!

Manda seu código completo pra gente testar ele e ver o que pode tá acontecendo, por favor?

Obrigada :D

por LUCAS BUSCARIOLI
| 53.7k xp | 9 posts
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Planos - Aulas de Guitarra e Violão</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="planos.css">

    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img id="logo-principal" src="logo-guitar.png"></h1>

                <nav>
                    <ul>
                        <li><a href= "index.html"> Home</a></li>
                        <li><a href="planos.html">Planos</a></li>
                        <li><a href="">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <ul class="planos">
                <li>
                    <h2>Mensal</h2>
                    <img id="imagem-planos" src="guitar1.png">
                    <p class="plano-descricao">Plano mensal com valor cheio á vista</p>
                    <p class="plano-preco">R$ 240,00</p>
                </li>
                <li>
                    <h2>Trimestral</h2>
                    <img id="imagem-planos" src="guitar2.png">
                    <p class="plano-descricao">Plano trimestral <strong>á vista</strong> com desconto de 5%</p>
                    <p class="plano-preco">R$ 684,00</p>
                </li>
                <li>
                    <h2>Semestral</h2>
                    <img id="imagem-planos" src="guitar3.png">
                    <p class="plano-descricao">Plano semestral <strong>á vista</strong> com desconto de 10%</p>
                    <p class="plano-preco">R$ 1296,00</p>
                </li>
            </ul>
        </main>

        <footer>
            <img id="imagem-footer" src="logo-footer.png">
            <p class="copyright">&copy; Copyright Lucas Buscarioli - 2022</p>
        </footer>
    </body>

</html>
por LUCAS BUSCARIOLI
| 53.7k xp | 9 posts

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

#logo-principal { width: 30%; }

.caixa { width: 940px; position: relative; margin: 0 auto; }

nav { position: absolute; top: 140px; 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: #FFFFFF; text-decoration: underline; }

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

.planos li { /background: #B098C1;/ 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 #000000; border-radius: 10px; }

.planos li:hover { border-color: #B098C1; }

.planos li:active { border-color: white; }

.planos li:hover h2 { font-size: 35px; }

.planos h2 { font-size: 30px; font-weight: bold; }

#imagem-planos { padding: 20px 0; width: 80%; }

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

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

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

#imagem-footer { width: 100px; }

.copyright { color: white; font-size: 15px; margin-top: 20px; }

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

Oi Lucas!

Testei seu código e ele tem algumas inconsistências, no index.html, no primeiro plano está faltando a tag <strong>, ajuste assim:

<p class="plano-descricao">Plano mensal com valor cheio <strong> á vista</strong></p>

No css tem duas / causando os erros, no .planos li, retira e salva pra deixar assim:

.planos li {
    background: #B098C1;
    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 #000000;
    border-radius: 10px;
}

Fazendo isso deu tudo certinho aqui :D

Espero ter ajudado e bons estudos.