---
# System prepended metadata

title: Submissão 1 MonkChat | Linguagem de Programação

---

# Submissão 1 MonkChat | Linguagem de Programação
**Autor**: Vitório Trindade Santana
**Turma**: Informática C
**Número**: 50

[toc]

## Links

Link do projeto: https://codesandbox.io/s/monk-8n3y7?file=/src/pages/index.html


Link para vizualização do projeto: https://8n3y7.csb.app/src/pages/index.html

## Código Html

```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> MonkChat </title>
    <link rel="stylesheet" href="../pages/index.css"/>
    <link rel="stylesheet" href="../pages/responsivo.css"/>
  </head>
  <body>
    <div class="container-MonkChat">
      <div class="t1-logo">
          <div class="t1-imagem-logo"> <img src="../assets/images/logoMonk.png"/> </div>
          <div class="t1-barra-meio"> </div>
          <div class="t1-nome-monk"> MonkChat </div>
      </div>
      <div class="t1-conteudo">
        <div class="t1-sala-e-mensagens">
            <div class="t1-sala-informacoes">
              <div class="t1-nome-sala"> 
                <div class="t1-texto-sala"> Sala: </div>
                <div class="t1-input-sala"> <input/> </div>
              </div>
              <div class="t1-usuario">
                <div class="t1-texto-usuario"> Nick: </div>
                <div class="t1-input-sala"> <input/> </div>
              </div>
              <div class="t1-botoes-entrar">
                <div class="t1-botao-criar"> <button> Criar </button> </div>
                <div class="t1-botao-entrar"> <button> Entrar </button> </div>
              </div>
            </div>
            <div class="t1-campo-mensagem">
              <div class="t1-texto-mensagem"> Mensagem: </div>
              <div class="t1-area-digitacao"> <textarea rows="12" cols="32" placeholder="Digite aqui a sua mensagem!"></textarea> </div> 
              <div class="t1-botao-enviar"> <button> Enviar </button> </div>
            </div>
        </div>
        <div class="t1-area-mensagens">
          <div class="t1-botao-recarregar"> <img src="../assets/images/reload.png"/> </div>
          <div class="t1-campo-mensagens">
            <div class="t1-mensagem"> 
              <div class="t1-horario"> (15:02:01) </div>  <a class="t1-nome-usuario"> Brunex </a> entrou na sala 
            </div>
            <div class="t1-mensagem"> 
              <div class="t1-horario"> (15:02:25) </div> <a class="t1-nome-usuario"> Brunex </a> fala para <a class="t1-para-quem"> Todos:</a> Opa, tudo bem ai?
            </div>
            <div class="t1-mensagem"> 
              <div class="t1-horario"> (15:02:25) </div> <a class="t1-nome-usuario"> Brunex </a> saiu da sala... 
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
```

## Código Css

```css=
body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.container-MonkChat {
  background-color: #583bbf;
  display: flex;
  flex-direction: column;

  padding: 2em 4em 0em 4em;

  height: 100vh;
}

.t1-logo {
  display: flex;
  flex-direction: row;
  align-items: center;

  margin-bottom: 2em;
}

.t1-imagem-logo img {
  width: 5em;
  height: 3.8em;
}

.t1-barra-meio {
  margin: 0em 1.2em;

  background: linear-gradient(180deg, #ba9d4c -10.17%, #f3d991 115.25%);
  width: 4px;
  height: 3em;
  margin: 0em 1em;
  border-radius: 1em;
}

.t1-nome-monk {
  font: 2em Montserrat-SemiBold;
  font-weight: 600px;
  color: white;
}

.t1-conteudo {
  display: flex;
  flex-direction: row;
  background-color: #4d34a8;
  padding: 1.5em 5em 2.5em 5em;

  width: 78em;
}

.t1-sala-e-mensagens {
  display: flex;
  flex-direction: column;

  padding-top: 1.8em;
  margin-right: 6em;
}

.t1-sala-informacoes {
  margin-bottom: 2.5em;
}

.t1-nome-sala {
  margin-bottom: 0.3em;
}

.t1-usuario {
  margin-bottom: 0.6em;
}

.t1-nome-sala,
.t1-usuario {
  display: flex;
  flex-direction: row;

  align-items: center;
}

.t1-texto-sala {
  margin-bottom: 0.2em;
}

.t1-texto-sala,
.t1-texto-usuario {
  font: 1.1em Montserrat-SemiBold;
  color: white;
  flex-grow: 1;
}

.t1-input-sala input {
  font: 700 0.8em Montserrat-SemiBold;

  border-radius: 0.45em;
  border: none;
  outline: none;

  padding: 0.5em 0.8em;
}

.t1-botoes-entrar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.t1-botao-criar {
  margin-right: 0.3em;
}

.t1-botao-criar button,
.t1-botao-entrar button {
  font: 0.75em Montserrat-SemiBold;
  color: white;
  background-color: #50b4bf;

  border-radius: 2em;
  border: none;
  outline: none;

  padding: 0.4em 1.6em;
}

.t1-campo-mensagem {
  display: flex;
  flex-direction: column;
}

.t1-texto-mensagem {
  font: 1.3em Montserrat-SemiBold;
  color: white;

  margin-bottom: 0.3em;
}

.t1-area-digitacao {
  margin-bottom: 0.4em;
}

.t1-area-digitacao textarea {
  padding: 0.7em 0.9em;
  border: none;
  border-radius: 0.3em;
  outline: none;
  resize: none;

  font: 700 0.8em Montserrat-SemiBold;
}

.t1-botao-enviar {
  align-self: flex-end;
}

.t1-botao-enviar button {
  font: 0.75em Montserrat-SemiBold;
  color: white;
  background-color: #50b4bf;

  border-radius: 2em;
  border: none;
  outline: none;

  padding: 0.4em 1.6em;
}

.t1-botao-recarregar {
  display: flex;
  justify-content: flex-end;

  margin-bottom: 1em;
}

.t1-botao-recarregar img {
  width: 0.9em;
  height: 0.96em;
}

.t1-campo-mensagens {
  background-color: #6237b3;
  border-radius: 0.2em;

  width: 45em;
  height: 24.8em;
  padding: 1em;

  overflow-y: auto;
}

.t1-campo-mensagens::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #3e006f;
}

.t1-campo-mensagens::-webkit-scrollbar {
  width: 0.3em;
  background-color: #3e006f;
  border-radius: 0.6em;
}

.t1-campo-mensagens::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #cbcbcb;
}

.t1-mensagem {
  display: flex;
  flex-direction: row;

  font: 0.8em Montserrat-SemiBold;
  color: white;

  text-align: center;

  margin-bottom: 0.7em;
}

.t1-horario {
  font: 700 1em Montserrat-SemiBold;
  margin-right: 0.4em;
}

.t1-nome-usuario {
  font: 1em Montserrat-SemiBold;
  margin-right: 0.4em;
}

.t1-para-quem {
  font: 1em Montserrat-SemiBold;

  margin: 0em 0.4em;
}

@font-face {
  font-family: Montserrat-SemiBold;
  src: url("../assets/fonts/Montserrat-SemiBold.ttf");
}

@font-face {
  font-family: Montserrat-Thin;
  src: url("../assets/fonts/Montserrat-Thin.ttf");
}

```

