# 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;
}
}
```
Sign in with Wallet
Connect another wallet