---
# System prepended metadata

title: Monkchat | 1 Etapa

---

# Monkchat | 1 Etapa
Autor: Felipe Oliveira Verissimo
Turma: Info C
Número: 16

[toc]


> 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" />
    <link rel="stylesheet" href="index.css" />
    <title></title>
  </head>
  <body>
   <div class="container">

    <div class="todoconteudo">

      <div class="cabecalho">

       <div class="logo">
         <img src="logo-diamante1.png">
       </div>

       <div class="logo2">
          <img src="logo-barra1.png">
       </div>
       

       <div class="texto1">
        MonkChat
       </div>
      </div>

      <div class="conteudo">

      <div class="cabecalho2">

        <div class="parte1">

          <div class="criacao">

            <div class="sala">
              <div class="sala2"> Sala: </div> 
              <div> <input></input> </div>
            </div>

            <div class="Nick">
              <div class="nick2"> Nick: </div> 
              <div> <input></input> </div>
            </div>

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

            <div class="criacao2">

              <div class="mensagem">
                Mensagem:
              </div>
               <div class="textareaa">
                <textarea>  </textarea>
               </div>
              
      
              <div class="botaotextarea">
                <button> Enviar </button>
              </div>

          </div>
        </div>
      </div>


      

        <div class="ultimaparte">
          
              <div class="mensagens">
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>
               <div class="msg">(15:02:01) Brunex entrou na sala...</div>

              </div>
  
        </div>

      
    </div>




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

> index.css
```css=
body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.container{
  display: flex;
  justify-content: center ;
  background-color: #583bbf;
  height: 100vh;
  color: white;
  font-family: Montserrat;
}

.todoconteudo {
  display: flex;
  flex-direction: column;
  padding: 2em 2em;
}

.cabecalho {
  display: flex;
  flex-direction: row;
}

.logo img{
width: 60px;
}

.logo2 img{
  width: 3px;
  margin-left: 12px;
  }

.texto1 {
margin-left: 14px;
font-size: 30px;
color: #f2ebdc;
margin-bottom: 40px;
margin-top: 7px;
}

.conteudo{
  display: flex;
  background: rgba(0, 0, 0, 0.12);
  flex-direction: row;
  justify-content: center;
  margin-left: 20px;
  width: 1000px;
  
}

.cabecalho2 {
  display: flex;
  flex-direction: row;
  margin: 50px 0px;
}

.parte1{
margin-right: 23px;
}

.criacao{
  margin-bottom: 20px;
  margin-left: 25px;  
}

.criacao2 {
  display: flex;
  flex-direction: column;
  
  border-radius: 3px;
}

.sala {
  display: flex;
  flex-direction: row;
  color: #f2ebdc;
 
}

.sala2{
  margin-right: 13px;
  margin-left: 3px;
  
}

.Nick {
  display: flex;
  flex-direction: row;
  color: #f2ebdc;
}

.nick2{
  margin-right: 13px;
  
}

.sala input{
margin-left: 0.5px;
}

input {
  border-radius: 4px;
  border: none;
  height: 21px;
  width: 133.5px;
  margin-bottom: 9px;
    
}

.botoes{
  margin-left: 55px;
  margin-bottom: 50px;
}

button {
  border-radius: 10px;
  border: none;
  background-color: #50b4bf;
  width: 64.5px;
  height: 23px;
  color: #f2ebdc;
  font-family: Montserrat;
}

.mensagem{
color: #f2ebdc;
}

textarea {
  border-radius: 3px;
  width: 187px;
  height: 134px;
  margin-bottom: 5px;
}

.botaotextarea button{
margin-left: 116px;
width: 70px;
}

.ultimaparte{
  background: rgba(192, 65, 224, 0.19);
width: 550px;
height: 350px;
margin-left: 23px;
border-radius: 4px;
overflow-y: auto; 
}

.msg{
margin-left: 20px;
padding-bottom: 7px;
font-size: 15px;
}

.mensagens{
margin: 20px 0px 0px 10px;
}

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

.ultimaparte::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}

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

@font-face {
  font-family: Montserrat;
  src: url("Montserrat-Bold.ttf");
}
```
