---
# System prepended metadata

title: Monkchat

---

 #  Monkchat
 
**Henrique Dias Costa INFO-A n°16** 
 
 
 
 ![](https://i.imgur.com/ePe9mzb.png)

```html+ 
 
 <!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="monkchat.css">
    <title>MonkChat</title>
</head>
<body>

    <div class="container">

        <div class="cabecalho">
            <div class="logo"> <img src="../assets/imagens/logoSITE.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="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 class="box-mensagem">
                    <div class="label">Mensagem:</div>
                    <textarea></textarea>
                    <button class="botao-enviar"> Enviar </button>
                </div>
            </div>

            <div class="container-chat">
                <img class="botao-atualizar" src="../assets/imagens/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> saiu da sala... </div>
                    
                </div>
            </div>

        </div>

    </div>

    
</body>
</html>

```

```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: 100%;
}

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

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

.logo {

}

.barra {

}

.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: #FFFFFF;
    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;
}

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

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

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

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

```

