# MonkChatWeb | HTML CSS
autora: Isabela Silva Sousa
[toc]
## MonkChatWeb
- **HTML**
> 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" />
<link rel="stylesheet" href="fonts.css" />
<title>MonkChatWeb</title>
</head>
<body>
<div class="container">
<div class="header-box">
<div class="image"><img src="../fonts/images/logo.png"/></div>
<div class="icon">
<svg width="4" height="59" viewBox="0 0 4 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="2" y1="2" x2="2" y2="57" stroke="url(#paint0_linear)" stroke-width="4" stroke-linecap="round"/>
<defs>
<linearGradient id="paint0_linear" x1="-0.999949" y1="-6" x2="-0.999949" y2="68" gradientUnits="userSpaceOnUse">
<stop stop-color="#BA9D4C"/>
<stop offset="1" stop-color="#F3D991"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="title">MonkChat</div>
</div>
<div class="content-box">
<div class="info-box">
<div class="info">
<div class="desc">
<div class="inf">Sala:</div>
<input class="input"></input>
</div>
<div class="desc">
<div class="inf">Nick:</div>
<input class="input"></input>
</div>
<div class="desc">
<div class="button"><button>Criar</button></div>
<div class="button"><button>Entrar</button></div>
</div>
</div>
<div class="content">
<div class="inf">Mensagem:</div>
<textarea class="box"></textarea>
<div class="send"><button>Enviar</button></div>
</div>
</div>
<div class="message-box">
<div class="loading"><img src="../fonts/images/carregar.png"/></div>
<div class="chat">
<div class="text">
(15:05:02) <b>Brunex</b> entrou na sala...
</div>
<div class="text">
(15:05:02) <b>Brunex</b> entrou na sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
<div class="text">
(15::06:25) <b>Brunex</b> saiu da sala...
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
- **CSS fonts**
> index.css
```css=
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
```
- **CSS**
> index.css
```css=
body {
margin: 0px;
box-sizing: border-box;
}
.container {
font-family: Montserrat;
display: flex;
flex-direction: column;
background-color: #583bbf;
color: white;
padding: 2em 5em 6em 5em;
height: 100vh;
}
.header-box {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 3em;
}
.icon {
padding: 0px 20px 0px 20px;
}
.title {
font: 700 2.2em Montserrat;
}
.content-box {
display: flex;
flex-direction: row;
background: rgba(0, 0, 0, 0.12);
padding: 3em 2em;
height: 70%;
}
.info-box {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2em 3em;
}
.info {
display: flex;
flex-direction: column;
margin: 0em 0em 2em 0em;
}
.inf {
font-weight: 700;
font-size: 1.2em;
width: 3.5em;
}
.input {
border: none;
border-radius: 5px;
padding: 0.4em 0.5em;
outline: none;
}
button {
background: #50b4bf;
color: white;
border-radius: 20px;
border: none;
padding: 0.5em 1.5em;
margin: 0.2em;
cursor: pointer;
}
.button:hover {
border-radius: 20px;
border: none;
background: rgb(127, 238, 250);
}
.desc {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin: 0.2em;
}
.content {
display: flex;
flex-direction: column;
}
.send {
align-self: flex-end;
}
.send:hover {
border-radius: 20px;
border: none;
background: rgb(127, 238, 250);
}
.message-box {
display: flex;
flex-direction: column;
}
.loading {
align-self: flex-end;
cursor: pointer;
padding: 0px 0px 5px 0px;
}
.chat {
display: flex;
flex-direction: column;
background: rgba(192, 65, 224, 0.19);
border-radius: 3px;
padding: 1.5em;
height: 80%;
width: 670px;
overflow-y: auto;
}
.chat::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #3e006f;
}
.chat::-webkit-scrollbar {
width: 7px;
border-radius: 10px;
background-color: #3e006f;
}
.chat::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #cbcbcb;
}
.text {
margin: 0.4em 0em;
font-size: 0.9em;
}
.box {
border-radius: 5px;
border: none;
outline: none;
height: 11em;
margin: 0.7em 0em;
}
textarea {
padding: 1.5em;
}
```
- **CSS responsivo**
> index.css
```css=
@media (max-width: 400px) {
.container {
min-width: auto;
padding: 1em;
height: 100%;
}
.header-box {
flex-direction: column;
margin: 2em;
}
.content-box {
flex-direction: column;
padding: 0.2em;
}
.icon {
display: none;
}
.info-box {
padding: 0.9em;
}
.chat {
height: 15em;
width: 15em;
padding: 0.1em;
margin: 1.3em;
}
.text {
margin: 0.7em;
}
.info > div:nth-of-type(3) {
flex-direction: column;
}
button {
width: 45vh;
border-radius: 0.3em;
}
.button:hover {
border-radius: 0.3em;
}
.send:hover {
border-radius: 0.3em;
width: 46vh;
}
.input {
width: 39vh;
}
.send {
width: 45vh;
}
.loading {
padding: 2.5em 1em 0em 0em;
}
}
```
{"metaMigratedAt":"2023-06-16T05:52:27.948Z","metaMigratedFrom":"Content","title":"MonkChatWeb | HTML CSS","breaks":true,"contributors":"[{\"id\":\"efa8ac71-fa69-4ab5-8a89-20016d037e45\",\"add\":10453,\"del\":2376}]"}