# MonkChat | web
autor: Thiago Viana Menezes
## MonkChat
> index.html
```htmlmixed=
<!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" />
<title>MonkChat</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="faixa">
<div class="cabeçalho">
<div class="imagem1"><img src="../assets/images/logo.png" /></div>
<div class="imagem2"><img src="../assets/images/Line.png" /></div>
<div class="monkchat">MonkChat</div>
</div>
<div class="lobby">
<div class="esquerda">
<div class="cima">
<div class="NomeDaSala">
<div class="sala">Sala:</div>
<div class="InserirNome"><input class="nome" /></div>
</div>
<div class="Nick">
<div class="nick">Nick:</div>
<div class="InserirNick"><input class="nome" /></div>
</div>
<div class="botão">
<div class="criar b"><button>Criar</button></div>
<div class="entrar b"><button>Entrar</button></div>
</div>
</div>
<div class="baixo">
<div class="Mensagem">Mensagem:</div>
<div class="mensagem"><input class="M" /></div>
<div class="enviar"><button>Enviar</button></div>
</div>
</div>
<div class="direita">
<div class="recarregar">
<img src="../assets/images/Group.png" />
</div>
<div class="chat">
<div class="comentario1">
(15:02:01) <b>Thiago</b> entrou na sala...
</div>
<div class="comentario2">
(15:03:25) <b>Thiago</b> fala para <b>Todos:</b> opa, tudo bem ai
?
</div>
<div class="comentario3">
(15:03:25) <b>Thiago</b> saiu da sala...
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.faixa {
display: flex;
flex-direction: column;
background-color: #583bbf;
padding: 2em 2em;
height: 100vh;
padding-left: 5em;
}
/*cabeçalho*/
.cabeçalho {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 2.2em;
margin-right: 500em;
}
.imagem1 img {
width: 4.5em;
}
.imagem2 {
padding-left: 0.8em;
padding-right: 1.5em;
}
.imagem2 img {
height: 3.2em;
}
.monkchat {
font-size: 1.8em;
color: white;
font-family: "Montserrat";
font-weight: bold;
}
/*lobby*/
.lobby {
display: flex;
flex-direction: row;
background-color: rgba(0, 0, 0, 0.12);
height: 30em;
width: 70em;
}
.cima {
padding: 3em 2em;
}
.NomeDaSala {
display: flex;
flex-direction: row;
align-items: center;
}
.sala {
padding-right: 1em;
padding-left: 0.2em;
font-family: "Montserrat";
font-weight: bold;
color: #ffffff;
}
.Nick {
display: flex;
flex-direction: row;
align-items: center;
padding-top: 0.6em;
}
.nick {
padding-right: 1em;
font-family: "Montserrat";
font-weight: bold;
color: #ffffff;
}
.nome {
border: none;
border-radius: 0.3em;
height: 2em;
width: 11em;
background-color: #ffffff;
outline: none;
padding: 0.5;
}
.botão {
display: flex;
flex-direction: row;
padding: 0.5em 3.6em;
}
.b button {
width: 5.3em;
height: 2em;
border: none;
border-radius: 1em;
background: #50b4bf;
color: #ffffff;
}
.criar {
padding-right: 0.3em;
}
/*baixo*/
.baixo {
padding-left: 2.2em;
}
.Mensagem {
font-size: 1.3em;
font-family: "Montserrat";
font-weight: bold;
color: #ffffff;
}
.M {
border-radius: 0.2em;
padding-bottom: 7.5em;
width: 15em;
background-color: #ffffff;
border: none;
align-items: flex-start;
outline: none;
}
.enviar button {
width: 6.5em;
height: 2em;
border: none;
border-radius: 1em;
background: #50b4bf;
color: #ffffff;
}
.enviar {
padding-left: 7em;
padding-top: 0.7em;
}
/*direita*/
.direita {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.recarregar img {
width: 1em;
}
.recarregar {
padding-right: 0.5em;
padding-top: 1.2em;
padding-bottom: 0.2em;
}
.chat {
display: flex;
flex-direction: column;
background: rgba(192, 65, 224, 0.19);
border-radius: 3px;
height: 23.2em;
width: 52em;
padding: 2em;
color: #ffffff;
font-size: 0.9em;
font-family: "Montserrat";
font-weight: 400;
overflow-y: auto;
}
.chat::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #3e006f;
}
.chat::-webkit-scrollbar {
border-radius: 10px;
width: 5px;
background-color: #ffffff;
}
.chat::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #cbcbcb;
}
b {
font-family: "Montserrat";
}
.comentario2 {
padding-top: 1em;
padding-bottom: 1em;
}
```
Sign in with Wallet
Connect another wallet