---
# System prepended metadata

title: 1° fase session monkchat

---

# 1° fase session monkchat

**NOME** KEVIN RIBEIRO DE ANDRADE
**NUMERO** 27
**TURMA** INFOA

## HTML

```htmlembedded=
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="monkpage.css">
        <title>MonkChat</title>
    </head>
    <body>
        <div class="container">
            <div class="cabecalho">
                <div class="logo"><img src = "../assets/images/logoSITEmonk.png"/> </div>
                <div class="barra"> <hr></hr> </div>
                <div class="titulo"> MonkChatWeb </div>
            </div>
            <div class="conteudo">
                <div class="container-forms">
                    <div class="box-sala">
                        <div>
                            <div class="label">sala:</div>
                            <input class="input"></input>
                        </div>
                        <div>
                            <div class="label">Nick:</div>
                            <input class="input"></input>
                        </div>
                        <div>
                            <button> Criar </button>
                            <button> Entrar </button>
                        </div>
                    </div>
                    <div>
                        <div class="box-mensages"></div>
                        <div class="label">mensage:</div>
                        <textarea></textarea>
                        <button class="btn-enviar"> Enviar </button>
                    </div>
                </div>
                      <div class="container-chat">
                        <img class="chat-atualizar" src="../assets/images/Vetor.png" alt="" />
                        <div class="chat">
                            <div>(15:02:01) <b>Brunex</b> entrou na sala: ...</div>
                            <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
                            <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
                            <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
                            <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
                            <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
                            <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
                            <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
                            <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
                      </div>
                 </div>
            </div>
        </div>

    </body>
</html>

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

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

    align-items: center;
    margin-bottom: 3em;
}

.barra hr {
    transform: rotate(180deg);
    height: 70px;
  

   margin: 0em 1.3em;

}
.titulo {
font: 700 2.2em Montserrat;
}

.conteudo {
    display: flex;
    flex-direction: row;
    background: rgba(0, 0, 0, 0.12);

    padding: 3em 5em;
    height: 100%;
}

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

    padding: 2em;
}

.box-sala {
    display: flex;
    flex-direction: column;
}

.box-sala > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    margin: .2em;
}

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


.input, textarea {
    border: none;
    background: #FFFF;
    border-radius: 5PX;

    outline: none;
    padding: .4em .5em;
}

button {
    font-weight: 700;
    
    color: #fff;
    background: #50B4BF;
    
    border: none;
    border-radius: 20px;
    
    padding: .5em 1.5em;
    margin: .3em;
}

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

textarea {
    height: 12em;
    margin: .5em 0em;
}

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

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

 padding: 0em 2em 2em 2em;
}

.chat-atualizar {
    width: 1em;
    align-self: flex-end;
    margin: .4em;
}

.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: .9em;
    margin: .4em 0em;
}

```