# MonkChat Web Autor:Pedro Henrique Gomes De Oliveira Sardinha Turma:Info-B Numero:41 ### HTML: ```htmlmixed= <!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="dev.css"> <title>MonkChat</title> </head> <body> <div class="container"> <div class="cabecalho"> <div class="logo"> <img src="../assets/images/logo1 1.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="btn-enviar"> Enviar </button> </div> </div> <div class="container-chat"> <img class="chat-atualizar" src="../assets/images/Vector.png" alt="" /> <div class="chat"> <div>(19:02:01) <b>PedroG</b> entrou na sala: ...</div> <div>(19:02:05) <b>PedroG</b> fala para <b>Todos:</b> Olá</div> <div>(19:02:15) <b>PedroG</b> fala para <b>Todos:</b> como estâo?</div> <div> </div> </div> </div> </div> </body> </html> ``` ### CSS: ```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: 100vh; } .cabecalho { display: flex; flex-direction: row; align-items: center; margin-bottom: 3em; } .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: 0.2em; } button { font-weight: 700; color: #fff; background: #50b4bf; border: none; border-radius: 20px; padding: 0.5em 1.5em; margin: 0.3em; } .label { font-weight: 700; font-size: 1.2em; width: 4em; } .input, textarea { border: none; background: #ffffff; border-radius: 5px; outline: none; padding: 0.4em 0.5em; } .box-mensagem { display: flex; flex-direction: column; } .btn-enviar { align-self: flex-end; } .container-chat { display: flex; flex-direction: column; flex-grow: 1; padding: 0em 2em 2em 2em; } textarea { height: 12em; margin: 0.5em 0em; } .chat-atualizar { width: 1em; align-self: flex-end; margin: 0.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: 0.9em; margin: 0.4em 0em; }