# Pontos Extras MonkChat
## Missão 1 (HTML E CSS do MONK)
Turma: INFO A
Nome: Mateus Eustáquio
Chamada: 35
## HTML MONKCHAT
```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="index.css">
<link rel="stylesheet" href="../fonts/fonts.css">
<title>MonkChat</title>
</head>
<body>
<div class="conteiner">
<div class="cabecalho">
<img src="../images/logoMonk.png" alt="" srcset="">
<div class="barra"></div>
<div class="titulo">MonkChatWeb </div>
</div>
<div class="conteiner-conteudo">
<div class="conteudo">
<div class="registro">
<div class="label">Sala: <input class = "nome" placeholder="Nome da sala"> </input> </div>
<div class="label">Nick: <input class = "nome" placeholder="Seu nick"> </input> </div>
<div class="botoes">
<button>Criar</button>
<button>Entrar</button>
</div>
</div>
<div class="mensagens">
<div class="texto">Mensagem: </div>
<textarea name="Escreva aqui sua mensagem" placeholder="Escreva aqui sua mensagem" id="" cols="30" rows="10" pa></textarea>
</div>
<div class="Enviarm"> <button>Enviar </button></div>
</div>
<div class="conteiner-chat">
<div class="Atualizar"><img src="../images/AtualizarMonk.png" alt="" srcset=""></div>
<div class="conteudo-chat">
<div class="mensagens-chat">
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:08:10) Michael entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:20) Goku saiu da sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:20) Goku saiu da sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:08:10) Michael entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:20) Goku saiu da sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:08:10) Michael entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:20) Goku saiu da sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:20) Goku saiu da sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:08:10) Michael entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:20) Goku saiu da sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:08:10) Michael entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:20) Goku saiu da sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:20) Goku saiu da sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
<div class="mensagem">(13:08:10) Michael entrou na sala...</div>
<div class="mensagem">(13:10:00) Goku entrou na sala...</div>
<div class="mensagem">(13:10:20) Goku saiu da sala...</div>
<div class="mensagem">(13:06:1) Mateus entrou na sala...</div>
<div class="mensagem">(13:07:35) Pery entrou na sala...</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```````
## Index.CSS e Fonts.CSS
```css=
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,800;1,900&display=swap');
body {
margin: 0px;
background-color: #583BBF
}
*{box-sizing: border-box;}
.conteiner{
margin: 15px;
}
.cabecalho{
display: flex;
flex-direction: row;
align-items: center;
}
.cabecalho img {
max-width: 86px;
max-height: 56px;
}
.barra {
background: linear-gradient(180deg, #BA9D4C -10.17%, #F3D991 115.25%);
width: 4px;
height: 3em;
margin: 0em 1em;
border-radius: 1em;
}
.titulo
{
color: #FFFFFF;
font: 36px Montserrat;
}
.conteiner-conteudo{
display: flex;
flex-direction: row;
margin: 3em;
background: rgba(0, 0, 0, 0.12);
}
.conteudo {
margin-top: 3em;
margin-bottom: 10em;
margin-left: 3em;
margin-right: 3em;
}
.registro {
display: flex;
flex-direction: column;
}
.label {
text-align: center;
color: #FFFFFF;
font: 20px Montserrat;
padding: 2px;
}
input{
width: 10em;
align-items: center;
border-radius: 0.2em;
border-style: none;
outline: none;
}
.botoes{
display: flex;
justify-content: space-around;
padding-top: 10px;
padding-bottom: 50px ;
padding-left: 5em;
padding-right: 1em;
}
button {
cursor: pointer;
transition: 0.3s;
}
button:hover {
color: #7b829b;
box-shadow: 0 8px 15px rgb(0 0 0 / 20%);
}
.botoes button{
width: 50px;
height: 25px;
color: #FFFFFF;
font: 10px Montserrat;
background-color: #50B4BF;
border-radius: 2em;
border-style: none;
outline: none;
}
.texto {
color: #FFFFFF;
font: 20px Montserrat;
}
textarea{
margin: 0px;
height: 214px;
width: 216px;
padding: 2px;
resize: none;
border-radius: 0.5em;
border-style: none;
outline: none;
}
.Enviarm{
display: flex;
flex-direction: row-reverse;
margin-top: 10px;
}
.Enviarm button{
width: 7em;
height: 30px;
color: #FFFFFF;
font: 11px Montserrat;
background-color: #50B4BF;
border-radius: 2em;
border-style: none;
outline: none;
}
.conteiner-chat{
margin: 3em;
margin-top: 1.5em;
overflow-y: auto;
}
.Atualizar{
display: flex;
flex-direction: row-reverse;
padding-bottom: 10px;
}
.conteudo-chat{
padding-right: 10px ;
width: 60em;
height: 30em;
background: rgba(192, 65, 224, 0.19);
overflow-y: auto;
}
.mensagem{
padding-top: 20px;
padding-left: 20px;
padding-bottom: 8px;
font: 12px Montserrat;
color: #FFFFFF;
}
.conteudo-chat::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #3E006f;
}
.conteudo-chat::-webkit-scrollbar
{
width: 7px;
background-color: #3E006f;
border-radius: 10px;
}
.conteudo-chat::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #cbcbcb;
}
``````
Prof eu fiz no vscode......
Sign in with Wallet
Connect another wallet