---
# System prepended metadata

title: SESSION MONKCHAT

---

# SESSION MONKCHAT
Author: Igor Lima Charles
N°: 18
Grade: 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="../home/index.css"/>
    <link rel="stylesheet" href="../home/index-responsivo.css"/>
    <title>MonkChatWeb</title>
</head>
<body>

    <div class="container">

        <div class="cabecalho">
            <div class="logo">
                <img src="../../assets/images/logo.png"/>
            </div>
            <div class="barra"></div>
            <div class="titulo">MonkChat</div>
        </div>

        <div class="conteudo">
            <div class="forms">


                <div class="box-info-sala">
                    <div class="caixinha">
                        <div class="label">Sala:</div>
                        <input class="input">
                    </div>

                    <div class="caixinha">
                        <div class="label">Nick:</div>
                        <input class="input">
                    </div>

                    <div class="buttons">
                        <button>Criar</button>
                        <button>Enviar</button>
                    </div>
                
                    <div class="label"> Mensagem:</div>
                    <textarea></textarea>
                    <button class="enviar-btn">Enviar</button>
                </div>
            </div>

            <div class="chat">
                <img class="atualizador" src="../../assets/images/atualizador.png"/>
                <div>(13:48:01) <b>Brunex</b> entrou na sala: ...</div>
                <div>(13:48:09) <b>Brunex</b> fala para <b>Todos:</b> Eai, seus lindos </div>
                <div>(13:48:20) <b>Brunex</b> saiu na sala: ...</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: 0em;
padding: 0em; }

* { box-sizing: border-box; }

.container {
    display: flex;
    flex-direction: column;
    
    background-color: #583BBF;
    color: #fff;
    padding: 2em 5em 6em 5em;

    font-family: Montserrat;
    height: 105vh;
}

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

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

.titulo {
    font: 700 2.2em Montserrat;
}

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

.barra {
    background: linear-gradient(180deg, #BA9D4C -10.17%, #F3D991 115.25%);
    width: 4px;
    height: 3em;
    margin: 0em 1em;
    border-radius: 1em;
}

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

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

}

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

    margin: 2em;
}

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

.caixinha {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    margin: .2em;
}

.label {
    font-weight: 700;
    font-size: 1.2em;
    margin-right: 0.2em;
}

.buttons {
    flex-direction: row;
    align-self: flex-end;
    padding-bottom: 1em;
}

.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;
    resize: none;
}

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

.chat {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0em 2em 2em 2em;
}

.atualizador {
    align-self: flex-end;
    margin-bottom: .4em;
    position: absolute;
}

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


# CSS RESPONSIVO
```css=
@media (max-width: 767px) {

* {box-sizing: border-box;}

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

.barra {
    display: none;
}

.container, .conteudo {
    display: flex;
    flex-direction: column;
    padding: 2em;;
    height: 100%;
}

.label > div {
    flex-direction: column;
    width: 1em;
}

.box-info-sala {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin: .2em;
}

.buttons {
    flex-direction: column;
    justify-items: center;
    margin: 1em;
    width: 100%;
}

.enviar-btn {
    width: 100%;
}

.box-mensagem > div {
    flex-direction: column;
}

.chat > div {
    display: flex;
    flex-direction: column;
}

textarea {
    width: 20em;
    padding: 0em 0.2em;
}

button {
    width: 18em;
    border-radius: .5px;
}

input {
    width: 16em;
}
}
```