## Código Css Responsivo 

```css=
@media (max-width: 1024px) {
  .container-MonkChat {
    padding: 2em 1.5em;

    height: 100%;
  }

  .t1-logo {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 2em;
  }

  .t1-barra-meio {
    display: none;
  }

  .t1-nome-monk {
    margin-bottom: 1em;
  }

  .t1-conteudo {
    display: flex;
    flex-direction: column;
    padding: 1em 1.5em;

    width: 100%;
  }

  .t1-sala-e-mensagens {
    padding-top: 1.8em;
    width: 100%;
  }

  .t1-sala-informacoes {
    margin-bottom: 2.5em;
  }

  .t1-texto-sala,
  .t1-texto-usuario {
    margin-right: 1.5em;
    flex-grow: 0;
  }

  .t1-nome-sala {
    margin-bottom: 0.3em;
  }

  .t1-usuario {
    margin-bottom: 1.5em;
  }

  .t1-input-sala {
    flex-grow: 1;
  }

  .t1-input-sala input {
    width: 100%;

    padding: 0.5em 0.7em;
  }

  .t1-botao-criar {
    margin-bottom: 0.3em;
  }

  .t1-botoes-entrar {
    display: flex;
    flex-direction: column;

    width: 100%;
  }

  .t1-botao-criar {
    margin: 0em 0em 0.5em 0em;
  }

  .t1-botao-criar button,
  .t1-botao-entrar button {
    border-radius: 0.3em;
    width: 100%;
  }

  .t1-campo-mensagem {
    display: flex;
    flex-direction: column;
    width: 100%;

    margin-bottom: 1.4em;
  }

  .t1-texto-mensagem {
    font: 1.3em Montserrat-SemiBold;
    color: white;

    margin-bottom: 0.3em;
  }
  .t1-area-digitacao {
    margin-bottom: 0.5em;
  }

  .t1-area-digitacao textarea {
    width: 100%;

    font: 700 0.8em Montserrat-SemiBold;
  }

  .t1-botao-enviar {
    align-self: center;
    width: 100%;
  }

  .t1-botao-enviar button {
    border-radius: 0.3em;
    padding: 0.4em 1.6em;
    width: 100%;
  }

  .t1-botao-recarregar {
    margin-bottom: 1em;
  }

  .t1-botao-recarregar img {
    width: 1.2em;
    height: 1.3em;
  }

  .t1-campo-mensagens {
    background-color: #6237b3;
    border-radius: 0.2em;

    width: 100%;
    height: 15em;
    padding: 1em;
    margin-bottom: 1em;
  }

  .t1-mensagem {
    flex-wrap: wrap;
    margin-bottom: 1.5em;
  }

  .t1-horario {
    margin-right: 100%;
  }

  .t1-para-quem {
    margin: 0em 0.2em;
  }
}
```