---
# System prepended metadata

title: 1° Etapa MonkChat

---

# 1° Etapa MonkChat

> **Aluna:** Patricia Oliveira Paulino
> **Número:** 37


## HTML MonkChat

```htmlembedded=
<!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">
  <link rel="stylesheet" href="MonkChat.css">
  <title>MonkChat</title>
</head>
<body>
  
  <div class="container">
    
    <div class="cabecalho">
       <div class="logo"> <img src="logo1.png" alt=""></div>
       <div class="barra"> </div>
       <div class="titulo"> MonkChatWeb </div>
    </div>

    <div class="conteudo">
      <div class="container-form"> 
         <div class="box-sala">
    </div>


    <div class="salazinha">
      <div class="label"> Sala: </div>
      <input type="text">  </input>
    </div>

     <div class="salazinha2">
     <div class="label"> Nick: </div>

    <input type="text"> </input> 
    </div>

           <div class="button">
           <button> Criar  </button>
           <button> Entrar </button>
            </div>


    <div class="box-mensagem"> 
    <div class="label"> Mensagem: </div>
     <textarea> Olá, tudo bem ai? </textarea>
   <div class="btn-enviar">
     <button> Enviar </button>
   </div>
   </div>
   </div>

   <div class="container-chat">  
    <div class="chat-atualizar"> <img src="Vector.png" alt=""> </div>
    <div class="chat">
     <div> (15:02:01) <b> Patricia_oliveira </b> entrou na sala</div>
     <div> (15:02:11) <b> Patricia_oliveira </b> Tudo bom? </div>
     <div> (15:05:06) <b> Patricia_oliveira </b> Saiu da sala: ...</div>
   </div>

   </div>

   </div>

   </div>

  </div>


   </body>
</html>
````

## CSS MonkChat

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

.container {
  display: flex;
  flex-direction: column;
  background-color: #583bbf;
  color: #ffffff;
  padding: 2em 5em 3em 5em;
  font-family: Montserrat;
  height: 100vh;
}

.cabecalho {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2em;
}

.logo {
  width: 8em;
}

.barra {
  background: linear-gradient(180deg, #ba9d4c -10.17%, #f3d991 115.25%);
  width: 4px;
  height: 4em;
  margin: 0.1em 0.1em;
  border-radius: 2em;
  margin-right: 3em;
}

.titulo {
  font: 700 2em Montserrat;
}

.conteudo {
  display: flex;
  flex-direction: row;
  background: rgba(0, 0, 0, 0.12);
  padding: 3em;
}
.container-form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2em;
}

.box-sala {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.box-sala {
  display: flex;
  flex-direction: row;
}
.label {
  font-weight: 700;
  font-size: 1.2em;
  width: 4em;
  right: 20em;
}

input {
  border: none;
  background: #ffffff;
  border-radius: 5px;

  outline: none;
  padding: 0.4em;
}

button {
  font-weight: 700;
  color: #ffffff;

  background: #50b4bf;
  border-radius: 20px;

  border: none;
  padding: 0.5em 1.5em;

  margin: 0.2em;
}
.button {
  display: flex;
  align-self: flex-end;
  margin-bottom: 3em;
}

.box-mensagem {
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
}

textarea {
  height: 13em;
  border: none;
  background: #ffffff;
  border-radius: 4px;
  outline: none;
  margin: 0.6em 0.1em;
  resize: none;
}

.container-chat {
  display: flex;
  flex-direction: column;

  flex-grow: 1;
  padding: 0em 2em 2em 2em;
}

.chat-atualizar {
  width: 1em;
  align-self: flex-end;
  margin: 0.2em;
}
.chat {
  display: flex;
  flex-direction: column;

  background: rgba(192, 65, 224, 0.19);
  border-radius: 3px;

  padding: 1.5em;
  height: 100%;
}

.chat > div {
  font-size: 0.8em;
  margin: 0.4em 0em;
  overflow-y: auto;
}

.box-sala-botoes {
  font-size: 0.9em;
  margin: 0.4em 0em;
}

.salazinha {
  display: flex;
  flex-direction: row;

  margin: 0.2em;
  align-items: center;

  align-self: flex-end;
}

.salazinha2 {
  display: flex;
  flex-direction: row;

  margin: 0.2em;
  align-items: center;

  justify-content: flex-end;
}

.btn-enviar {
  align-self: flex-end;
}

@media (max-width: 1000px) {
  .container {
    padding: 2em;
    height: 100%;
  }
  .conteudo {
    flex-direction: column;
    padding: 0em;
  }
  .button {
    flex-direction: column;
    margin-bottom: 1em;
    width: 100%;
    align-self: flex-start;
    margin: 1em 0em;
  }

  .btn-enviar {
    align-self: flex-start;
    width: 100%;
  }

  button {
    width: 100%;
    border-radius: 4px;
  }
}
````