Entrar Ainda não tem acesso?
2
respostas

[Projeto] Exercícios da aula 1 - Meu resultado [página da MundoPet]

Referente ao curso JavaScript: entendendo promises e async/await, no capítulo Construindo a página e atividade Lista de exercícios da aula 1

por Igor Rodrigues de Aguiar
| 57.3k xp | 6 posts

imagem da página web do projetoindex.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>MundoPet</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=Prompt:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
  <aside>
    <img src="assets/Frame 2106.png" alt="Logo da MundoPet">
    <nav>
      <ul class="lista-links">
        <li class="link-destaque">
          <a href="#">
            Publicar
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./assets/feed.svg" alt="ícone do feed">
            Feed
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./assets/cat.svg" alt="ícone do perfil">
            Perfil
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./assets/info.svg" alt="ícone sobre nós">
            Sobre nós
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./assets/logout.svg" alt="ícone de sair">
            Sair
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main>
    <div class="container-upload-imagem">
      <div class="container-imagem">
        <img class="imagem-principal" src="./assets/gato laranja.jpg">
      </div>
      <button class="upload-btn">Carregar imagem</button>
      <div class="container-imagem-texto">
        <p>imagem_do_gato.png</p>
        <img src="./assets/close.svg">
      </div>
    </div>
    <div class="container-descricao">
      <h2>Nova foto</h2>
      <form>
        <div>
          <label for="titulo">Título da foto</label>
          <input type="text" name="titulo" id="titulo"/>
        </div>
        <div>
          <label for="descricao">Descrição</label>
          <textarea name="descricao" id="descricao"></textarea>
        </div>
        <div>
          <label for="tags">Hashtags</label>
          <input type="text" name="tags" id="tags"/>
          <ul class="lista-tags">
            <li>
              <p>Gato laranja</p>
              <img src="./assets/close.svg">
            </li>
          </ul>
        </div>
        <div class="container-buttons">
          <button class="btn-descartar">Descartar</button>
          <button class="btn-publicar">Publicar</button>
        </div>
      </form>
    </div>
  </main>
</body>
</html>
2 respostas
por Igor Rodrigues de Aguiar
| 57.3k xp | 6 posts

style.css

:root {
  --background-color: #00090E;
  --panel-color: #211727;
  --text-color: #E1E1E1;
  --primary-color: #FD7BF0;
  --secondary-color: #888888;
  --font-family: "Prompt", sans-serif;
  --cinza-claro: #E7E5E5;
  --verde-petroleo: #132E35;
}

* {
  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;
  padding: 56px 0;
  gap: 27px;
}

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

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

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

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

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

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

.container-imagem {
  height: 368px;
  background-color: var(--cinza-claro);
  border-radius: 8px;
  padding: 24px 16px;
}

.imagem-principal {
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.upload-btn {
  margin: 16px 0 8px 0;
  width: 100%;
  padding: 12px;
  background-color: var(--panel-color);
  border: 1px solid var(--secondary-color);
  border-radius: 8px;
  color: var(--secondary-color);
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  position: relative;
}

.upload-btn::after {
  content: "";
  background-image: url("./assets/upload.svg");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}

.container-imagem-texto {
  display: flex;
  color: var(--secondary-color);
  gap: 8px;
  font-size: 15px;
}
.container-descricao {
  width: 422px;
}
h2 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 40px;
}

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

form div label {
  font-size: 18px;
  font-weight: 400;
  display: block;
  margin-bottom: 8px;
}

form div input, textarea {
  width: 100%;
  padding: 8px 16px;
  background-color: var(--cinza-claro);
  border: none;
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  color: var(--panel-color);
}

form div input {
  height: 39px;
}

form div textarea {
  height: 161px;
}

.lista-tags {
  display: flex;
  margin-top: 16px;
}

.lista-tags li {
  display: flex;
  list-style-type: none;
  padding: 4px 8px;
  border-radius: 4px;
  gap: 10px;
  background-color: var(--cinza-claro);
  color: var(--panel-color);
  font-size: 18px;
  font-weight: 400;
}

.container-buttons {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.container-buttons button {
  width: 100%;
  padding: 12px 32px 12px 12px;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--primary-color);
}

.btn-descartar {
  background-color: var(--panel-color);
  color: var(--primary-color);
  position: relative;
}

.btn-descartar::after {
  content: "";
  background-image: url("./assets/arrow_forward.svg");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 15px;
  width: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px
}

.btn-publicar {
  background-color: var(--primary-color);
  color: var(--verde-petroleo);
  border: none;
  position: relative;
}

.btn-publicar::after {
  content: "";
  background-image: url("./assets/arrow_forward\ \(1\).svg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 15px;
  width: 15px;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}
por Daniel Nogueira
| 621.1k xp | 1152 posts
Alura Scuba Team Analista de Suporte Educacional

Boa tarde, Igor! Como está?

Incrível! Continue resolvendo os desafios e compartilhando com a comunidade Alura.

Notei que você utilizou variáveis CSS para manter a consistência visual do projeto, aplicou de forma eficaz o flexbox para estruturar o layout responsivo e compreendeu a importância do design semântico e acessível para criar interfaces funcionais e agradáveis.

Permaneça postando as suas soluções, com certeza isso ajudará outros estudantes e tem grande relevância para o fórum.

Ícone de sugestão Para saber mais:

Sugestão de conteúdo para você mergulhar ainda mais sobre o tema:

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

AluraConte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!