# Monkchat **Henrique Dias Costa INFO-A n°16** ![](https://i.imgur.com/ePe9mzb.png) ```html+ <!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="monkchat.css"> <title>MonkChat</title> </head> <body> <div class="container"> <div class="cabecalho"> <div class="logo"> <img src="../assets/imagens/logoSITE.png" alt=""> </div> <div class="barra"> </div> <div class="titulo"> MonkChatWeb </div> </div> <div class="conteudo"> <div class="container-form"> <div class="box-sala"> <div> <div class="label">Sala:</div> <input class="input"></input> </div> <div> <div class="label">Nick:</div> <input class="input"></input> </div> <div> <button> Criar </button> <button> Entrar </button> </div> </div> <div class="box-mensagem"> <div class="label">Mensagem:</div> <textarea></textarea> <button class="botao-enviar"> Enviar </button> </div> </div> <div class="container-chat"> <img class="botao-atualizar" src="../assets/imagens/Vetor.png" alt="" /> <div class="chat"> <div>(15:02:01) <b>Brunex</b> entrou na sala: ...</div> <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div> <div>(15:02:11) <b>Brunex</b> saiu da sala... </div> </div> </div> </div> </div> </body> </html> ``` ```css @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); body { margin: 0px; } * { box-sizing: border-box; } .container { display: flex; flex-direction: column; background-color: #583BBF; color: #fff; padding: 2em 5em 6em 5em; font-family: Montserrat; height: 100%; } .cabecalho { display: flex; flex-direction: row; align-items: center; margin-bottom: 3em; } .logo { } .barra { } .titulo { font: 700 2.2em Montserrat; } .conteudo { display: flex; flex-direction: row; background: rgba(0, 0, 0, 0.12); padding: 3em 5em; height: 100%; } .container-form { display: flex; flex-direction: column; justify-content: space-between; padding: 2em; } .box-sala { display: flex; flex-direction: column; } .box-sala > div { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin: .2em; } .label { font-weight: 700; font-size: 1.2em; width: 4em; } .input, textarea { border: none; background: #FFFFFF; border-radius: 5px; outline: none; padding: .4em .5em; } button { font-weight: 700; color: #fff; background: #50B4BF; border: none; border-radius: 20px; padding: .5em 1.5em; margin: .3em; } .box-mensagem { display: flex; flex-direction: column; } textarea { height: 12em; margin: .5em 0em; } .botao-enviar { align-self: flex-end; } .container-chat { display: flex; flex-direction: column; flex-grow: 1; padding: 0em 2em 2em 2em; } .botao-atualizar { width: 1em; align-self: flex-end; margin: .4em; } .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: .9em; margin: .4em 0em; } ```