# Projeto MonkChat HTML e CSS
Erik Alexandre da Silva - INFO B - Nº10
## 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>MonkChat</title>
</head>
<body>
<div class="container">
<div class="cabecalho">
<div class="logo"> <img src="logo1 1.png" alt=""> </div>
<div class="barra"> </div>
<div class="titulo"> MonkChat </div>
</div>
<div class="conteudo">
<div class="container-form">
<div class="box-sala"> </div>
<div class="salazinha">
<div class="label"> Sala: </div>
<input type="text"> </input>
</div>
<div class="salazinha2">
<div class="label"> Nick: </div>
<input type="text"> </input>
</div>
<div class="button">
<button> Criar </button>
<button> Entrar </button>
</div>
<div class="box-mensagem">
<div class="label"> Mensagem: </div>
<textarea> Vou sair, vou estudar! </textarea>
<div class="btn-enviar">
<button> Enviar </button>
</div>
</div>
</div>
<div class="container-chat">
<div class="chat-atualizar"> <img src="Group 1.png" alt=""> </div>
<div class="chat">
<div> (15:02:01) <b> Erik_Cabeção </b> entrou na sala</div>
<div> (15:02:49) <b> William_da_loucura </b> entrou na sala</div>
<div> (15:03:01) <b> Erik_Cabeção </b> Boa tarde, hoje o dia vai ter muito html e css?</div>
<div> (15:05:29) <b> William_da_loucura </b> Boa tarde, espero que não, eu sou preguiçoso! ):</div>
<div> (15:06:12) <b> Erik_Cabeção </b> Ué, a gente tem que estudar pra ser alguém na vida!</div>
<div> (15:10:59) <b> William_da_loucura </b> To nem aí, eu sou rebelde!!</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
## CSS
```css=
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,700&display=swap");
body {
margin: 0px;
}
.container {
display: flex;
flex-direction: column;
background-color: #583bbf;
color: #ffffff;
padding: 2em 5em 3em 5em;
font-family: Montserrat;
height: 100vh;
}
.cabecalho {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 2em;
}
.logo {
width: 8em;
}
.barra {
background: linear-gradient(180deg, #ba9d4c -10.17%, #f3d991 115.25%);
width: 4px;
height: 4em;
margin: 0.1em 0.1em;
border-radius: 2em;
margin-right: 3em;
}
.titulo {
font: 700 2em Montserrat;
}
.conteudo {
display: flex;
flex-direction: row;
background: rgba(0, 0, 0, 0.12);
padding: 3em;
}
.container-form {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2em;
}
.box-sala {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.box-sala {
display: flex;
flex-direction: row;
}
.label {
font-weight: 700;
font-size: 1.2em;
width: 4em;
right: 20em;
}
input {
border: none;
background: #ffffff;
border-radius: 5px;
outline: none;
padding: 0.4em;
}
button {
font-weight: 700;
color: #ffffff;
background: #50b4bf;
border-radius: 20px;
border: none;
padding: 0.5em 1.5em;
margin: 0.2em;
}
.button {
display: flex;
align-self: flex-end;
margin-bottom: 3em;
}
.box-mensagem {
display: flex;
flex-direction: column;
justify-self: flex-end;
}
textarea {
height: 13em;
border: none;
background: #ffffff;
border-radius: 4px;
outline: none;
margin: 0.6em 0.1em;
resize: none;
}
.container-chat {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0em 2em 2em 2em;
}
.chat-atualizar {
width: 1em;
align-self: flex-end;
margin: 0.2em;
}
.chat {
display: flex;
flex-direction: column;
background: rgba(192, 65, 224, 0.19);
border-radius: 3px;
padding: 1.5em;
height: 100%;
}
.chat > div {
font-size: 0.8em;
margin: 0.4em 0em;
overflow-y: auto;
}
.box-sala-botoes {
font-size: 0.9em;
margin: 0.4em 0em;
}
.salazinha {
display: flex;
flex-direction: row;
margin: 0.2em;
align-items: center;
align-self: flex-end;
}
.salazinha2 {
display: flex;
flex-direction: row;
margin: 0.2em;
align-items: center;
justify-content: flex-end;
}
.btn-enviar {
align-self: flex-end;
}
@media (max-width: 1000px) {
.container {
padding: 2em;
height: 100%;
}
.conteudo {
flex-direction: column;
padding: 0em;
}
.button {
flex-direction: column;
margin-bottom: 1em;
width: 100%;
align-self: flex-start;
margin: 1em 0em;
}
.btn-enviar {
align-self: flex-start;
width: 100%;
}
button {
width: 100%;
border-radius: 4px;
}
}
```
Sign in with Wallet
Connect another wallet