Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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; }
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; }
Feed
Perfil
Sobre nos
Sair<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.
