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

Footer ficou a direita da página quando inseri a página do desafio do currículo.

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS

por Lucas Da Anunciação Granadeiro
| 45.9k xp | 9 posts
Analista de Negócios Nível III

Pessoal, estou a 1h tentando entender o que ocorreu para a o footer ter ficado a direita da página conforme os prints abaixo, mas na página de "Currículo" ele se manteve normal. Não estou conseguindo colar imagem nessa publicação, mas vejam o código como está, se alguém puder me ajudar nessa eu agradeço.

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>Portfolio</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
        </nav>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Me chamo Lucas Granadeiro, sou apaixonado por tecnologia, mercado financeiro e xadrez, atualmente estudando desenvolvimento front-end junto da Alura. Vamos conversar?</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes</h2>
                <a class="apresentacao__links__link" href="https://instagram.com/lucasgranadeiro">
                    <img src="./assets/instagram.png">
                    Instagram
                </a>

                <a class="apresentacao__links__link" href="https://github.com/lucasgranadeiro">
                    <img src="./assets/github.png">
                    Github
                </a>

                <a class="apresentacao__links__link" href="https://www.linkedin.com/in/lucasgranadeiro/">
                    <img src="./assets/linkedin.png">
                    Linkedin
                </a>
            </div>
        </section>
        <img src="./assets/lucas.png" alt="Lucas">
    </main>
    <footer class="rodape">
        <p>© Desenvolvido por Lucas Granadeiro</p>
    </footer>
</body>
</html>
3 respostas
por Lucas Da Anunciação Granadeiro
| 45.9k xp | 9 posts
Analista de Negócios Nível III

curriculo.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">
    <link rel="stylesheet" href="./styles/style.css">
    <title>Currículo</title>
</head>
<body>

    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
        </nav>
    </header>
        <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <h1 class="apresentacao__conteudo__titulo">Currículo</h1>
                <p class="apresentacao__conteudo__texto">
                    Possuo sólida experiência em atendimento ao cliente interno e externo e em múltiplos canais e plataforms (e-mail, whatsapp, telefone, chat, etc)
                </p>
                <h2 class="apresentacao__conteudo__titulo">Experiências</h2>
                <p class="apresentacao__conteudo__texto">
                <ul class="apresentacao__conteudo__texto">
                    <li> Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi accusantium maxime quod porro ex vitae excepturi numquam fugiat nostrum et cum voluptatum odio nisi labore, fugit provident voluptate possimus ducimus.</li><br><br>
                    <li> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi repellat rem tempora nam nostrum delectus laboriosam at, harum amet consequuntur voluptatem fugit! Facilis nostrum a facere laborum velit incidunt nobis.</li><br><br>
                    <li> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, praesentium cupiditate quidem temporibus dolor reprehenderit ipsam nostrum, asperiores dicta, nulla optio impedit iure. At, in. Autem architecto voluptatibus animi similique?</li><br><br>
                    <li> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi possimus quidem et molestias nobis exercitationem dicta voluptatem aliquid eos rerum. Sunt eligendi autem eos eveniet! Architecto provident maxime quibusdam vero.</li>
                </ul>
                </p>
                <h2 class="apresentacao__conteudo__titulo">Estudos</h2>
                <p class="apresentacao__conteudo__texto">
                <ul class="apresentacao__conteudo__texto">
                    <li>Nível Médio Completo</a> </li>
                    <li>Formação Data Analysis com Google Sheets <a href="https://cursos.alura.com.br/degree/certificate/df74952e-c1f4-4bf1-a6a2-085149d94b81">com certificado</a></li>
                    <li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
                </ul>
                </p>    
            </section>
            <img src="./assets/lucas.png" alt="Lucas">
        </main> 
    <footer class="rodape">
        <p>© Desenvolvido por Lucas Granadeiro</p>
    </footer>

</body>
</html>
por Lucas Da Anunciação Granadeiro
| 45.9k xp | 9 posts
Analista de Negócios Nível III

style.css

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root{
    --cor-primaria: #000000;
    --cor-secundaria: #f6f6f6;
    --cor-terciaria: #07D849;
}

* {
    margin: 0;
    padding: 0;
}

body {
    /* height: 100vh; */
    box-sizing: border-box;
    background-color: #000;
    color: #f6f6f6;
}


.cabecalho {
    padding: 2% 0% 0% 15%;
}

.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #07D849;
    text-decoration: none;
}

.apresentacao {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo {
    width: 700px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.titulo-destaque {
    color: #07D849;
}

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao__links {
    display: flex;  
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

}

.apresentacao__links__subtitulo {
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.apresentacao__links__link {
    /* background-color: #07D849; */
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #f6f6f6;
    font-family: 'Montserrat', sans-serif;
    border: 3px solid #07D849

}

.apresentacao__links__link:hover {
    background-color: #272727;
    padding: 4%;
}

.rodape {
    padding: 24px;
    color: #000000;
    background-color: #07D849;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;

}

Não sei o que está acontecendo para a dar essa diferenciação no footer, como não consegui colocar a imagem dentro do bloco de texto, segue o link comparando as duas páginas e como o footer está se comportando em cada uma delas: https://imgur.com/a/kzEpTS0

solução!
por Lucas Da Anunciação Granadeiro
| 45.9k xp | 9 posts
Analista de Negócios Nível III

Consegui identificar o erro revisando mais uma vez o código, a tag <header> não estava fechada com o seu barramento </header> fechei as tags e o footer voltou a funcionar corretamente.