<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Message Box </title>
<link rel="stylesheet" href="Exercise 012 Chat box css.css">
</head>
<body>
<section>
<h1> Click the chat button below to start chatting </h1>
<button class="chat-btn"> <b> CHAT </b> </button>
<div id="chat-container" onclick="changeColor()" class="chat-popup">
<div class="chat-area">
<div class="income-msg">
<img src="https://scontent.fmnl4-2.fna.fbcdn.net/v/t1.6435-9/193175943_4328031423928411_3597825944807510934_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=730e14&_nc_ohc=wpglK-tI8eUAX_6uxHo&_nc_ht=scontent.fmnl4-2.fna&oh=2ccdd44ba084a31317738ec031b2f9b2&oe=60D9732E" class="kai" alt="Kai">
<span class="msg"> Kai: What? </span>
</div>
</div>
<div class="input-area">
<input id="name-input" type="name" size="10" style="margin-right:8px;" placeholder="Type your name">
<input id="message-input" type="text" placeholder="Type your message here">
<input type="color" id="colorpicker" class="colors" value="#C7C7C7">
<button class="submit"> SEND </button>
</div>
</div>
</section>
<script src="Exercise 012 Chat box js.js"> </script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Message Box </title>
<link rel="stylesheet" href="Exercise 012 Chat box css.css">
</head>
<body>
<section>
<h1> Click the chat button below to start chatting </h1>
<button class="chat-btn"> <b> CHAT </b> </button>
<div id="chat-container" onclick="changeColor()" class="chat-popup">
<div class="chat-area">
<div class="income-msg">
<img src="https://scontent.fmnl4-2.fna.fbcdn.net/v/t1.6435-9/193175943_4328031423928411_3597825944807510934_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=730e14&_nc_ohc=wpglK-tI8eUAX_6uxHo&_nc_ht=scontent.fmnl4-2.fna&oh=2ccdd44ba084a31317738ec031b2f9b2&oe=60D9732E" class="kai" alt="Kai">
<span class="msg"> Kai: What? </span>
</div>
</div>
<div class="input-area">
<input id="name-input" type="name" size="10" style="margin-right:8px;" placeholder="Type your name">
<input id="message-input" type="text" placeholder="Type your message here">
<input type="color" id="colorpicker" class="colors" value="#C7C7C7">
<button class="submit"> SEND </button>
</div>
</div>
</section>
<script src="Exercise 012 Chat box js.js"> </script>
</body>
</html>