---
# System prepended metadata

title: MonkChat | web

---

# MonkChat | web
autor: Thiago Viana Menezes

## MonkChat
> index.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="index.css" />
  </head>
  <body>
    <div class="faixa">
      <div class="cabeçalho">
        <div class="imagem1"><img src="../assets/images/logo.png" /></div>
        <div class="imagem2"><img src="../assets/images/Line.png" /></div>
        <div class="monkchat">MonkChat</div>
      </div>

      <div class="lobby">
        <div class="esquerda">
          <div class="cima">
            <div class="NomeDaSala">
              <div class="sala">Sala:</div>
              <div class="InserirNome"><input class="nome" /></div>
            </div>
            <div class="Nick">
              <div class="nick">Nick:</div>
              <div class="InserirNick"><input class="nome" /></div>
            </div>
            <div class="botão">
              <div class="criar b"><button>Criar</button></div>
              <div class="entrar b"><button>Entrar</button></div>
            </div>
          </div>
          <div class="baixo">
            <div class="Mensagem">Mensagem:</div>
            <div class="mensagem"><input class="M" /></div>
            <div class="enviar"><button>Enviar</button></div>
          </div>
        </div>

        <div class="direita">
          <div class="recarregar">
            <img src="../assets/images/Group.png" />
          </div>

          <div class="chat">
            <div class="comentario1">
              (15:02:01) <b>Thiago</b> entrou na sala...
            </div>
            <div class="comentario2">
              (15:03:25) <b>Thiago</b> fala para <b>Todos:</b> opa, tudo bem ai
              ?
            </div>
            <div class="comentario3">
              (15:03:25) <b>Thiago</b> saiu da sala...
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

```

> index.css

```css=
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");

* {
  box-sizing: border-box;
}
body {
  margin: 0px;
}

.faixa {
  display: flex;
  flex-direction: column;
  background-color: #583bbf;
  padding: 2em 2em;
  height: 100vh;

  padding-left: 5em;
}

/*cabeçalho*/

.cabeçalho {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 2.2em;
  margin-right: 500em;
}

.imagem1 img {
  width: 4.5em;
}

.imagem2 {
  padding-left: 0.8em;
  padding-right: 1.5em;
}

.imagem2 img {
  height: 3.2em;
}

.monkchat {
  font-size: 1.8em;
  color: white;
  font-family: "Montserrat";
  font-weight: bold;
}

/*lobby*/

.lobby {
  display: flex;
  flex-direction: row;
  background-color: rgba(0, 0, 0, 0.12);
  height: 30em;
  width: 70em;
}

.cima {
  padding: 3em 2em;
}

.NomeDaSala {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.sala {
  padding-right: 1em;
  padding-left: 0.2em;
  font-family: "Montserrat";
  font-weight: bold;
  color: #ffffff;
}

.Nick {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 0.6em;
}

.nick {
  padding-right: 1em;
  font-family: "Montserrat";
  font-weight: bold;
  color: #ffffff;
}

.nome {
  border: none;
  border-radius: 0.3em;
  height: 2em;
  width: 11em;
  background-color: #ffffff;
  outline: none;
  padding: 0.5;
}

.botão {
  display: flex;
  flex-direction: row;
  padding: 0.5em 3.6em;
}

.b button {
  width: 5.3em;
  height: 2em;
  border: none;
  border-radius: 1em;
  background: #50b4bf;
  color: #ffffff;
}

.criar {
  padding-right: 0.3em;
}

/*baixo*/

.baixo {
  padding-left: 2.2em;
}

.Mensagem {
  font-size: 1.3em;
  font-family: "Montserrat";
  font-weight: bold;
  color: #ffffff;
}

.M {
  border-radius: 0.2em;
  padding-bottom: 7.5em;
  width: 15em;
  background-color: #ffffff;
  border: none;
  align-items: flex-start;
  outline: none;
}

.enviar button {
  width: 6.5em;
  height: 2em;
  border: none;
  border-radius: 1em;
  background: #50b4bf;
  color: #ffffff;
}

.enviar {
  padding-left: 7em;
  padding-top: 0.7em;
}

/*direita*/

.direita {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.recarregar img {
  width: 1em;
}

.recarregar {
  padding-right: 0.5em;
  padding-top: 1.2em;
  padding-bottom: 0.2em;
}

.chat {
  display: flex;
  flex-direction: column;
  background: rgba(192, 65, 224, 0.19);
  border-radius: 3px;
  height: 23.2em;
  width: 52em;
  padding: 2em;
  color: #ffffff;
  font-size: 0.9em;
  font-family: "Montserrat";
  font-weight: 400;

  overflow-y: auto;
}

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

.chat::-webkit-scrollbar {
  border-radius: 10px;
  width: 5px;
  background-color: #ffffff;
}

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

b {
  font-family: "Montserrat";
}

.comentario2 {
  padding-top: 1em;
  padding-bottom: 1em;
}

```