# 1° fase session monkchat **NOME** KEVIN RIBEIRO DE ANDRADE **NUMERO** 27 **TURMA** INFOA ## HTML ```htmlembedded= <!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="monkpage.css"> <title>MonkChat</title> </head> <body> <div class="container"> <div class="cabecalho"> <div class="logo"><img src = "../assets/images/logoSITEmonk.png"/> </div> <div class="barra"> <hr></hr> </div> <div class="titulo"> MonkChatWeb </div> </div> <div class="conteudo"> <div class="container-forms"> <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> <div class="box-mensages"></div> <div class="label">mensage:</div> <textarea></textarea> <button class="btn-enviar"> Enviar </button> </div> </div> <div class="container-chat"> <img class="chat-atualizar" src="../assets/images/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> fala para <b>Todos:</b> Oieeeee </div> <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div> <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div> <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div> <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div> <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div> <div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </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; } .barra hr { transform: rotate(180deg); height: 70px; margin: 0em 1.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: .2em; } .label { font-weight: 700; font-size: 1.2em; width: 4em; } .input, textarea { border: none; background: #FFFF; 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; } .btn-enviar { align-self: flex-end; } .container-chat { display: flex; flex-direction: column; flex-grow: 1; padding: 0em 2em 2em 2em; } .chat-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; } ```