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

espaços indesejado no html

por Igor Emmanuel Silva Fonseca
| 101.5k xp | 4 posts

alguém sabe me informar por este espaço está aparecendo no html?![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap" rel="stylesheet">
    <link href="./css/reset.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
</head>
<body>
    <header class="cabecalho">
        <div class="caixa-gray">
            <img class="cabecalho-logo" src="./assents/imagens/logo.png" alt="Igor Fonseca">
        </div>
        <div class="container-black">
            <nav class="menu">
                <ul class="menu-lista">
                    <li class="menu-item"><a class="menu-link ativo" href="#">Início</a></li>
                    <li class="menu-item"><a class="menu-link" href="#">Sobre</a></li>
                    <li class="menu-item"><a class="menu-link" href="#">Projetos</a></li>
                    <li class="menu-item"><a class="menu-link" href="#">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <section class="texto">
            <div class="perfil">
                <img class="perfil-foto" src="./assents/imagens/perfil.jpg" alt="Igor Fonseca">
            </div>
            <div class="alinhamento-texto">
                <h2 class="chamada">Seja criativo, Seja inovador.</h2>
                <p class="apresentacao">Desenvolvedor Web</p>
                <p class="apresentacao-paragrafo">Sendo capaz de me comunicar para uma ampla variedade de pessoas.</p>
                <p class="apresentacao-paragrafo ativo">Estou feliz por você estar aqui!</p>
            </div>
        </section>
        <form class="botoes">
            <label class="botao-fake"><input class="btn" type="submit" value="Portifólio" id="botao-portfolio"></label>
            <label class="botao-fake"><input class="btn2" type="submit" value="Currículo" id="botao-fake"></label>
        </form>
        <footer class="rodape">
            <div class="redes-sociais">
                <a href="https://www.linkedin.com/in/igor-fonseca-1a7ab143/"target="_blank"><img class="logo-rede" src="./assents/imagens/linkedin-icon.png" alt="Likedin"></a>
                <a href="#"><img class="logo-rede" src="./assents/imagens/facebook-icon.png" alt="facebook"></a>
            </div>
        </footer>
    </main>
    <script src="./scripts/botoes.js"></script>
</body>
</html>
2 respostas
por Igor Emmanuel Silva Fonseca
| 101.5k xp | 4 posts
  --base: #000000;
    --azul: #2493cb;
    --cinza: #242424;
    --turqueza: #40E0D0;

    --poppins: 'Poppins', sans-serif;
}

body{
    /*background-image: url(../assents/imagens/background.jpg);*/
    background: var(--base);
    background-repeat: no-repeat;
    /*background-size: 100vw;
    /*background-image: linear-gradient(to left, #000000, #000000, #000000, #171717, #1c1c1c);
    /*background: var(--base);*/
    font-family: var(--poppins);
}

.cabecalho{
    align-items: center;
   /* background-image: linear-gradient(to left, #000000, #000000, #000000, #3c3c3c, #4f4f4f);*/
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    margin-bottom: 1.1rem;
    margin-left: 15rem;
    margin-right: 15rem;
}
.cabecalho-logo{
    text-align: center;
    width: 68%;
}

.caixa-gray{
    background-size: 720px;
}

.menu{
    color: var(--turqueza);
    display: block;
    font-size: 1.05rem;
    font-weight: normal;
    margin-right: 1.25rem;
    text-decoration: none;  
}
.menu-item{
    padding: 1.5rem;
}
.menu-lista{
    display: flex;
}

.menu-link.ativo{
    font-weight: bold;
}

.menu-link:hover{
    color: var(--azul);
    text-decoration: underline;
}

.alinhamento-texto{
    margin-left: 240px;
}
.texto{
    background-position-x: center;
    color: var(--turqueza);
    margin-top: 5rem;
    width: 740px;
}

.chamada{
    text-align: left;
    font-family: var(--poppins);
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.2em;
    width: 390px;
}
.apresentacao{
    font-family: var(--poppins);
    font-size: 1.2rem;
    font-style:normal;
    padding-top: 2rem;
}
.apresentacao-paragrafo{
    display:flex;
    font-family: var(--poppins);
    font-size: 1rem;
    font-weight: 400;
    max-width: 300px;
    padding-top: 1rem;
}

.apresentacao-paragrafo.ativo{
    font-style: italic;
    font-weight: bold;
}
.perfil{
    position: absolute;
    width: 505px;
    height: 437px;
    left: 990px;
    top: 150px;
}
.perfil-foto{
    width: 50%;
}

.botoes{
    align-content: center;
    padding-inline-start: 15%;
    width: auto;
}
.btn{
    align-items: center;
    background-color: var(--turqueza);
    border-radius: 2em;
    color: var(--base);
    display: inline;
    font-family: var(--poppins);
    font-weight: bold;
    height: 30%;
    margin: 60px 10px 5px;
    padding: 18px;
    width: 12%;
}
.btn2{
    align-items: center;
    background-color: var(--cinza);
    border-radius: 2em;
    border-color: var(--turqueza);
    color: var(--turqueza);
    display: inline;
    font-family: var(--poppins);
    font-weight: bold;
    height: 30%;
    margin: 60px 10px 5px;
    padding: 18px;
    width: 12%;
}
.btn:hover{
    background-color: var(--azul);
    padding: 19px;
    transition: 0.2s;
}
.btn2:hover{
    background-color: var(--azul);
    border-color: var(--base);
    color: var(--base);
    padding: 19px;
    transition: 0.1s;
}
#botao-fake{
    align-items: center;
}
.rodape{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6rem;
    height: 5rem;

}
.redes-sociais{
    display: flex;

}

.logo-rede{
    width: 2rem;
    padding: 0.3rem;
}
solução!
por Daniela Michely da Silva
| 311.3k xp | 196 posts

Oi, Igor.

Tudo bem?

A resposta é que o teu .perfil do css está com o position: absolute. Só para confirmar, troca esse bloquinho de código por esse aqui:

.perfil img{
    position: absolute;
    width: 200px;
    left: 990px;
    top: 150px;
}

Sabendo onde está o problema você pode fazer as modificações necessárias. Beleza?

Bons estudos, amigo.