Html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Whatsapp Ui clone</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="chatSection_Container">
<div class="left_ChatSection">
<div class="left_ChatSection_plugins">
<div class="left_ChatSection_plugins_buttons">
<div class="topUlSection_buttons">
<div class="topUlSection_buttons_bar"><i class="fa-solid fa-bars"></i></div>
<div class="topUlSection_buttons_comment"><i class="fa-regular fa-comment-dots"></i></div>
<div class="topUlSection_buttons_phone"><i class="fa-solid fa-phone"></i></div>
<div class="topUlSection_buttons_radiation"><i class="fa-solid fa-circle-radiation"></i></div>
</div>
<div class="midUlSection_buttons">
<div class="midUlSection_buttons_star"><i class="fa-regular fa-star"></i></div>
<div class="midUlSection_buttons_files"><i class="fa-regular fa-file"></i></div>
</div>
<div class="lastUlSection_buttons">
<div class="lastUlSection_buttons_gear"><i class="fa-solid fa-gear"></i></div>
<div class="lastUlSection_buttons_user"><i class="fa-solid fa-circle-user"></i></div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList">
<div class="left_ChatSection_ChatList_Head">
<h2>Chats</h2>
</div>
<div class="left_ChatSection_ChatList_Search">
<input type="text" placeholder=" ⤥ Search or start a new message" id="searchInput">
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_1.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Nil Group</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">2:00 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_2.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Alex</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:58 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_3.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Justin</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:50 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_4.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Jhon</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:46 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_5.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Harry</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:39 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_6.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Nisha</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:34 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_7.png" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Kaily</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:27 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_8.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Jenyfer</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:14 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_9.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Buffer</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:11 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_10.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Praze</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:09 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_11.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Lorem</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:06 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_12.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Ironman</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">2:05 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_13.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">flex</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:03 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_14.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Server</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">1:00 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_15.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Pixel</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">12:50 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
<div class="left_ChatSection_ChatList_Body">
<div class="left_ChatSection_ChatList_Body_hover">
<div class="left_ChatSection_ChatList_Body_Head">
<div class="left_ChatSection_ChatList_Body_HeadPicture">
<img src="image/pic_16.jpg" id="pic_all">
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_Section">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName">
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Username">
<p id="username">Nitro</p>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionName_Date">
<p id="time">12:43 pm</p>
</div>
</div>
<div class="left_ChatSection_ChatList_Body_HeadChat_SectionChat">
<p>Hey, how are you?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right_ChatSection">
<div class="right_ChatSection_ChatHead">
<div class="right_ChatSection_ChatHead_profile">
<img src="image/pic_1.jpg" id="profile_pic">
</div>
<div class="right_ChatSection_ChatHead_profile_username">
<div class="right_ChatSection_ChatHead_profile_username_name">
<p id="username">Nil Group</p>
</div>
<div class="right_ChatSection_ChatHead_profile_username_plugins">
<div class="right_ChatSection_ChatHead_profile_username_plugins_videoCall">
<i class="fa-solid fa-video"></i>
</div>
<div class="right_ChatSection_ChatHead_profile_username_plugins_voiceCall">
<i class="fa-solid fa-phone"></i>
</div>
<div class="right_ChatSection_ChatHead_profile_username_plugins_search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
</div>
</div>
<div class="right_ChatSection_Chating">
<div class="right_ChatSection_Chating_chat"></div>
</div>
<div class="right_ChatSection_Typing">
<div class="right_ChatSection_Typing_emoji">
<i class="fa-regular fa-face-smile"></i>
</div>
<div class="right_ChatSection_Typing_link">
<i class="fa-solid fa-link"></i>
</div>
<div class="right_ChatSection_Typing_text">
<input type="text" placeholder="Type a message" id="message">
</div>
<div class="right_ChatSection_Typing_microphone">
<i class="fa-solid fa-microphone"></i>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS file
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family:Helvetica;
display: block;
}
.container{
height: 100vh;
width: 100vw;
background-color: antiquewhite;
overflow: hidden;
}
.chatSection_Container{
height: 100vh;
width: 100vw;
display: flex;
}
.left_ChatSection{
height: 100vh;
width: 26vw;
/* background-color: blue; */
display: flex;
}
.left_ChatSection_plugins{
height: 100vh;
width: 4vw;
background-color: gainsboro;
}
.left_ChatSection_plugins_buttons{
height: 100vw;
width: 100%;
}
.topUlSection_buttons{
height: 500px;
width: 58px;
/* background-color: blue; */
}
.topUlSection_buttons_bar{
font-size: 18px;
display: flex;
height: 40px;
width: 58px;
justify-content: center;
margin: 20px 0px 0px 0px;
}
.topUlSection_buttons_comment{
font-size: 18px;
display: flex;
height: 40px;
width: 58px;
justify-content: center;
}
.topUlSection_buttons_phone{
font-size: 18px;
display: flex;
height: 40px;
width: 58px;
justify-content: center;
}
.topUlSection_buttons_radiation{
font-size: 18px;
display: flex;
height: 40px;
width: 58px;
justify-content: center;
}
.midUlSection_buttons{
height: 100px;
width: 58px;
/* background-color: aqua; */
}
.midUlSection_buttons_star{
font-size: 18px;
display: flex;
height: 40px;
width: 58px;
justify-content: center;
}
.midUlSection_buttons_files{
font-size: 18px;
display: flex;
height: 40px;
width: 58px;
justify-content: center;
}
.lastUlSection_buttons{
height: 100px;
width: 58px;
/* background-color: aqua; */
}
.lastUlSection_buttons_gear{
font-size: 19px;
display: flex;
height: 40px;
width: 58px;
justify-content: center;
}
.lastUlSection_buttons_user{
font-size: 19px;
display: flex;
height: 40px;
width: 58px;
justify-content: center;
}
.left_ChatSection_ChatList{
height: 100vh;
width: 22vw;
background-color: rgba(225, 236, 236, 0.954);
}
.left_ChatSection_ChatList_Head{
margin: 20px 0px 0px 20px;
}
.left_ChatSection_ChatList_Search{
margin: 20px 0px 10px 20px;
height: 25px;
}
.left_ChatSection_ChatList_Search input{
height: 25px;
width: 300px;
}
#searchInput{
border-radius: 10px;
height: 30px;
padding: 0px 0px 0px 10px;
}
.left_ChatSection_ChatList_Body{
margin: 10px 0px 0px 10px;
height: 60px;
width: 310px;
/* display: inline;
overflow-y: auto; */
/* border: 1px solid black; */
}
.left_ChatSection_ChatList::-webkit-scrollbar {
width: 5px;
}
.left_ChatSection_ChatList_Body_hover :hover{
background-color:rgba(195, 195, 194, 0.495);
}
.left_ChatSection_ChatList_Body_Head{
display: flex;
/* margin: 5px opx 0px 10px; */
}
.left_ChatSection_ChatList_Body_HeadPicture{
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid green;
margin: 10px;
}
#pic_all{
height: 40px;
width: 40px;
border-radius: 50%;
}
.left_ChatSection_ChatList_Body_HeadChat_Section{
height: 60px;
width: 250px;
/* background-color: rgb(235, 170, 170); */
}
.left_ChatSection_ChatList_Body_HeadChat_SectionName{
display: flex;
height: 20px;
width: 250px;
/* background-color: rgb(185, 185, 245); */
margin: 10px 0px 0px 0px;
}
.left_ChatSection_ChatList_Body_HeadChat_SectionName_Username{
font-size: 16px;
width: 220px;
height: 20px;
/* border: 1px solid red; */
}
.left_ChatSection_ChatList_Body_HeadChat_SectionName_Date{
height: 20px;
width: 50px;
/* border: 1px solid green; */
}
.left_ChatSection_ChatList_Body_HeadChat_SectionName_Date, #time{
font-size: 12px;
height: 20px;
width: 50px;
margin: 2px 0px 0px 0px;
font-weight: lighter;
color: rgba(64, 64, 63, 0.495);
}
.left_ChatSection_ChatList_Body_HeadChat_SectionChat{
height: 20px;
width: 100%;
/* background-color: rgb(246, 177, 246); */
margin: 0px 0px 10px 0px;
}
.left_ChatSection_ChatList_Body_HeadChat_SectionChat{
font-size: 14px;
font-weight: lighter;
color: rgba(64, 64, 63, 0.495);
margin: 2px 0px 0px 0px;
}
.right_ChatSection{
height: 100vh;
width: 74vw;
background-color: gainsboro;
}
.right_ChatSection_ChatHead{
width: 74vw;
height: 9vh;
background-color: rgba(225, 236, 236, 0.954);
display: flex;
}
.right_ChatSection_ChatHead_profile{
height: 42px;
width: 42px;
border-radius: 50%;
border: 1px solid black;
margin: 10px 0px 0px 20px;
}
#profile_pic{
height: 42px;
width: 42px;
border-radius: 50%;
}
.right_ChatSection_ChatHead_profile_username{
height: 62px;
width: 1060px;
/* background-color: bisque; */
display: flex;
}
.right_ChatSection_ChatHead_profile_username_name{
height: 62px;
width: 900px;
/* background-color: aqua; */
font-size: 17px;
align-content: center;
padding: 0px 0px 0px 20px;
}
.right_ChatSection_ChatHead_profile_username_plugins{
display: flex;
font-size: 21px;
}
.right_ChatSection_ChatHead_profile_username_plugins_videoCall{
height: 62px;
width: 60px;
/* border: 1px solid black; */
display: flex;
justify-content: center;
align-items: center;
}
.right_ChatSection_ChatHead_profile_username_plugins_videoCall:hover{
height: 50px;
width: 50px;
background-color: rgba(195, 195, 194, 0.495);
display: flex;
justify-content: center;
align-items: center;
margin: 6px;
/* display: block; */
}
.right_ChatSection_ChatHead_profile_username_plugins_voiceCall{
height: 62px;
width: 60px;
/* border: 1px solid green; */
display: flex;
justify-content: center;
align-items: center;
}
.right_ChatSection_ChatHead_profile_username_plugins_voiceCall:hover{
height: 50px;
width: 50px;
background-color: rgba(195, 195, 194, 0.495);
display: flex;
justify-content: center;
align-items: center;
margin: 6px;
}
.right_ChatSection_ChatHead_profile_username_plugins_search{
height: 62px;
width: 60px;
/* border: 1px solid pink; */
display: flex;
justify-content: center;
align-items: center;
}
.right_ChatSection_ChatHead_profile_username_plugins_search:hover{
height: 50px;
width: 50px;
background-color: rgba(195, 195, 194, 0.495);
display: flex;
justify-content: center;
align-items: center;
margin: 6px;
}
.right_ChatSection_Chating{
width: 74vw;
height: 83.8vh;
/* background-color: blue; */
}
.right_ChatSection_Typing{
width: 74vw;
height: 7.2vh;
background-color: rgba(225, 236, 236, 0.954);
display: flex;
}
.right_ChatSection_Typing_emoji{
font-size: 18px;
height: 50px;
width: 50px;
/* border: 1px solid black; */
display: flex;
justify-content: center;
align-items: center;
margin: 0px 0px 0px 10px;
}
.right_ChatSection_Typing_link{
font-size: 18px;
height: 50px;
width: 50px;
/* border: 1px solid black; */
display: flex;
justify-content: center;
align-items: center;
}
.right_ChatSection_Typing_text{
font-size: 18px;
height: 50px;
width: 1000px;
/* background-color: brown; */
display: flex;
align-items: center;
background-color: none;
padding: 0px 0px 0px 10px;
}
#message{
border-radius: 20px;
height: 30px;
padding: 0px 0px 0px 10px;
background-color: rgba(225, 236, 236, 0.954);
border: none;
}
#message:hover{
border: none;
}
/* #message::after{
border: none;
} */
.right_ChatSection_Typing_microphone{
font-size: 18px;
height: 50px;
width: 50px;
/* border: 1px solid black; */
display: flex;
justify-content: center;
align-items: center;
}
Image
Result
0 Comments