# Monkchat | 1 Etapa
Autor: Felipe Oliveira Verissimo
Turma: Info C
Número: 16
[toc]
> 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" />
<link rel="stylesheet" href="index.css" />
<title></title>
</head>
<body>
<div class="container">
<div class="todoconteudo">
<div class="cabecalho">
<div class="logo">
<img src="logo-diamante1.png">
</div>
<div class="logo2">
<img src="logo-barra1.png">
</div>
<div class="texto1">
MonkChat
</div>
</div>
<div class="conteudo">
<div class="cabecalho2">
<div class="parte1">
<div class="criacao">
<div class="sala">
<div class="sala2"> Sala: </div>
<div> <input></input> </div>
</div>
<div class="Nick">
<div class="nick2"> Nick: </div>
<div> <input></input> </div>
</div>
<div class="botoes">
<button> Criar </button>
<button> Entrar </button>
</div>
<div class="criacao2">
<div class="mensagem">
Mensagem:
</div>
<div class="textareaa">
<textarea> </textarea>
</div>
<div class="botaotextarea">
<button> Enviar </button>
</div>
</div>
</div>
</div>
<div class="ultimaparte">
<div class="mensagens">
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
<div class="msg">(15:02:01) Brunex entrou na sala...</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
body {
margin: 0px;
}
* {
box-sizing: border-box;
}
.container{
display: flex;
justify-content: center ;
background-color: #583bbf;
height: 100vh;
color: white;
font-family: Montserrat;
}
.todoconteudo {
display: flex;
flex-direction: column;
padding: 2em 2em;
}
.cabecalho {
display: flex;
flex-direction: row;
}
.logo img{
width: 60px;
}
.logo2 img{
width: 3px;
margin-left: 12px;
}
.texto1 {
margin-left: 14px;
font-size: 30px;
color: #f2ebdc;
margin-bottom: 40px;
margin-top: 7px;
}
.conteudo{
display: flex;
background: rgba(0, 0, 0, 0.12);
flex-direction: row;
justify-content: center;
margin-left: 20px;
width: 1000px;
}
.cabecalho2 {
display: flex;
flex-direction: row;
margin: 50px 0px;
}
.parte1{
margin-right: 23px;
}
.criacao{
margin-bottom: 20px;
margin-left: 25px;
}
.criacao2 {
display: flex;
flex-direction: column;
border-radius: 3px;
}
.sala {
display: flex;
flex-direction: row;
color: #f2ebdc;
}
.sala2{
margin-right: 13px;
margin-left: 3px;
}
.Nick {
display: flex;
flex-direction: row;
color: #f2ebdc;
}
.nick2{
margin-right: 13px;
}
.sala input{
margin-left: 0.5px;
}
input {
border-radius: 4px;
border: none;
height: 21px;
width: 133.5px;
margin-bottom: 9px;
}
.botoes{
margin-left: 55px;
margin-bottom: 50px;
}
button {
border-radius: 10px;
border: none;
background-color: #50b4bf;
width: 64.5px;
height: 23px;
color: #f2ebdc;
font-family: Montserrat;
}
.mensagem{
color: #f2ebdc;
}
textarea {
border-radius: 3px;
width: 187px;
height: 134px;
margin-bottom: 5px;
}
.botaotextarea button{
margin-left: 116px;
width: 70px;
}
.ultimaparte{
background: rgba(192, 65, 224, 0.19);
width: 550px;
height: 350px;
margin-left: 23px;
border-radius: 4px;
overflow-y: auto;
}
.msg{
margin-left: 20px;
padding-bottom: 7px;
font-size: 15px;
}
.mensagens{
margin: 20px 0px 0px 10px;
}
.ultimaparte::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #3e006f;
}
.ultimaparte::-webkit-scrollbar {
width: 8px;
background-color: #f5f5f5;
}
.ultimaparte::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #cbcbcb;
}
@font-face {
font-family: Montserrat;
src: url("Montserrat-Bold.ttf");
}
```
{"metaMigratedAt":"2023-06-16T05:59:17.781Z","metaMigratedFrom":"Content","title":"Monkchat | 1 Etapa","breaks":true,"contributors":"[{\"id\":\"6a057479-8a7c-401d-8967-32d1fedb4e2c\",\"add\":5922,\"del\":0}]"}