# MONKCHAT CSS E HTML
Cauê Freitas Barreto
INFOB
05
## htmlll
```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>Static Template</title>
<link rel="stylesheet" href="index.css" class="CSS" />
<body>
<div className="containerpri">
<div class="cabecalho">
<div class="barra"></div>
<div class="titulo">
monkchattest
</div>
<div class="LOGO">
<img class="imagem" src="../../assets/images/LOGO.png" />
</div>
</div>
<div class="BODY">
<div class="body2">
<div class="login">
<div class="Salagrupo">
<div class="sala">
Sala:
</div>
<div class="salainput">
<input type="text" placeholder=""></input>
</div>
</div>
<div class="nomegrupo">
<div class="Nick">
Nick:
</div>
<div class="inputNick">
<input type="text" placeholder=""></input>
</div>
</div>
<div class="botaologin">
<button class="botaocriar">Criar</button>
<button class="botaoentrar">Entrar</button>
</div>
</div>
<div class="body2">
<img class="imagem2"src="../../assets/images/vetorr.png"></img>
<div class="oi">
<div class="conversa">(15:02:01) <b>teste</b> entrou na sala...</div>
<div class="conversa">(15:03:25) <b>teste</b> fala para <b>Todos</b>: teste lol omg its fallen stop blowing my mind</div>
<div class="conversa">(15:03:25) <b>teste</b> fala para <b>Todos</b>: teste lol omg its fallen stop blowing my mind</div>
<div class="conversa">(15:03:25) <b>teste</b> fala para <b>Todos</b>: teste lol omg its fallen stop blowing my mind</div>
<div class="conversa">(15:03:25) <b>teste</b> fala para <b>Todos</b>: teste lol omg its fallen stop blowing my mind</div>
<div class="conversa">(15:03:25) <b>teste</b> fala para <b>Todos</b>: teste lol omg its fallen stop blowing my mind</div>
<div class="conversa">(15:03:25) <b>teste</b> fala para <b>Todos</b>: teste lol omg its fallen stop blowing my mind</div>
<div class="conversa">(15:03:25) <b>teste</b> saiu da sala...</div>
</div>
<div class="mensagemdiv">
<h2>Mensagem:</h2>
<textarea class="caixat">
</textarea>
<button>Enviar</button>
</div>
</div>
</div>
</div>
</div>
</body>
```
## cssss
```css=
* {
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
}
.cabecalho {
display: flex;
flex-direction: row;
margin-bottom: 70.3px;
}
.image {
width: 89px;
height: 69px;
}
.titulo {
color: #ffff;
font-size: 33px;
font-family: "Montserrat";
padding-left: 0.9em;
margin-top: 9.1px;
font-weight: bolder;
}
.BODY {
display: flex;
flex-direction: row;
background-color: rgb(83, 51, 172);
padding: 2em;
margin: 0em 2em;
justify-content: space-between;
}
.containerpri {
display: flex;
flex-direction: column;
position: relative;
background-color: #583bbf;
height: 101vh;
width: 100%;
padding: 1.8em 1.8em;
}
.bodyy {
display: flex;
flex-direction: column;
margin-top: 31px;
}
.login {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 260px;
height: 100px;
}
.Salagrupo {
display: flex;
flex-direction: row;
}
.sala {
width: 100px;
font-size: 24.1px;
color: #ffff;
font-family: "Montserrat";
font-weight: bolder;
}
.barra {
border-left: 3px solid;
height: 3.1em;
border-radius: 21px;
margin-left: 1em;
}
.salainput input {
width: 190px;
border-radius: 5px;
height: 30px;
font-family: "Montserrat";
outline: none;
border: 1px solid transparent;
}
.nomegrupo {
display: flex;
flex-direction: row;
margin: 10px 0px;
}
.mensagemdiv button:hover {
cursor: pointer;
background: 100%;
background-color: transparent;
border: 2px solid #e9e9e9;
transition: 0.2s;
}
::placeholder {
color: black;
}
.botaologin {
display: flex;
flex-direction: row;
padding-left: 4em;
}
.botaologin button {
background-color: rgba(82, 181, 190, 1);
color: #ffff;
border: 1px solid transparent;
border-radius: 1.3em;
font-size: 11px;
padding: 0.6em;
margin-right: 10px;
width: 122px;
font-family: "Montserrat";
font-weight: bolder;
cursor: pointer;
}
.botaologin button:hover {
background: 100%;
background-color: transparent;
border: 2px solid #e9e9e9;
transition: 0.2s;
}
.mensagemdiv {
display: flex;
flex-direction: column;
}
.mensagemdiv h2 {
color: #ffff;
font-weight: bolder;
font-family: "Montserrat";
}
.caixat {
background-color: white;
border-radius: 5px;
resize: none;
height: 200px;
padding: 1em;
outline: none;
font-family: "Montserrat";
font-size: 14px;
}
.nick {
width: 90px;
font-size: 24px;
color: #ffff;
font-family: "Montserrat";
font-weight: bolder;
}
.innick input {
width: 190px;
border-radius: 5px;
height: 30px;
font-family: "Montserrat";
outline: none;
border: 1px solid transparent;
}
.mensagemdiv button {
background-color: rgba(82, 181, 190, 1);
border-radius: 20px;
border: 1px solid transparent;
color: white;
font-family: "Montserrat";
font-weight: bolder;
font-size: 16.1px;
width: 100px;
height: 30px;
margin-left: auto;
margin-top: 15px;
}
.mensagemdiv button:hover {
cursor: pointer;
background: 100%;
background-color: transparent;
border: 2px solid #e9e9e9;
transition: 0.2s;
}
.body2 {
display: flex;
flex-direction: column;
}
.oi {
width: 900px;
height: 410px;
background-color: #6834b4;
position: relative;
overflow-y: scroll;
border-radius: 3px;
margin-left: 20px;
margin-top: 10px;
margin-right: 20px;
padding: 1.4em;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: #40046c;
}
::-webkit-scrollbar-thumb {
background-color: #d0cccc;
border-radius: 10px;
height: 1em;
}
::-webkit-scrollbar-track {
max-height: 25%;
height: 10px;
}
.conversa {
color: white;
line-height: 30px;
font-family: "Montserrat";
font-size: 14px;
}
.imagem2 {
width: 16px;
height: 18px;
margin-left: 897px;
}
```
{"metaMigratedAt":"2023-06-16T05:47:59.319Z","metaMigratedFrom":"Content","title":"MONKCHAT CSS E HTML","breaks":true,"contributors":"[{\"id\":\"3380eaa2-6284-4f4e-ba2b-f94e57acbcbf\",\"add\":10180,\"del\":3540}]"}