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

Posicionamento elementos na tela

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox

por Dimas Francisco Neto
| 14.3k xp | 3 posts

Estou fazendo o projeto do figma do curso mas na minha tela o texto e a imagem não estão alinhados como nos videos, o codigo HTML e CSS está identico ao do video mas na tela nao esta ficando igualInsira aqui a descrição dessa imagem para ajudar na acessibilidade

como deveria estar ficando: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

o meu codigo css:

*{
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}


.destaque_titulo {
    color: #22D4FD;
}

.apresentacao{
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo{
    width: 615px;
}
.apresentacao__conteudo__titulo{
    font-size: 36px;
}
.apresentacao__conteudo__texto{
    font-size: 24px;
}

o css do curso:

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

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.titulo-destaque{
    color: #22D4FD;
}

.apresentacao{
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo{
    width: 615px;
}

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

.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}
5 respostas
por Renan Lima
| 4033.1k xp | 8570 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Dimas.

Tudo bem?

O seu CSS parece está certinho, pode ser que seja algum detalhe no HTML. Verifica se as classes estão nas tags corretas, qualquer coisa se não conseguir, compartilha o código HTML aqui também.

Valeu Dimas.

por Dimas Francisco Neto
| 14.3k xp | 3 posts

Olá tudo bem, meu codigo 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="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="destaque_titulo"> com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora 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>
            <a href="https://Instagram.com/dimasneto19">Instagram</a>
            <a href="https://github.com/dimasnet0">GitHub</a>
    </section>
    </main>
    <img src="Imagem.png" alt="">
    <footer></footer>
</body>
</html>

o HTML do curso:

<!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>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header></header>
    <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á! Sou Joana Santos, desenvolvedora
            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>
            <a href="https://instagram.com/rafaballerini">Instagram</a>
            <a href="https://github.com/guilhermeonrails">GitHub</a>
        </section>
        <img src="imagem.png" alt="Foto da Joana Santos programando">
    </main>
    <footer></footer>
</body>

</html>

Tirando alguns nomes da class que coloquei diferente acredito que esta igual, imagino se nao deve ser por causa do meu navegador ou algo da tela não sei

solução!
por Renan Lima
| 4033.1k xp | 8570 posts
Alura Scuba Team Apoio Educacional - Alura

Ah sim, o detalhe está no código HTML, a tag <img> está fora da <main> por isso a imagem desceu, ela saiu do contexto da main, você precisa colocar a tag <img> dentro da tag <main> no final, veja corrigido:

<!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="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="destaque_titulo"> com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora 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>
            <a href="https://Instagram.com/dimasneto19">Instagram</a>
            <a href="https://github.com/dimasnet0">GitHub</a>
    </section>
    <img src="Image-moca-portifolio.png" alt="">
    </main>
    <footer></footer>
</body>
</html>

Espero ter ajudado, bons estudos.

por Dimas Francisco Neto
| 14.3k xp | 3 posts

Agora deu certo, revi o codigo varias vezes e nao tinha percebido isso kkk, muito obgd

por Renan Lima
| 4033.1k xp | 8570 posts
Alura Scuba Team Apoio Educacional - Alura

Ai sim kkkkk, fico feliz em ajudar, valeu o retorno :)