simple chat html css

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style> body{ background-color: rgb(255, 0, 183); } .chatmenu{ text-align: center; } .messages{ width: 500px; height: 400px; border: 2px solid cyan; resize: none; color: white; font-size: 20px; } .send{ border: 2px solid cyan; width: 300px; color: black; resize: none; } .people{ border: 2px solid cyan; width: 220px; background-color: lightgreen; } .headtext{ background-color: orange; } .jhon{ background-color: lightgreen; } </style> </head> <body> <div class="people"> <h1 class="headtext">Chats</h1> <div class="jhon"> <a href="#"><button style="border: none; background-color: cyan;"><h2><p style="background-color: red;">(1)Jhon</h2></p></button></a> </div> </div> <div class="chatmenu"> <textarea disabled class="messages"> (Jhon: hi) </textarea> <textarea class="send" placeholder="Type Your Message"> </textarea> </div> </body> </html>

chat box html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: cyan;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
</style>
</head>
<body>

<h1>Ychat</h1>
<p>Made by Yasin</p>

<button class="open-button" onclick="openForm()">Chat</button>

<div class="chat-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Chat</h1>

    <label for="msg"><b>Message</b></label>
    <textarea placeholder="Type message.." name="msg" required></textarea>

    <button type="submit" class="btn">Send</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>

<script>
function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
</script>

</body>
</html>

Posted by: Guest on July-12-2021

Code answers related to "simple chat html css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "simple chat html css"

Code answers related to "simple chat html css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us