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

[Dúvida] Diferenças entre o meu projeto e o original

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos

por Gustavo Ribeiro
| 10.7k xp | 11 posts

Olá, pessoal!

Estou perto de finalizar o projeto, mas enfrento dois problemas:

  1. Porque o "Home" e do "About me" estão colados ao invés de estarem separados por um gap?
  2. Porque o footer tá praticamente no meio da página ao invés de estar fixado no fim?

Já revisitei meu código várias vezes comparando-o com o código dos instrutores e eles estão idênticos. Tá tudo igual, mas o resultado não é o mesmo.

Como resolver esses problemas?

---> Pra ver o print da tela é só acessar aqui: https://drive.google.com/file/d/1DmyoZw4OwvDngrrWW0pKVfOFtpr6j98v/view (Tentei subir pelo fórum mesmo, mas não foi. Se não abrir, me avisa que mando por outro lugar).

4 respostas
por Gustavo Ribeiro
| 10.7k xp | 11 posts

Meus códigos:

  • index.html
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/styles.css">
    <title>First Project</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="aboutme.html">About me</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">
                Eleve seu negócio digital a outro nível com <strong class="titulo-destaque">um Front-end de qualidade!</strong>
            </h1>
            <p class="apresentacao__conteudo__texto">
                Olá! Sou Gustavo Ribeiro, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?
            </p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo"> Acesse minhas redes sociais:</h2>
                <a class="apresentacao__links__navegacao" href="https://www.linkedin.com/in/gurs" target="_blank">
                    <img src="assets/linkedin.png" alt="Logo Linkedin"> Linkedin
                </a>
                <a class="apresentacao__links__navegacao" href="https://github.com/gurbr" target="_blank">
                    <img src="assets/github.png" alt="Logo GitHub"> GitHub
                </a>
            </div>
        </section>
        <section class="apresentacao__imagem">
            <img src="assets/Imagem.png" alt="Foto do Gustavo Ribeiro">
        </section>
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Gustavo Ribeiro.</p>
    </footer>
</body>

</html>
  • aboutme.html
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/styles.css">
    <title>About me</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="aboutme.html">About me</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">
            <p class="apresentacao__conteudo__texto">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
            <p class="apresentacao__conteudo__texto">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat cupidatat non.</p>
        </section>
        <section class="apresentacao__imagem">
            <img src="assets/Imagem.png" alt="Foto de Gustavo Ribeiro">
        </section>
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Gustavo Ribeiro.</p>
    </footer>
</body>

</html>
por Gustavo Ribeiro
| 10.7k xp | 11 posts
  • styles.css
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

:root { /* cria variáveis aplicáveis globalmente */
    --cor-primaria: #000000;
    --cor-secundaria: #f6f6f6;
    --cor-terciaria: #22d4fd;
    --cor-hover: #272727;
    --fonte-primaria: "Krona One", sans-serif;
    --fonte-secundaria: "Montserrat", sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

body {
    /*height: 100vh;      o conteúdo ocupará 100% da height do viewport do usuário */
    box-sizing: border-box; /* o conteúdo da tag filho não sairá da tag pai */
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

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

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

.cabecalho__menu__link{
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}

.apresentacao {
    padding: 5% 15%;
    display: flex;
    align-items: center; /* eixo transversal (cross axis) */
    justify-content: space-between; /* eixo principal (main axis) */
    gap: 82px;
}

.apresentacao__conteudo{
    width: 50%;
    display: flex;
    flex-direction: column; /* eixo principal (main axis) */
    gap: 40px;
}

.apresentacao__conteudo__titulo{
    font-family: var(--fonte-primaria);
    font-size: 2.25rem;
}

.titulo-destaque{
    color: var(--cor-terciaria);
}

.apresentacao__conteudo__texto{
    font-size: 1.5rem;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links{
    display: flex; /* sempre que for utilizar o flexbox, coloca-se o display:flex no elemento pai (nesse caso, na div que é pai das ancoras) */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulo{
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1.5rem;
}

.apresentacao__links__navegacao{
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria); /* define a espessura da borda (px) e seu estilo (solid) */
    width: 50%;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
}

.apresentacao__links__navegacao:hover{
    background-color: var(--cor-hover);
}

.apresentacao__imagem{
    width: 50%;
}

.rodape{
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 24px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 400;
}

@media (max-width: 1200px) {
    .cabecalho{
         padding: 10%;  
    }
    .cabecalho__menu{
        justify-content: center;
    }
    .apresentacao{
        flex-direction: column-reverse;
        padding: 5%;
    }
    .apresentacao__conteudo{
        width: auto;
    }
}
solução!
por DEIVIDY GUSTAVO BATISTA CESAR
| 15.5k xp | 2 posts

Aopa Gustavo, boa tarde!

em relação ao seus problemas:

sua

não esta com o gap pois você escreveu com um "_" a mais no "cabecalho__menu" dento do seu CSS sendo assim ele acabou não achando seu estilo!

e quanto ao seu fotter, acontece que você possui um monitor de resolução maior, sendo assim ele acabou ficando dessa forma, dentro da sua classe "rodape" adicione: position: fixed (para manter fixo esse elemento); bottom: 0 (fixar o rodapé na parte inferior da janela de visualização (viewport) com a posição fixed ou absolute); width: 100% (para ocupar a largura maxima de sua pagina).

espero ter ajudado! bons estudos!

por Gustavo Ribeiro
| 10.7k xp | 11 posts

Boa tarde, Deividy!

Deu tudo certo!

Muitíssimo obrigado pela ajuda. Salvou demais! :-D