Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Posicionamento dos inputs e textarea.

Referente ao curso JavaScript: entendendo promises e async/await, no capítulo Construindo a página e atividade Estilos específicos

por Fernando Mota De Avelar Azeredo Junior
| 23.2k xp | 20 posts

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade ) Boa tarde! Alguém pode me ajudar a descobrir porque os inputs e textarea não estão ficando em baixo do label? Não consegui achar o erro.

segue o HTML e CSS:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>CodeConnect</title>
</head>

<body>

    <aside>
        <img src="./img/Logo.svg" alt="Logo da codeconection">

        <nav>
            <ul class="lista-links">
                <li>
                    <a href="#" class="link-destaque">Publicar</a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/feed.svg">
                        Feed
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/account_circle.svg">
                        Perfil
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/info.svg">
                        Sobre nós
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/logout.svg">
                        Sair
                    </a>
                </li>
            </ul>

        </nav>

    </aside>

    <main>
        <div class="conteiner-upload-imagem">
            <div class="conteiner-imagem">
                <img src="./img/imagem1.png" alt="" class="main-imagem">
            </div>
            <button>Carregar imagem</button>
            <div class="conteiner-imagem-nome">
                <p>image_projeto.png</p>
                <img src="./img/close.svg">
            </div>
        </div>
        <div class="conteiner-descricao">
            <h2>Novo projeto</h2>
            <form>
                <div>
                    <label for="nome">Nome do projeto</label>
                    <input type="text" id="nome" name="nome" />
                </div>
                <div>
                    <label for="descricao">Descrição</label>
                    <textarea id="descricao" name="descricao"></textarea> 
                </div>
                <div>
                    <label for="nome">Tags</label>
                    <input type="text" id="categoria" name="categoria" />
                </div>
                <ul class="lista-tags">
                    <li>
                        <p>Fron-end</p>
                        <img src="./img/close-black.svg">
                    </li>
                </ul>
                <div class="conteiner-botoes">
                    <button class="botao-descartar">Descartar</button>
                    <button class="botao-publicar">Publicar</button>    
                </div>
            </form>
        </div>
    </main>


    <script src="script.js"></script>
</body>

</html>
2 respostas
por Fernando Mota De Avelar Azeredo Junior
| 23.2k xp | 20 posts

Segue o CSS, não coube na outra msg.

:root {
    --background-color: #00090E;
    --text-color: #E1E1E1;
    --primary-color: #81FF88;
    --secondery-color: #888888;
    --tag-color: #171D1F;
    --font-family: "prompt", sans-serif;
    --itens-background: #171D1F;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);

    display: flex;
    justify-content: center;
    align-items: start;

    height: 100vh;
    gap: 27px;
    padding: 56px 0;

}

aside {
    background-color: var(--itens-background);
    border-radius: 10px;
    height: 100%;
    padding: 40px 16px;
    text-align: center;
}

.lista-links {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 80px;
    align-items: center;
    list-style-type: none;
}

.lista-links li a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: var(--secondery-color);
    font-size: 22px;
}

.lista-links li:first-of-type a {
    color: var(--primary-color)
}

.link-destaque {
    border: 1px solid var(--primary-color);
    padding: 12px 30px;
    border-radius: 8px;
}

main {
    background-color: var(--itens-background);
    border-radius: 10px;
    padding: 32px;
    display: flex;
    gap: 24px;
}

h2 {
    font-size: 26px;
    margin-bottom: 40px;
    font-weight: 600;
}

form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
por Victor Costa Santos
| 2183k xp | 4307 posts
Alura Scuba Team Monitor do suporte educacional

Oi, Fernando!

O problema estava na organização dos elementos do formulário. Resolva fazendo adicionando a div depois de form:

form div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

Espero ter ajudado! Bons estudos!

Sucesso ✨