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

Não consigo mexer na section

por Livia Marinho
| 52.1k xp | 16 posts

Oie gente, estou estilizando essa pagina do desfaio 7DaysOfCode da Netflix, mas ão consigo colocar a minha section sobrepondo o banner. Nãos ei o que estou fazendo de errado, se alguém puder me ajudar!

meu HTML está assim: 

<!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>
    <!-- Adicione esta linha no head do seu HTML -->
    <script src="https://kit.fontawesome.com/2befa1272d.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="src/style.css">
    <link rel="shortcut icon" href="img/netflix.png" type="image/x-icon">
</head>

<body>

    <header class="cabecalho">
        <div class="cabecalho-logo">
            <img src="img/logo 1.png" alt="logo netflix">
        </div>
        <div class="cabecalho-menu">
            <div class="cabecalho-menu-left">
                <ul>
                    <li>Início</li>
                    <li>Séries</li>
                    <li>Filmes</li>
                    <li>Bombando</li>
                    <li>Minha lista</li>
                </ul>
            </div>
            <div class="cabecalho-menu-right">
                <ul>
                    <li><i class="fas fa-search"></i></li>
                    <li><i class="fa-solid fa-bell"></i></li>
                    <li class="menu-right-usuario">
                        <img src="img/user 1.png" alt="usuario"><i class="fas fa-sort-down"></i>
                    </li>
                </ul>
            </div>

    </header>
    <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>
            <div class="container-botao">
                <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" style="color: white;"></i>
                    <a class="container-botao-link-info" href="#">Mais informações</a>
                </button>
            </div>
        </div>
    </section>

    <div class="container-secundario">
        <p class="container-titulo">Minha lista</p>

        <section class="container-filmes">

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_01.png" alt="Série Bojack Horseman">
            </div>

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_02.png" alt="Série Ozark">
            </div>

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_03.png" alt="Série A vizinha da mulher na janela">
            </div>

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_04.png" alt="Série A Breaking Bad">
            </div>

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_05.png" alt="Série The end of the Fxxxing World">
            </div>
    </div>
    </section>

    <div class="container-secundario">
        <p class="container-titulo">Minha lista</p>

        <section class="container-filmes">

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_01 (1).png" alt="Série Stranger Things">
            </div>

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_02 (1).png" alt="The Umbrella Academy">
            </div>

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_03 (1).png" alt="Série Peaky Blinders ">
            </div>

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_04 (1).png" alt="Série Arremessando alto">
            </div>

            <div class="container-filmes-item">
                <img class="container-filmes-img" src="img/poster_05 (1).png" alt="Série Amor e gelato">
            </div>
    </div>
    </section>





    <footer></footer>

</body>

</html>
4 respostas
por Livia Marinho
| 52.1k xp | 16 posts

E meu 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);

}
.cabecalho {
    display: flex;
    align-items: center;
}

.cabecalho-logo img {
    width: 5.8rem;
    margin-left: 5rem;
}

.cabecalho-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    color: var(--cor-branco);
    font-size: 1rem;
}

.cabecalho-menu ul li {
    padding-right: 0.5rem;
}

.cabecalho-menu-left ul {
    display: flex;
    list-style: none;
    align-items: center;
    margin-left: 2rem;
    gap: 1rem;
}

.cabecalho-menu-right ul {
    display: flex;
    list-style: none;
    align-items: center;
    margin-right: 5rem;
    gap: 1rem;
}

.menu-right-usuario {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    border-radius: 5px;
    gap: 0.5rem;
}

.menu-right-usuario img {
    width: 2rem;
}

.principal {
    background-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.9) 5%,
            rgba(0, 0, 0, 0.2) 20%,
            rgba(0, 0, 0, 0.2) 80%,
            rgba(0, 0, 0, 0.8) 100%),
        url("../img/banner\ 1.png");
    background-size: cover;
    background-repeat: no-repeat;
    /* padding: 0.26rem 0.75rem 0 0.75rem; */

}

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

.container-img {
    width: 70%;
}

.container-paragrafo {
    font-size: 1.5rem;
    padding: 0 15vw 0 0;

}

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

.container-botao i {
    margin-right: 0.5rem;
}

.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);

}
.container-secundario {
    margin: 0 5rem 0;
    /* border: 3px solid white; */
   

}

.container-titulo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-branco);
    margin-bottom: 2rem;
}

.container-filmes {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 3.5rem;


}
.container-filmes-img {
    width: 18vw;


}

Essa é a imagem do desafio. Como deve ficar!

por Livia Marinho
| 52.1k xp | 16 posts

Como dever ficar! Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!
por Adriano Matos
| 45.3k xp | 12 posts
Técnico em Informática

Olá Livia, tudo bem?

Ainda não conhecia os desafios 7DaysOfCode, dei uma olhadinha lá e decidi que vou fazer todos para criar um bom repositório e praticar o que também estou aprendendo.

Sobre seu código/desafio, eu não sei se já foi mostrado outra forma, mas eu como mero aprendiz sei que dá para fazer isso usando position: relative no objeto "pai" e no objeto filho usando position: absolute; z-index: 1;, depois disso é só finalizar com o alinhamento .

Se tiver mais dúvidas dá uma pesquisada sobre a implementação destes, espero ter ajudado, bons estudos e valeu pela "dica" dos desafios 7DaysOfCode, vamos praticar!

por Livia Marinho
| 52.1k xp | 16 posts

Resolveu, muito obrigada pela ajuda!