# Etapa 1º - MonkChatWeb
autor: Guilherme Oliveira Verissimo
turma: InfoC
número: 21
>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>Static Template</title>
</head>
<body>
<div class="container">
<div class="conteudo-site-conpleto">
<div class="logo">
<div class="icon">
<img src="logo.png" />
</div>
<div class="barra">
<img src="barra-logo.png" />
</div>
<div class="textologo">MonkChatWeb</div>
</div>
<div class="conteudo">
<div class="cont-esquerda">
<div class="info-sala">
<div class="inputs">
<div class="sala-titulo">Sala:</div>
<input type="text" />
</div>
<div class="inputs">
<div class="nick-titulo">Nick:</div>
<input type="text" />
</div>
<div class="botoes-sala">
<button>Criar</button>
<button>Entrar</button>
</div>
</div>
<div class="part-mensagem">
<div class="mensagem">Mensagem:</div>
<textarea></textarea>
<button>Enviar</button>
</div>
</div>
<div class="cont-direita">
<div class="carregar"></div>
<div class="area-msg">
<div class="chat">
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
<div class="mensagens">
(15:03:25) <span> Brunex </span> fala para <span> Todos </span>: Opa, tudo bem ai?
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
>index.css
```css=
body {
margin: 0px;
}
* {
box-sizing: border-box;
}
@font-face {
font-family: Montserrat;
src: url("Montserrat-Bold.ttf");
}
.container {
display: flex;
justify-content: center;
background-color: #583bbf;
padding: 2em 2em;
color: white;
height: 100vh;
font-family: Montserrat;
}
.conteudo-site-conpleto {
display: flex;
flex-direction: column;
}
.logo {
display: flex;
flex-direction: row;
align-items: center;
}
.barra img {
margin: 0px 20px 0px 10px;
}
.textologo {
font-size: 36px;
}
.conteudo {
display: flex;
flex-direction: row;
font-size: 24px;
background: rgba(0, 0, 0, 0.12);
margin: 2em 1.9em 0em 1.9em;
justify-content: center;
padding: 2.1em 0em;
width: 1150px;
}
.cont-esquerda {
display: flex;
flex-direction: column;
padding-right: 25px;
}
.conteudo input {
border-radius: 5px;
border: none;
width: 194px;
height: 30px;
}
.inputs {
display: flex;
flex-direction: row;
}
.nick-titulo {
padding-right: 12px;
}
.sala-titulo {
padding-bottom: 15px;
padding-right: 17px;
}
.botoes-sala {
margin-left: 78px;
}
button {
background: #50b4bf;
width: 92px;
height: 33px;
border-radius: 20px;
border: none;
color: white;
font-size: 16px;
margin-top: 15px;
cursor: pointer;
font-family: Montserrat;
}
.part-mensagem {
display: flex;
flex-direction: column;
padding-top: 55px;
}
.part-mensagem button {
margin-left: 170px;
}
.mensagem {
margin-bottom: 4px;
}
textarea {
border-radius: 5px;
width: 267px;
height: 214px;
resize: none;
}
.cont-direita {
padding-left: 25px;
}
.area-msg {
background: rgba(192, 65, 224, 0.19);
border-radius: 3px;
width: 700px;
height: 463px;
overflow-y: auto;
}
.area-msg::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #3e006f;
}
.area-msg::-webkit-scrollbar {
width: 8px;
background-color: #f5f5f5;
}
.area-msg::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #cbcbcb;
}
.mensagens {
padding-bottom: 7px;
font-size: 16px;
}
.chat {
padding: 25px 30px;
font-family: Montserrat;
}
@media (max-width: 1024px) {
* {
height: auto;
padding: 0px;
padding: 0em;
margin: 0px;
margin: 0em;
}
.container {
height: auto;
width: 100vw;
}
.conteudo {
width: 15em;
flex-direction: column;
padding-left: 2em;
}
.barra {
display: none;
}
.logo {
flex-direction: column;
}
.area-msg {
width: 11.1em;
margin-top: 1em;
}
.botoes-sala {
display: flex;
flex-direction: column;
margin-left: 0.1em;
}
.botoes-sala button {
width: 16.6em;
border-radius: 5px;
}
.cont-direita {
margin-left: -1em;
}
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
