4
respostas

Estou com problema na fonte e na estilização do formulario

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

Boa noite Pedro, para conseguir te ajudar vou pedir que você compartilhe o código no lugar das fotos do código, vai facilitar o debugger sobre o formulário.

Já sobre a fonte, vejo que o problema pode estar na declaração da variável da font-family.

:root {
...
    --font-family: "Prompt" sans-serif;
...
}

Veja que nessa declaração, faltou somente uma virgula que separa as fontes.

:root {
...
    --font-family: "Prompt", sans-serif;
...
}

:root { --background-color: #00090E; --text-color: #E1E1E1; --primeira-cor: #81FE88; --segunda-cor: #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(--segunda-cor); font-size: 22px; }

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

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

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

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

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

Logo do CodeConnect
<main>
    <div class="container-upload-imagem">
            <div class="container-imagem">
                    <img src="./img/imagem1.png" alt="" class="main-imagem">
            </div>
            <button id="upload-btn">Carregar imagem</button>
            <div class="container-imagem-nome">
                    <p>image_projeto.png</p>
                    <img src="./img/close.svg">
            </div>
    </div>

<div class="container-descricao"></div>
    <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">Descricao</label>
            <textarea id="descricao" name="descricao"></textarea>
        </div>
        <div>
            <label for="categoria">Tags</label>
            <input type="text" id="categoria" name="categoria" />
        </div>
        <ul class="lista-tags">
            <li>
                <p>Front-end</p>
                <img src="./img/close-black.svg">
            </li>
        </ul>
        <div class="container-botoes">
            <button class="botao-descartar">Descartar</button>
            <button class="botao-publicar">Publicar</button>
        </div>
    </form>
</div>
</main>

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

Pedro foi isso que eu cnsegui montar com o código que você mandou, se der pra compartilhar o código completo fica muito mais fácil, aconselho a compartilhar via Github ou Drive.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade