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

Quebra de texto e icone dos botoes tambem nao funcionan

Referente ao curso HTML e CSS: praticando HTML/CSS

por Livia Marinho
| 52.1k xp | 16 posts

Oie gente, estou fazendo o desafio de 7DaysOfCode a página da netflix, mas não consigo fazer a quebra de texto do banner e os icones dos botões tambem não aparecem. Poderiam me ajudar?

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Netflix</title>
    <link rel="stylesheet" href="src/style.css">
    <link rel="shortcut icon" href="img/netflix.png" type="image/x-icon">
</head>

<body>
    <section class="container principal">
        <div class="container-caixa">
            <img class="container-img" src="img/poster 1.png" alt="spiderhead">
            <p class="container-paragrafo">Em uma penitenciária de um geração, um detento participa de um experimento
                com drogas que controlam as emoções para um gênio da indústria farmacêutica.</p>

                <button type="submit" class="container-botao-play">
                    <i class="fa-solid fa-play"></i>
                    <a class="container-botao-link" href="#">Assistir</a>
                </button>
                
                <button class="container-botao-info">
                    <i class="fa-solid fa-circle-info"></i>
                    <a class="container-botao-link-info" href="#">Mais informações</a>
                </button>
            </div>
    </section>



    <footer></footer>

</body>

</html>

E o CSS esta assim:

:root {
    --cor-branco: #ffffff;
    --cor-preto: #000000;
    --cor-cinza-escuro: rgba(109, 109, 110, 0.7);
    --cor-gradiente: rgba(109, 109, 110, 0.525);
    --fonte-principal: 'Arial';
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--fonte-principal);
    background-color: var(--cor-preto);
    color: var(--cor-branco);


}

.principal {
    background-image: url("../img/banner\ 1.png");
    background-size: cover;
    background-repeat: no-repeat;
    align-items: left;
    text-align: left;

}

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 15rem 5rem;
}

.container-img {
    width: 70%;
}

.container-paragrafo {
    font-size: 1rem;

}

.container-botao {
    margin-top: 2rem;
    border-radius: 5px;
    cursor: pointer;
}

.container-botao-play {
    background-color: var(--cor-branco);
    padding: 0.6rem 2rem;
    margin-right: 0.75rem;
    font-weight: 600;
    border-radius: 0.125rem;
    font-family: var(--fonte-principal);
    font-size: 100%;
    border: solid transparent;
}

.container-botao-play:hover {
    background-color: rgba(255, 255, 255, 0.777);
}

.container-botao-info {

    padding: 0.6rem 2rem;
    margin-right: 0.75rem;
    font-weight: 600;
    border-radius: 0.125rem;
    background-color: var(--cor-cinza-escuro);
    font-family: var(--fonte-principal);
    font-size: 100%;
    border: solid transparent;

}

.container-botao-info:hover {
    background-color: var(--cor-gradiente);
}
.container-botao-link {
    text-decoration: none;
    color: var(--cor-preto);
}
.container-botao-link-info {
    text-decoration: none;
    color: var(--cor-branco);

}
2 respostas
solução!
por Juliano Granadeiro Teixeira
| 502.2k xp | 86 posts
Agile Coach

Quebra de Texto do Banner:

Para garantir que o texto do banner quebre corretamente, você pode usar a propriedade word-wrap no seu parágrafo (container-paragrafo). Adicione a seguinte linha ao seu CSS:

.container-paragrafo {
    font-size: 1rem;
    word-wrap: break-word; /* Adicione esta linha */
}

Essa propriedade garante que palavras longas ou links não ultrapassem a largura do contêiner, permitindo quebrar a linha conforme necessário.

Ícones dos Botões: Parece que você está usando classes que representam ícones, mas não está carregando a biblioteca de ícones correspondente. No seu HTML, você está usando classes como fa-play e fa-circle-info, que são típicas de bibliotecas de ícones como Font Awesome.

Para corrigir isso, adicione o seguinte trecho ao início do seu HTML, para carregar a biblioteca de ícones Font Awesome:

<!-- Adicione esta linha no head do seu HTML -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha384-hjMJKLcFj2tIeJgj3VC6XLgBxEI33czbfa0ecd8575fSw56HI2mGueDCCJ7A3fq+H" crossorigin="anonymous">

Essa linha importa a biblioteca Font Awesome e faz com que as classes dos ícones sejam reconhecidas e renderizadas corretamente.

Depois de fazer essas alterações, a quebra de texto e os ícones dos botões devem funcionar conforme esperado. Certifique-se de ajustar qualquer estilo adicional conforme necessário para atender aos requisitos específicos do seu projeto.

Se essa resposta te ajudar por favor marque como solução

por Livia Marinho
| 52.1k xp | 16 posts

Obrigada, deu certo!