---
# System prepended metadata

title: Final session | Linguagem de programação

---

# Final session | Linguagem de programação 
**Aluno** Murillo Tadeu 
**Turma** Info - D
**Número**: 33

## HTML e CSS | MonkChat
>Index.HTML 
```htmlmixed=
<!DOCTYPE html>
<!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="cabeçalho">
        <div class="logo"> <img src="../assets/images/logo-monk.png" alt=""/> </div>
        <div class="barra"> </div>
        <div class="titulo"> MonkChatWeb </div>
      </div>
      <div class="conteúdo"> 
        <div class="container2"> 
          <div class="box1">
            <div> 
                <div class="sala"> SALA </div>
                <input class="input"> </imput>
            </div>
            <div>
              <div class="sala"> NICK </div>
              <input class="input"> </imput>
            </div>
            <div> 
              <button> Criar </button>
              <button> Entrar </button>
            </div>
            <div class="mensagem"> 
              <div class="sala"> Mensagem: </div>
              <textarea> </textarea>>
              <button class="botão-enviar"> Enviar </button> 
            </div>
          </div>
          <div class="container-conversa">
              <div class="conversa">
                  <div>(15:04:01) <b>CHINELO</b> entrou na sala:...</div>
                  <div>(15:04:03) <b>CHINELO</b> fala para <b>Todos:</b> Aooooba </div>
                  <div>(15:04:09) <b>CHINELO</b> fala para <b>Todos:</b> Tudo certo? </div>
                  <div>(15:04:09) <b>CHINELO</b> fala para <b>Todos:</b> Tá por aí?  </div>
                  <div>(15:04:09) <b>CHINELO</b> fala para <b>Todos:</b> Mano, preciso de um favorzão! </div>
                  <div>(15:04:09) <b>CIRILÃO</b> fala para <b>Todos:</b> Opa, de boas e por aí? Pode falar! </div>
                  <div>(15:04:11) <b>CHINELO</b> fala para <b>Todos:</b> Preciso pegar uma camiseta na lavanderia. </div>
                  <div>(15:04:12) <b>CHINELO</b> fala para <b>Todos:</b> Umas 17h45 </div>
                  <div>(15:04:14) <b>CHINELO</b> fala para <b>Todos:</b> Consegue? </div>
                  <div>(15:04:09) <b>CIRILÃO</b> fala para <b>Todos:</b> Pode deixar com o pai! 🥵🥵 </div>
                  <div>(15:06:18) <b>CHINELO</b> fala para <b>Todos:</b> Beleza! Valeeeeu! </div>
              </div>
          </div>
    </div>
  </body>
</html>
```
>Index.CSS 
```css=
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

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

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

.cabeçalho {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 3em;
}

.logo {
}

.barra {
}

.titulo {
  font: 700 2.2em Montserrat;
}

.conteúdo {
  display: flex;
  flex-direction: row;
  background: rgba(0, 0, 0, 0.12);
  padding: 3em 5em;
  height: 100%;
}

.container2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 2em;
}

.box1 {
  display: flex;
  flex-direction: column;
}

.box2 > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin: 0.2em;
}

.sala {
  font-weight: 700;
  font-size: 1.2em;
  width: 4em;
}

.input,
textarea {
  border: none;
  background: #ffffff;
  border-radius: 5px;
  outline: none;
  padding: 0.4em 0.5em;
}

.container-conversa {
  display: flex;
  flex-direction: column;
  background: rgba(192, 65, 224, 0.19);
  border-radius: 3px;
}

.container-conversa {
  display: flex;
  flex-direction: column;
}

button {
  font-weight: 700;
  color: #fff;
  background: #50b4bf;
  border: none;
  border-radius: 20px;
  padding: 0.5em 1.5em;
  margin: 0.3em;
}
```

