---
# System prepended metadata

title: Projeto MonkChat HTML e CSS

---

#            Projeto MonkChat HTML e CSS
Erik Alexandre da Silva - INFO B - Nº10


## 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>MonkChat</title>
</head>
<body>
<div class="container">
    
                <div class="cabecalho">
      <div class="logo"> <img src="logo1 1.png" alt=""> </div>
      <div class="barra"> </div>
      <div class="titulo"> MonkChat </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>  Vou sair, vou estudar! </textarea>
            <div class="btn-enviar">
            <button> Enviar </button>
          </div>
      </div>
    </div>

      <div class="container-chat">  
      <div class="chat-atualizar"> <img src="Group 1.png" alt=""> </div>
      <div class="chat">
        <div> (15:02:01) <b> Erik_Cabeção </b> entrou na sala</div>
        <div> (15:02:49) <b> William_da_loucura </b> entrou na sala</div>
        <div> (15:03:01) <b> Erik_Cabeção </b> Boa tarde, hoje o dia vai ter muito html e css?</div>
        <div> (15:05:29) <b> William_da_loucura </b> Boa tarde, espero que não, eu sou preguiçoso! ):</div>
        <div> (15:06:12) <b> Erik_Cabeção </b> Ué, a gente tem que estudar pra ser alguém na vida!</div>
        <div> (15:10:59) <b> William_da_loucura </b> To nem aí, eu sou rebelde!!</div>
      </div>

      </div>

      </div>

      </div>

</div>

</body>
</html>
```
## CSS
```css=

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,700&display=swap");

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;
  }
}

```

