How To Create A Mobile Responsive Chat Box using only HTML & CSS

0
How To Create A Responsive Chat Box using only HTML & CSS

Hello readers, Today in this blog you’ll learn How To Create A Mobile Responsive Chat Box using only HTML & CSS. Earlier I have shared a blog on How To Create A Business Website Using HTML and CSS. And now I’m going to create a Responsive Chat Box.

What is Chat Box?

You may have seen a chat widget on different websites. A chat widget is a window on your website that allows visitors to chat in real-time with a sales or service department. A chat widget can also be combined on social media sites and mobile apps. Chat widgets are created using various programming languages ​​such as JavaScript, PHP, Python, etc.

In this program (Responsive Chat Box UI Design) there is only a messaging button in the lower right corner at the beginning of the website and you click on this button, then the chat box form appears with sliding animation and the Messenger- Symbol also turns into a cross sign There are three input fields in the chatbox form, i.e.Name, email, and text area) and a button. This chat box is completely based on HTML and CSS. So if you enter your information and click the Start Chat button, your information will not be sent to any third party through this form.

You Might Like This Blog:

How to create a Pricing Card with Sliding Animation using only HTML & CSS.

How to make News Portal Website in 10 Minutes.

To Create A Mobile Responsive Chat Box using only HTML & CSS follow these Steps:

Step 1:

To create this program: ( Create A Mobile Responsive Chat Box ). Initially you need to create two files one HTML (.html) and another CSS file (.css). After creating these files, just paste the following codes into your VS IDE code sample and create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- Created By CodeWithNepal codewithnepal.com -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Responsive Chat Box Design | CodeWithNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <input type="checkbox" id="click">
      <label for="click">
      <i class="fab fa-facebook-messenger"></i>
      <i class="fas fa-times"></i>
      </label>
      <div class="wrapper">
         <div class="head-text">
            Let's chat? - Online
         </div>
         <div class="chat-box">
            <div class="desc-text">
               Please fill out the form below to start chatting with CodeWithNepal.
            </div>
            <form action="#">
               <div class="field">
                  <input type="text" placeholder="Your Name" required>
               </div>
               <div class="field">
                  <input type="email" placeholder="Email Address" required>
               </div>
               <div class="field textarea">
                  <textarea cols="30" rows="10" placeholder="Explain your queries.." required></textarea>
               </div>
               <div class="field">
                  <button type="submit">Start Chat</button>
               </div>
            </form>
         </div>
      </div>
   </body>
</html>

Step 2:

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
::selection{
  color: #000;
  background: #fff;
}
nav{
  position: fixed;
  background: #5E17EB;
  width: 100%;
  padding: 10px 0;
  z-index: 12;
}
nav .menu{
  max-width: 1250px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}
.menu .logo a{
  text-decoration: none;
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}
.menu ul{
  display: inline-flex;
}
.menu ul li{
  list-style: none;
  margin-left: 7px;
}
.menu ul li:first-child{
  margin-left: 0px;
}
.menu ul li a{
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.menu ul li a:hover{
  background: #fff;
  color: black;
}
.img{
  background: url('FAUCONGZ.png')no-repeat;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}
.img::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.center{
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
.center .title{
  color: #fff;
  font-size: 55px;
  font-weight: 600;
}
.center .sub_title{
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
.center .btns{
  margin-top: 20px;
}
.center .btns button{
  height: 55px;
  width: 170px;
  border-radius: 5px;
  border: none;
  margin: 0 10px;
  border: 2px solid white;
  font-size: 20px;
  font-weight: 500;
  padding: 0 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}
.center .btns button:first-child{
  color: #fff;
  background: none;
}
.btns button:first-child:hover{
  background: white;
  color: black;
}
.center .btns button:last-child{
  background: white;
  color: black;
}

Output

How To Create A Responsive Chat Box using only HTML & CSS

LEAVE A REPLY

Please enter your comment!
Please enter your name here