# Final session | Linguagem de programação **Aluno** Murillo Tadeu **Turma** Info - D **Número**: 33 ## HTML e CSS | MonkChat >Index.HTML ```htmlmixed= <!DOCTYPE html> <!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="cabeçalho"> <div class="logo"> <img src="../assets/images/logo-monk.png" alt=""/> </div> <div class="barra"> </div> <div class="titulo"> MonkChatWeb </div> </div> <div class="conteúdo"> <div class="container2"> <div class="box1"> <div> <div class="sala"> SALA </div> <input class="input"> </imput> </div> <div> <div class="sala"> NICK </div> <input class="input"> </imput> </div> <div> <button> Criar </button> <button> Entrar </button> </div> <div class="mensagem"> <div class="sala"> Mensagem: </div> <textarea> </textarea>> <button class="botão-enviar"> Enviar </button> </div> </div> <div class="container-conversa"> <div class="conversa"> <div>(15:04:01) <b>CHINELO</b> entrou na sala:...</div> <div>(15:04:03) <b>CHINELO</b> fala para <b>Todos:</b> Aooooba </div> <div>(15:04:09) <b>CHINELO</b> fala para <b>Todos:</b> Tudo certo? </div> <div>(15:04:09) <b>CHINELO</b> fala para <b>Todos:</b> Tá por aí? </div> <div>(15:04:09) <b>CHINELO</b> fala para <b>Todos:</b> Mano, preciso de um favorzão! </div> <div>(15:04:09) <b>CIRILÃO</b> fala para <b>Todos:</b> Opa, de boas e por aí? Pode falar! </div> <div>(15:04:11) <b>CHINELO</b> fala para <b>Todos:</b> Preciso pegar uma camiseta na lavanderia. </div> <div>(15:04:12) <b>CHINELO</b> fala para <b>Todos:</b> Umas 17h45 </div> <div>(15:04:14) <b>CHINELO</b> fala para <b>Todos:</b> Consegue? </div> <div>(15:04:09) <b>CIRILÃO</b> fala para <b>Todos:</b> Pode deixar com o pai! 🥵🥵 </div> <div>(15:06:18) <b>CHINELO</b> fala para <b>Todos:</b> Beleza! Valeeeeu! </div> </div> </div> </div> </body> </html> ``` >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&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; } .cabeçalho { display: flex; flex-direction: row; align-items: center; margin-bottom: 3em; } .logo { } .barra { } .titulo { font: 700 2.2em Montserrat; } .conteúdo { display: flex; flex-direction: row; background: rgba(0, 0, 0, 0.12); padding: 3em 5em; height: 100%; } .container2 { display: flex; flex-direction: column; justify-content: space-between; padding: 2em; } .box1 { display: flex; flex-direction: column; } .box2 > div { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin: 0.2em; } .sala { 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; } .container-conversa { display: flex; flex-direction: column; background: rgba(192, 65, 224, 0.19); border-radius: 3px; } .container-conversa { display: flex; flex-direction: column; } button { font-weight: 700; color: #fff; background: #50b4bf; border: none; border-radius: 20px; padding: 0.5em 1.5em; margin: 0.3em; } ```