Hello Readers!, This code creates a chat page with a user interface that includes a left sidebar with icons for navigation and a logout button, as well as a main section for displaying chat groups. The sidebar icons include a home icon, a message icon, an alert icon, and a settings icon. The main section includes a search bar and a “group” title, with several chat groups listed below. Each group is represent by an image, a group name, a timestamp, and a message preview. The code also uses some external CSS libraries, such as FontAwesome, which provides icons for the chat page. The CSS file ‘style.css’ is also link, which includes additional styling for the chat page. Overall, the code sets up a functional and visually appealing chat page.
This code is a CSS stylesheet that sets the visual styling for a web page. It defines a variety of CSS variables at the top of the file, such as background color, main color, and text color, which are use throughout the stylesheet to ensure consistency in the design. The code also sets a default font-family, and removes default margins and padding from all elements. The body of the webpage is set to flex, with justify-content and align-items properties use to center, with a min-height of 100vh. The background color of the body is use to the --bgClr variable, and overflow is set to hidden.
The code uses flex properties to ensure that elements are properly aligne and spaced. The code also sets a specific font-family and removes default margins and padding from all elements.
Video Tutorial of Online Chatting Page
To see a live demonstration of the Online Chatting Page, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
You might like this:
Online Chatting Page
HTML:
Create a new file with the name “index.html” and add the provide code to it. Ensure the file has a “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Page</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
</head>
<body>
<section>
<div class="left">
<div class="iconBx">
<div class="user">
<img src="./admin/admin.jpg" alt="admin">
</div>
<div class="icon">
<a href="#">
<i class="far fa-home-lg-alt"></i>
<span>home</span>
</a>
<a href="#" class="active">
<i class="fal fa-comment-dots"></i>
<span>message</span>
</a>
<a href="#">
<i class="fal fa-bell"></i>
<span>alert</span>
</a>
<a href="#">
<i class="fal fa-cog"></i>
<span>settings</span>
</a>
</div>
</div>
<div class="logOut">
<a href="#">
<i class="fal fa-sign-out-alt"></i>
<span>logout</span>
</a>
</div>
</div>
<main>
<div class="searchBx">
<i class="fal fa-search"></i>
<input type="text" placeholder="Search">
</div>
<div class="box group">
<div class="title">
<h2>group</h2>
</div>
<a href="#">
<img src="./groups/theAvengers.jpg" alt="theAvengers">
<div class="nameBx">
<div class="name">
<h2>The Avengers</h2>
<h4>today,<span>10:10 pm</span></h4>
</div>
<div class="mess">
<h3>Where is Loki?</h3>
<span>10</span>
</div>
</div>
</a>
<a href="#">
<img src="./groups/ultron.jpg" alt="ultron">
<div class="nameBx">
<div class="name">
<h2>Age of Ultron</h2>
<h4>yestarday,<span>02:55 am</span></h4>
</div>
<div class="mess">
<h3>You shut me out.</h3>
<i class="fal fa-check"></i>
</div>
</div>
</a>
<a href="#">
<img src="./groups/infinityWar.jpg" alt="infinityWar">
<div class="nameBx">
<div class="name">
<h2>Infinity War</h2>
<h4>yestarday,<span>05:55 pm</span></h4>
</div>
<div class="mess">
<h3>Who's Gamora? Why is Gamora?</h3>
<i class="fal fa-check-double"></i>
</div>
</div>
</a>
<a href="#">
<img src="./groups/endgame.jpg" alt="endgame">
<div class="nameBx">
<div class="name">
<h2>Endgame</h2>
<h4>15/07/2022,<span>01:55 am</span></h4>
</div>
<div class="mess">
<h3>I am Iron Man.</h3>
<i class="fal fa-check-double"></i>
</div>
</div>
</a>
</div>
<div class="box person">
<div class="title">
<h2>person</h2>
</div>
<a href="#">
<img src="./person/antMan.jpg" alt="antMan">
<div class="nameBx">
<div class="name">
<h2>Ant Man</h2>
<h4>today,<span>09:45 pm</span></h4>
</div>
<div class="mess">
<h3>Good luck! Captain.</h3>
<i class="fal fa-check-double" id="clr"></i>
</div>
</div>
</a>
<a href="#">
<img src="./person/blackPanther.jpg" alt="blackPanther">
<div class="nameBx">
<div class="name">
<h2>Black Panther</h2>
<h4>today,<span>12:10 pm</span></h4>
</div>
<div class="mess">
<h3>mission complete.</h3>
<i class="fal fa-check-double"></i>
</div>
</div>
</a>
<a href="#">
<img src="./person/captainAmerica.jpg" alt="captainAmerica">
<div class="nameBx">
<div class="name">
<h2>Captain America</h2>
<h4>today,<span>12:10 pm</span></h4>
</div>
<div class="mess">
<h3>mission complete.</h3>
<span>2</span>
</div>
</div>
</a>
<a href="#">
<img src="./person/doctorStrange.jpg" alt="doctorStrange">
<div class="nameBx">
<div class="name">
<h2>Doctor Strange</h2>
<h4>today,<span>12:10 pm</span></h4>
</div>
<div class="mess">
<h3>mission complete.</h3>
<i class="fal fa-check-double"></i>
</div>
</div>
</a>
<a href="#">
<img src="./person/hulk.jpg" alt="hulk">
<div class="nameBx">
<div class="name">
<h2>Hulk</h2>
<h4>today,<span>12:10 pm</span></h4>
</div>
<div class="mess">
<h3>mission complete.</h3>
<i class="fal fa-check-double"></i>
</div>
</div>
</a>
<a href="#">
<img src="./person/ironMan.jpg" alt="ironMan">
<div class="nameBx">
<div class="name">
<h2>Iron Man</h2>
<h4>today,<span>12:10 pm</span></h4>
</div>
<div class="mess">
<h3>mission complete.</h3>
<span>20</span>
</div>
</div>
</a>
<a href="#">
<img src="./person/spiderMan.jpg" alt="spiderMan">
<div class="nameBx">
<div class="name">
<h2>Spider Man</h2>
<h4>today,<span>12:10 pm</span></h4>
</div>
<div class="mess">
<h3>mission complete.</h3>
<i class="fal fa-check-double"></i>
</div>
</div>
</a>
<a href="#">
<img src="./person/thor.jpg" alt="thor">
<div class="nameBx">
<div class="name">
<h2>Thor</h2>
<h4>today,<span>12:10 pm</span></h4>
</div>
<div class="mess">
<h3>mission complete.</h3>
<span>8</span>
</div>
</div>
</a>
</div>
</main>
<div class="right">
<header>
<div class="imgBx">
<img src="./person/antMan.jpg" alt="antMan">
</div>
<div class="title">
<h2>Ant Man</h2>
<p>online - last seen 10:53pm</p>
</div>
<div class="headIconBx">
<a href="#">
<i class="far fa-phone-alt"></i>
</a>
<a href="#">
<i class="far fa-video"></i>
</a>
<a href="#">
<i class="far fa-ellipsis-v-alt"></i>
</a>
</div>
</header>
<div class="chatBx">
<div class="messages leftSide">
<h2>Hey there!</h2>
<p>today,08:30pm</p>
</div>
<div class="messages leftSide">
<h2>How are you?</h2>
<p>today,08:31pm</p>
</div>
<div class="messages rightSide">
<h2>Hello!</h2>
<p>today,09:01pm</p>
</div>
<div class="messages rightSide">
<h2>I am fine and how about you?</h2>
<p>today,09:02pm</p>
</div>
<div class="messages leftSide">
<h2>I am doing well. Can we meet tomorrow?</h2>
<p>today,09:22pm</p>
</div>
<div class="messages rightSide">
<h2>Yes, Sure!</h2>
<p>today,09:42pm</p>
</div>
<div class="messages leftSide">
<h2>Okk, bye</h2>
<p>today,09:44pm</p>
</div>
<div class="messages rightSide">
<h2>Okk, good luck!</h2>
<p>today,09:45pm</p>
</div>
<div class="messages leftSide">
<h2><img src="./groups/chat.jpg" alt="chat"></h2>
</div>
<div class="messages leftSide">
<h2>Good luck! Captain.</h2>
<p>today,09:45pm</p>
</div>
</div>
<div class="inputBx">
<div class="input">
<div class="search">
<i class="far fa-paperclip"></i>
<input type="text" placeholder="Type your message here...">
</div>
<div class="inputIcon">
<i class="fal fa-grin-alt"></i>
<i class="fal fa-camera"></i>
</div>
</div>
<div class="mic">
<i class="fas fa-microphone"></i>
</div>
</div>
</div>
</section>
</body>
</html>
This code creates a chat page with a user interface that includes a left sidebar with icons for navigation and a logout button, as well as a main section for displaying chat groups. The sidebar icons include a home icon, a message icon, an alert icon, and a settings icon.
The main section includes a search bar and a “group” title, with several chat groups listed below. Each group is represent by an image, a group name, a timestamp, and a message preview. The group images are source from the local file system, while the timestamp uses a specific format (today, yesterday, date).
The code also uses some external CSS libraries, such as FontAwesome, which provides icons for the chat page. The CSS file ‘style.css’ is also link, which likely includes additional styling for the chat page. Overall, the code sets up a functional chat page with a clean and easy-to-use interface for users to navigate and interact with chat groups.
CSS:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
:root {
--bgClr: #6E00FF;
--mainClr: #F2F4FB;
--mainBgClr: #FFFFFF;
--notificationClr: #FFB300;
--mainTextClr: #BABABA;
--mainParaClr: #D7D7D7;
--activeClr: #00DF49;
--iconActiveClr: #6100E1;
--iconClr: #000;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--bgClr);
overflow: hidden;
}
section{
position: relative;
width: 95%;
height: 95vh;
background: var(--mainClr);
border-radius: 35px;
padding: 20px;
box-shadow: 0 20px 20px rgba(0, 0, 0, .5);
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
}
/* Left Start */
.left{
position: relative;
width: 100px;
height: 100%;
background: var(--bgClr);
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border-radius: 20px;
padding: 25px;
overflow-y: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.left .iconBx{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 50px;
}
.left .iconBx .user{
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
cursor: pointer;
overflow: hidden;
}
.left .iconBx .user img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.left .iconBx .icon{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 35px;
}
.left .iconBx .icon a{
position: relative;
width: 50px;
height: 50px;
color: var(--mainBgClr);
font-size: 1.4rem;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
.left .iconBx .icon a span{
position: absolute;
top: 0px;
padding: 5px;
font-size: 1.1rem;
color: var(--bgClr);
background: var(--mainBgClr);
border-radius: 5px;
text-transform: uppercase;
font-weight: 500;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
transform: scale(0);
z-index: 10;
transition: .5s ease;
transition-delay: .2s;
}
.left .iconBx .icon a span::before{
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 10px;
height: 10px;
background: var(--mainBgClr);
transform: translate(-50%) rotate(45deg);
}
.left .iconBx .icon a:hover span{
top: -40px;
transform: scale(1);
transition-delay: 0s;
}
.left .iconBx .icon a.active i,
.left .iconBx .icon a:hover i{
position: absolute;
top: 0;
left: 0;
background: var(--iconActiveClr);
width: 75px;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-right: 5px solid var(--notificationClr);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
z-index: 1;
transition: .5s ease;
}
.left .logOut{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.left .logOut a{
position: relative;
width: 50px;
height: 50px;
color: var(--mainBgClr);
background: var(--iconActiveClr);
border-radius: 10px;
font-size: 1.4rem;
text-decoration: none;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
display: flex;
justify-content: center;
align-items: center;
}
.left .logOut a span{
position: absolute;
top: 0px;
padding: 5px;
font-size: 1.1rem;
color: var(--bgClr);
background: var(--mainBgClr);
border-radius: 5px;
text-transform: uppercase;
font-weight: 500;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
transform: scale(0);
z-index: 10;
transition: .5s ease;
transition-delay: .2s;
}
.left .logOut a span::before{
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 10px;
height: 10px;
background: var(--mainBgClr);
transform: translate(-50%) rotate(45deg);
}
.left .logOut a:hover span{
top: -40px;
transform: scale(1);
transition-delay: 0s;
}
/* Left End */
/* Main Start */
main{
position: relative;
width: 450px;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
}
main .searchBx{
position: relative;
width: 100%;
height: 50px;
background: var(--mainBgClr);
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
border-radius: 20px;
text-align: center;
line-height: 50px;
overflow: hidden;
}
main .searchBx i{
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
font-size: 1.5rem;
color: var(--iconClr);
font-weight: 500;
cursor: pointer;
}
main .searchBx input{
position: absolute;
top: 50%;
left: 50px;
transform: translateY(-50%);
padding: 10px;
outline: none;
border: none;
font-size: 1.2rem;
font-weight: 600;
}
main .searchBx input::placeholder{
color: var(--mainParaClr);
}
main .group{
position: relative;
width: 100%;
height: 250px;
background: var(--mainBgClr);
padding: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
border-radius: 20px;
overflow-x: hidden;
overflow-y: auto;
}
main .person{
position: relative;
width: 100%;
height: calc(100% - 300px);
background: var(--mainBgClr);
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
border-radius: 20px;
overflow-x: hidden;
overflow-y: auto;
}
main .box .title{
position: relative;
font-size: 0.8rem;
margin-bottom: 5px;
opacity: 0.8;
}
main .box .title h2{
color: var(--iconClr);
font-weight: 500;
text-transform: capitalize;
cursor: pointer;
}
main .box a{
position: relative;
width: 100%;
height: 60px;
display: block;
text-decoration: none;
border-radius: 10px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
transition: .2s ease;
}
main .box a:hover{
background: var(--mainClr);
}
main .box a img{
position: absolute;
top: 5px;
left: 5px;
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
}
main .box a .nameBx{
position: relative;
top: 5px;
left: 65px;
width: 100%;
height: 100%;
}
main .box a .nameBx .name{
position: relative;
display: flex;
justify-content: space-between;
}
main .box a .nameBx .name h2{
font-size: 1.2rem;
text-transform: capitalize;
color: var(--iconClr);
opacity: 0.8;
}
main .box a .nameBx .name h4{
position: relative;
left: -70px;
text-transform: capitalize;
color: var(--mainParaClr);
font-weight: 400;
}
main .box a .nameBx .name h4 span{
text-transform: lowercase;
}
main .box a .nameBx .mess h3{
position: absolute;
color: var(--iconClr);
font-weight: 400;
font-size: 1rem;
}
main .box a .nameBx .mess i{
position: absolute;
top: 30px;
right: 70px;
width: 25px;
height: 25px;
color: var(--mainTextClr);
}
main .box a .nameBx .mess i#clr{
color: var(--bgClr);
}
main .box a .nameBx .mess span{
position: absolute;
right: 70px;
width: 25px;
height: 25px;
color: var(--mainBgClr);
background: var(--notificationClr);
border-radius: 50%;
text-align: center;
}
/* Main End */
/* Right Start */
.right{
position: relative;
width: calc(100% - 600px);
height: 100%;
background: var(--mainBgClr);
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border-radius: 20px;
padding: 25px;
}
.right header{
position: relative;
width: 100%;
height: 65px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
display: flex;
align-items: center;
}
.right header .imgBx{
position: relative;
width: 50px;
height: 50px;
margin-right: 20px;
cursor: pointer;
}
.right header .imgBx::before{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
background: var(--activeClr);
border-radius: 50%;
border: 3px solid var(--mainBgClr);
z-index: 1;
}
.right header .imgBx img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.right header .title{
position: relative;
}
.right header .title h2{
font-size: 1.2rem;
font-weight: 500;
cursor: pointer;
}
.right header .title p{
color: var(--iconClr);
text-transform: capitalize;
}
.right header .headIconBx{
position: absolute;
right: 0;
}
.right header .headIconBx a{
position: relative;
width: 50px;
height: 50px;
margin-left: 25px;
text-decoration: none;
}
.right header .headIconBx a i{
font-size: 1.2rem;
color: var(--bgClr);
}
.right .chatBx{
position: relative;
width: 100%;
height: calc(100% - 120px);
padding: 25px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.right .chatBx .messages{
position: relative;
width: 100%;
margin: 5px 0;
padding: 15px;
display: flex;
}
.right .chatBx .messages.rightSide{
justify-content: flex-end;
}
.right .chatBx .messages h2{
position: relative;
font-size: 1.1rem;
padding: 5px 10px;
font-weight: 500;
color: var(--iconClr);
background: var(--mainClr);
border-radius: 10px;
z-index: 1;
}
.right .chatBx .messages.leftSide h2::before{
content: '';
position: absolute;
bottom: 0px;
left: -11px;
width: 20px;
height: 20px;
clip-path: polygon(0 100%, 100% 0, 100% 100%);
z-index: -1;
background: var(--mainClr);
}
.right .chatBx .messages.rightSide h2::before{
content: '';
position: absolute;
bottom: 0px;
right: -11px;
width: 20px;
height: 20px;
clip-path: polygon(0 100%, 0 0, 100% 100%);
z-index: -1;
background: var(--mainClr);
}
.right .chatBx .messages p{
position: absolute;
top: 50px;
}
.right .chatBx .messages h2 img{
position: relative;
width: 450px;
}
.right .inputBx{
position: relative;
width: 100%;
height: 50px;
margin-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.right .inputBx .input{
position: relative;
width: 90%;
height: 100%;
background: var(--mainClr);
border-radius: 10px;
padding: 10px;
margin-right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.right .inputBx .input .search{
position: relative;
}
.right .inputBx .input .search i{
font-size: 1.2rem;
color: var(--iconClr);
transform: rotate(270deg) rotateY(180deg);
margin-right: 20px;
cursor: pointer;
}
.right .inputBx .input .search input{
outline: none;
border: none;
background: transparent;
font-size: 1.3rem;
font-weight: 600;
}
.right .inputBx .input .search input::placeholder{
color: var(--mainTextClr);
}
.right .inputBx .input .inputIcon{
position: relative;
}
.right .inputBx .input .inputIcon i{
font-size: 1.2rem;
color: var(--iconClr);
margin-left: 15px;
cursor: pointer;
}
.right .inputBx .mic{
position: relative;
width: 50px;
height: 50px;
background: var(--bgClr);
border-radius: 10px;
cursor: pointer;
}
.right .inputBx .mic i{
position: absolute;
width: 100%;
height: 100%;
color: var(--mainBgClr);
font-size: 1.3rem;
display: flex;
justify-content: center;
align-items: center;
}
/* Right End */
/* Scrollbar Start */
::-webkit-scrollbar {
display: none;
}
/* Scrollbar End */
This code is written in CSS and sets the overall design and layout of a webpage. It sets various variables to represent different colors that are used throughout the webpage, such as --bgClr for the background color and --mainTextClr for the main text color.
The code sets the body of the webpage to center the content and sets a minimum height of 100vh, which is the full height of the viewport. It also sets the background color of the body to the --bgClr variable and hides any overflow.
This code creates a section element that is use to take up 95% of the width and height of the viewport. It has a background color of –-mainClr, a border-radius of 35px, padding of 20px, and a box-shadow. It’s use to display flex, with its children aligned in the center and space apart by 25px.
This code sets up a chat page with a left sidebar that has icons for navigation and a logout button. The .left class is set to take up 100px width and 100% height of the viewport, with a background color of --bgClr variable and a box-shadow for depth. The sidebar also includes a .iconBx class for icons and a .logOut class for the logout button.
It also styles an a element with a span child element which is used to show the text of the icon when hovered over and an image element with the class of .user which is used to show the user’s profile picture.
This code provides a general layout and design for the webpage, including setting the background color, font, and layout for various elements on the page. It also includes some interactivity such as the hover effect for the sidebar icons and the user’s profile picture.
