Video Call Website Using HTML, CSS, and JavaScript (Source Code)
Introduction
Hello friends, welcome to today’s new blog post. Today we have created a beautiful project for you and this project is beginners friendly. Anyone can use it. If you are learning coding or want to learn, then this project is going to be very helpful for you. This project is a video call website for which we have created the UI. To make it, we have used html, CSS and JavaScript which is very easy. In this website, we have added many button icons and created a section for video calling. Along with that, on the right side, we have created a separate section for chatting which is very easy. It looks beautiful friends this video calling website is very easy and simple we have not used any advanced technology in it, we have only used some images and icons which we get for free.
Friends to make it we will have to make a structure from HTML and then we will have to design it properly for which we have used CSS and have taken some help from JavaScript so now let us understand about our code that how we have used it and how you can use it if you don’t know the code properly If you understand then you may face problem, so you have to understand the code properly.
HTML (index.html)
Friends, this code which you are getting to see below is the code of HTML with the help of which we have built the structure of our website. It is very easy to make it. Even if you do not have any knowledge of HTML, you can still make it. So let’s understand the code of HTML now.
- First of all, we see this in the code of HTML, which means that this code is of HTML <!DOCTYPE HTML>
- Then comes which language has been added to our code or our website <html lang=”en”>
- For any project, its title is considered very important, that is why we have also added the title <title>VideoCall App UI</title>
- The most important thing for our website is its design, for this we first need to link our style file to the html <link rel=”stylesheet” href=”./style.css”>
- </head> tag contains all our things like links, icons, title etc. All these are added between <head> open and </head> tag closing.
- We have added the link of the font in the html file itself <link href=”https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap” rel=”stylesheet”>
- First of all we have created a container which is the important container of the whole HTML code <div class=”app-container”>
- We have created a button in our website whose name we have named mode switch, with the help of this we can enable our dark mode and light mode <button class=”mode-switch”>
- We used <svg> to style the mode switch button to look nice
- We have circled the dark and light mode button <circle cx=”12″ cy=”12″ r=”5″ /> and its color will change according to the mode
- Then we have used some more icon in left side which is button <div class=”left-side”>
- We have created a navigation on the left side of the website <div class=”navigation”> in which we have added different icons
- With the help of <a> element we have added our left side icon, in this we can also add our link <a character=”#” class=”nav-link icon”>
- We have used <svg> to show icon on left side number. You can add image or icon link of different website for icon.
- We have created a video call section on our website, in which we have added some demo video calls, for which we have created a <div> <div class=”app-main”>
- We have added some demo video calls in the video call section, in which we have added some action buttons. To add them, we have created <div class=”participant-actions”>
- We have created two action buttons and for this we have used <button> tag <button class=”btn-mute”></button>
- We have used <a href=”#” class=”name-tag”>Andy Will</a> to show the name of the user who is calling in the video call
- In the video call, we have shown the image of the user making the video call <ing src=”…” alt=”participant”>
- We have created a chat box on the right side of the website which we have created with <div> <div class=”right-side”>
- To create the chat box, we have created a <div class=”chat-container”> in which we have added a separate demo chat
- In the chat box, we have created a button at the top side <button class=”chat-header-button”>
- We have created a <div class=”profile-picture“> to show the profile of the user who is chatting in the chat box. We have used the <img> element in it.
So friends, this was the HTML code of our video call website. I have explained all its code to you very well.
<title>VideoCall App UI</title>
<!-- partial:index.partial.html -->
<div class="app-container">
<button class="mode-switch">
<svg class="sun" fill="none">
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
</svg>
<svg class="moon" fill="none">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg>
</button>
<div class="left-side">
<div class="navigation">
<a href="#" class="nav-link icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
<path d="M9 22V12h6v10" />
</svg>
</a>
<a href="#" class="nav-link icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="feather feather-message-square">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
</svg>
</a>
<a href="#" class="nav-link icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="feather feather-phone-call">
<path d="M15.05 5A5 5 0 0119 8.95M15.05 1A9 9 0 0123 8.94m-1 7.98v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" />
</svg>
</a>
<a href="#" class="nav-link icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="feather feather-hard-drive">
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
</svg>
</a>
<a href="#" class="nav-link icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</a>
<a href="#" class="nav-link icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="feather feather-folder">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
</svg>
</a>
<a href="#" class="nav-link icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="feather feather-settings">
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
</svg>
</a>
</div>
</div>
<div class="app-main">
<div class="video-call-wrapper">
<div class="video-participant">
<div class="participant-actions">
<button class="btn-mute"></button>
<button class="btn-camera"></button>
</div>
<a href="#" class="name-tag">Andy Will</a>
<img decoding="async" src="https://images.unsplash.com/photo-1566821582776-92b13ab46bb4?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="participant">
</div>
<div class="video-participant">
<div class="participant-actions">
<button class="btn-mute"></button>
<button class="btn-camera"></button>
</div>
<a href="#" class="name-tag">Emmy Lou</a>
<img decoding="async" src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" alt="participant">
</div>
<div class="video-participant">
<div class="participant-actions">
<button class="btn-mute"></button>
<button class="btn-camera"></button>
</div>
<a href="#" class="name-tag">Tim Russel</a>
<img decoding="async" src="https://images.unsplash.com/photo-1576110397661-64a019d88a98?ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80" alt="participant">
</div>
<div class="video-participant">
<div class="participant-actions">
<button class="btn-mute"></button>
<button class="btn-camera"></button>
</div>
<a href="#" class="name-tag">Jessica Bell</a>
<img decoding="async" src="https://images.unsplash.com/photo-1600207438283-a5de6d9df13e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80" alt="participant">
</div>
<div class="video-participant">
<div class="participant-actions">
<button class="btn-mute"></button>
<button class="btn-camera"></button>
</div>
<a href="#" class="name-tag">Ryan Patrick</a>
<img decoding="async" src="https://images.unsplash.com/photo-1581824283135-0666cf353f35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1276&q=80" alt="participant">
</div>
<div class="video-participant">
<div class="participant-actions">
<button class="btn-mute"></button>
<button class="btn-camera"></button>
</div>
<a href="#" class="name-tag">Tina Cate</a>
<img decoding="async" src="https://images.unsplash.com/photo-1542596594-649edbc13630?ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80" alt="participant">
</div>
</div>
<div class="video-call-actions ">
<button class="video-action-button mic"></button>
<button class="video-action-button camera"></button>
<button class="video-action-button maximize"></button>
<button class="video-action-button endcall">Leave</button>
<button class="video-action-button magnifier">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="feather feather-zoom-in">
<path d="M21 21l-4.35-4.35M11 8v6M8 11h6" />
</svg>
<span>100%</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="feather feather-zoom-out">
</svg>
</button>
</div>
</div>
<div class="right-side">
<button class="btn-close-right">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="feather feather-x-circle">
<path d="M15 9l-6 6M9 9l6 6"></path>
</svg>
</button>
<div class="chat-container">
<div class="chat-header">
<button class="chat-header-button">
Live Chat
</button>
</div>
<div class="chat-area">
<div class="message-wrapper">
<div class="profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1581824283135-0666cf353f35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1276&q=80" alt="pp">
</div>
<div class="message-content">
<p class="name">Ryan Patrick</p>
<div class="message">Helloo team!😍</div>
</div>
</div>
<div class="message-wrapper">
<div class="profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1566821582776-92b13ab46bb4?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="pp">
</div>
<div class="message-content">
<p class="name">Andy Will</p>
<div class="message">Hello! Can you hear me?🤯 <a class="mention">@ryanpatrick</a></div>
</div>
</div>
<div class="message-wrapper">
<div class="profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1600207438283-a5de6d9df13e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80" alt="pp">
</div>
<div class="message-content">
<p class="name">Jessica Bell</p>
<div class="message">Hi team! Let's get started it.</div>
</div>
</div>
<div class="message-wrapper reverse">
<div class="profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" alt="pp">
</div>
<div class="message-content">
<p class="name">Emmy Lou</p>
<div class="message">Good morning!🌈</div>
</div>
</div>
<div class="message-wrapper">
<div class="profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1576110397661-64a019d88a98?ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80" alt="pp">
</div>
<div class="message-content">
<p class="name">Tim Russel</p>
<div class="message">New design document⬇️</div>
<div class="message-file">
<div class="icon sketch">
<svg xmlns="http://www.w3.org/2000/svg">
<path fill="#ffd54f" d="M96 191.02v-144l160-30.04 160 30.04v144z" />
<path fill="#ffecb3" d="M96 191.02L256 16.98l160 174.04z" />
<path fill="#ffa000" d="M0 191.02l256 304 256-304z" />
<path fill="#ffca28" d="M96 191.02l160 304 160-304z" />
<path d="M0 191.02l96-144v144zM416 47.02v144h96z" />
</svg>
</div>
<div class="file-info">
<div class="file-name">NewYear.sketch</div>
<div class="file-size">120 MB</div>
</div>
</div>
</div>
</div>
<div class="message-wrapper">
<div class="profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1581824283135-0666cf353f35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1276&q=80" alt="pp">
</div>
<div class="message-content">
<p class="name">Ryan Patrick</p>
<div class="message">Hi team!❤️</div>
<div class="message">I downloaded the file <a class="mention">@timrussel</a></div>
</div>
</div>
<div class="message-wrapper reverse">
<div class="profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" alt="pp">
</div>
<div class="message-content">
<p class="name">Emmy Lou</p>
<div class="message">Woooww! Awesome❤️</div>
</div>
</div>
</div>
<div class="chat-typing-area-wrapper">
<div class="chat-typing-area">
<button class="send-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="feather feather-send">
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
</svg>
</button>
</div>
</div>
</div>
<div class="participants">
<div class="participant profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1576110397661-64a019d88a98?ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80" alt="pp">
</div>
<div class="participant profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1566821582776-92b13ab46bb4?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="pp">
</div>
<div class="participant profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1600207438283-a5de6d9df13e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80" alt="pp">
</div>
<div class="participant profile-picture">
<img decoding="async" src="https://images.unsplash.com/photo-1581824283135-0666cf353f35?ixlib=rb-1.2.1&auto=format&fit=crop&w=1276&q=80" alt="pp">
</div>
<div class="participant-more">2+</div>
</div>
</div>
<button class="expand-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" class="feather feather-message-circle">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
</button>
</div>
<!-- partial -->
CSS (Style.css)
Friends, now we are going to see the CSS code, how we have used CSS in our website and if you like CSS very much then you can create many good projects with the help of CSS, so let’s understand our CSS code step by step.
- First we have set box-sizing: border-box; in body, this element sets border, height and width
- I added overflow: hidden; to the body so that our content doesn’t overflow
- We have not kept outline of the button added in website and used outline: none; and cursor: pointer; and transition transition: 0.2s;
- In the button we have used hover effect opacity: 0.7; you can apply any hover effect you like
- We’ve added some menu buttons to the nav with text-decoration: none;
- We have imported a container in our website in which we have set background-color: var(–app-background);
- We have used this font in our website font-family: “DM Sans”, Sans-only; which looks like
- All the menu items in the container we have display: flex;
- We have added some icons on the left side of the website in which we have made the position relative and used padding: 16ps;
- To center the left side icon, we used align-items: center; and also centered the content with justify-content: center; and to make the icon a column by flexing it, we used
- In the navigation menu we have used shadow to make it look better and also used border-radius: 10ps; to make the border round
- We have used hover effect in navigation menu and on hover we have set color: #3d42df;
- We have used all icons in our website which have width: 24px; and height: 24px; we can increase or decrease this
- We have created a chat box in which we have set margin-left: auto; and flex-basis: 400ps;
- The right-side chat box has been set to position: relative; so that there is no problem in setting it
- We have used this color in the background of the chat container background-color: var(–chat-background); and also added border-radius: 10px; to make it look good
- In the chat header of the chat container we have used padding padding: 16px; and also used border bottom border-bottom: 1px solid #f5f5f5;
- We have added a button in the chat header whose background color we have set as background-color: var(–main-color);
- In the chat header button we have used border: none; and to give it a nice look we have made the border round border-radius: 4px; and the most important font is font-size: 14px; 14px
- In the chart area we have used overflow-y: auto; so that the charts can scroll and used a little padding padding: 16ps;
- We have added a profile photo in the chat container which we have kept round border-radius: 8px; and width is kept width: 32px; the height is kept the same as the width
- Friends, we have added some demo video calls to our website, in which we have used position: absolute; in the name tag
- In name tag we have done bottom: 12px; and from right side we have kept right: 12px; background color we have kept background-color: rgba(0, 15, 47, 0.5); along with that we have used padding and border radius padding: 4px 12px;
- We have also added two action buttons in the video call whose width: 32px; and height is kept same and background color is used and in the button we have added border-radius: 4px;
- Then we have used media choir to make the website responsive @media screen end (max-width: 900ps)
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
button {
outline: none;
transition: 0.2s;
cursor: pointer;
}
button:hover {
opacity: 0.7;
}
body {
--app-background: #eaebf5;
--chat-background: #fff;
--link-color: #c0c1c5;
--navigation-bg: #fff;
--navigation-box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
--main-color: #3d42df;
--message-bg: #f3f4f9;
--message-bg-2: #3d42df;
--message-text: #2c303a;
--placeholder-text: #a2a4bc;
--button-bg: #fff;
}
body.dark {
--app-background: #262a42;
--navigation-box-shadow: 0px 0px 8px 0px #282b33;
--chat-background: #3c3f56;
--message-bg: #2c3046;
--message-text: rgba(255,255,255,0.8);
--placeholder-text: #fff;
--navigation-bg: #3c3f56;
--button-bg: #3c3f56;
--main-color: #6f74ff;
--message-bg-2: #6f74ff;
}
body.dark .mic {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-mic-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M9 9v3a3 3 0 005.12 2.12M15 9.34V4a3 3 0 00-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 015 12v-2m14 0v2a7 7 0 01-.11 1.23M12 19v4M8 23h8'/%3E%3C/svg%3E%0A");
}
body.dark .camera {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-camera-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M21 21H3a2 2 0 01-2-2V8a2 2 0 012-2h3m3-3h6l2 3h4a2 2 0 012 2v9.34m-7.72-2.06a4 4 0 11-5.56-5.56'/%3E%3C/svg%3E%0A");
}
body.dark .maximize {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize' viewBox='0 0 24 24'%3E%3Cpath d='M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3'/%3E%3C/svg%3E%0A");
}
body.dark .magnifier {
color: #fff;
}
body.dark .chat-header {
border-color: var(--message-bg);
}
body.dark .btn-close-right {
color: #fff;
}
a {
text-decoration: none;
}
.app-container {
background-color: var(--app-background);
width: 100%;
height: 100%;
font-family: "DM Sans", sans-serif;
display: flex;
transition: 0.2s;
}
.left-side {
position: relative;
padding: 16px;
flex-basis: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.navigation {
display: flex;
flex-direction: column;
background-color: var(--navigation-bg);
padding: 24px;
border-radius: 10px;
box-shadow: var(--navigation-box-shadow);
}
.nav-link + .nav-link {
margin-top: 32px;
}
.nav-link:hover svg {
color: #3d42df;
}
.icon svg {
width: 24px;
height: 24px;
color: var(--link-color);
transition: 0.2s ease-in;
}
.right-side {
margin-left: auto;
flex-basis: 400px;
height: 100%;
padding: 16px;
position: relative;
transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
}
.right-side.show {
display: block;
transform: translateX(0);
}
.chat-container {
background-color: var(--chat-background);
border-radius: 10px;
display: flex;
flex-direction: column;
height: calc(100% - 72px);
}
.chat-header {
padding: 16px;
border-bottom: 1px solid #f5f5f5;
}
.chat-header-button {
background-color: var(--main-color);
padding: 12px 16px 12px 40px;
border: none;
border-radius: 4px;
color: #fff;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M479.9 187.52l-90.19 68.53v-52.6a20 20 0 00-20-20H20a20 20 0 00-20 20V492a20 20 0 0020 20h349.71a20 20 0 0020-20v-52.6l90.18 68.52c13.05 9.91 32.1.67 32.1-15.92V203.45c0-16.5-18.94-25.92-32.1-15.93zM349.7 472H40V223.45h309.71zM472 451.68l-82.29-62.53V306.3L472 243.77zM87.96 79.24C129.62 28.88 190.86 0 256 0c65.13 0 126.37 28.88 168.03 79.24a20 20 0 01-30.82 25.5A177.6 177.6 0 00256 40a177.6 177.6 0 00-137.21 64.73 20 20 0 11-30.83-25.5zm240.36 32.21a20 20 0 11-21.02 34.03 97.57 97.57 0 00-51.3-14.53 97.6 97.6 0 00-51.31 14.53 20 20 0 11-21.02-34.03A137.53 137.53 0 01256 90.95c25.59 0 50.6 7.09 72.32 20.5zm0 0'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center left 12px;
background-size: 16px;
font-size: 14px;
}
.chat-area {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.profile-picture {
border-radius: 8px;
width: 32px;
height: 32px;
overflow: hidden;
margin-right: 12px;
flex-shrink: 0;
}
.profile-picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
.message-wrapper {
display: flex;
}
.name {
margin: 0;
line-height: 16px;
font-size: 12px;
font-weight: 700;
color: var(--message-text);
}
.message {
margin-top: 8px;
background-color: var(--message-bg);
padding: 8px 16px;
border-radius: 0 12px 12px 12px;
font-size: 12px;
line-height: 16px;
max-width: calc(100% - 32px);
color: var(--message-text);
}
.message-wrapper {
padding: 16px 0;
}
.message-wrapper.reverse {
flex-direction: row-reverse;
}
.message-wrapper.reverse .message {
background-color: var(--message-bg-2);
color: #fff;
margin-left: auto;
border-radius: 16px 0px 16px 16px;
}
.message-wrapper.reverse .profile-picture {
margin-right: 0px;
margin-left: 12px;
}
.message-wrapper.reverse .name {
text-align: right;
}
.message-file {
border: 1px solid var(--message-bg);
width: 100%;
margin-top: 16px;
border-radius: 4px;
padding: 8px;
display: flex;
}
.message-file .sketch {
border-radius: 4px;
padding: 2px;
background-color: #fdeee2;
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
}
.message-file .sketch svg {
width: 20px;
height: 20px;
}
.file-info {
flex: 1;
padding: 0 40px 0 8px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b8b8b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-download' viewBox='0 0 24 24'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E%0A");
background-position: center right 12px;
background-size: 20px;
background-repeat: no-repeat;
font-size: 12px;
}
.file-name {
color: var(--message-text);
}
.file-size {
color: #b8b8b8;
}
.mention {
color: #7c80fd;
}
.chat-typing-area-wrapper {
padding: 16px;
}
.chat-typing-area {
display: flex;
border-radius: 10px;
padding: 8px;
box-shadow: var(--navigation-box-shadow);
background-color: var(--message-bg);
}
.dark .chat-typing-area {
box-shadow: none;
}
.chat-input {
border: none;
font-size: 14px;
line-height: 24px;
outline: none;
color: var(--message-text);
flex: 1;
background-color: transparent;
}
.chat-input:placeholder {
color: var(--placeholder-text);
}
.send-button {
color: #fff;
background-color: var(--main-color);
border-radius: 8px;
border: none;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
}
.send-button svg {
width: 20px;
height: 20px;
}
.app-main {
flex: 1;
width: 100%;
padding: 72px 32px 16px 32px;
display: flex;
flex-direction: column;
align-items: center;
}
.video-call-wrapper {
width: 100%;
height: 100%;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
.video-participant {
width: 33.3%;
height: 50%;
position: relative;
}
.video-participant img {
width: 100%;
height: 100%;
object-fit: cover;
}
.name-tag {
position: absolute;
bottom: 12px;
right: 12px;
font-size: 12px;
color: #fff;
background-color: rgba(0, 15, 47, 0.5);
border-radius: 4px;
padding: 4px 12px;
}
.participant-actions {
position: absolute;
display: flex;
left: 12px;
top: 12px;
}
.btn-mute, .btn-camera {
width: 32px;
height: 32px;
border-radius: 4px;
background-color: rgba(0, 15, 47, 0.5);
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
border: none;
}
.btn-mute {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-mic-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M9 9v3a3 3 0 005.12 2.12M15 9.34V4a3 3 0 00-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 015 12v-2m14 0v2a7 7 0 01-.11 1.23M12 19v4M8 23h8'/%3E%3C/svg%3E%0A");
margin-right: 4px;
}
.btn-camera {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-camera-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M21 21H3a2 2 0 01-2-2V8a2 2 0 012-2h3m3-3h6l2 3h4a2 2 0 012 2v9.34m-7.72-2.06a4 4 0 11-5.56-5.56'/%3E%3C/svg%3E%0A");
}
.video-call-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 64px;
max-width: 500px;
}
.video-action-button {
background-repeat: no-repeat;
background-size: 24px;
border: none;
height: 48px;
margin: 0 8px;
box-shadow: var(--navigation-box-shadow);
border-radius: 8px;
width: 48px;
cursor: pointer;
outline: none;
background-color: var(--button-bg);
}
.video-action-button.mic {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%232c303a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-mic-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M9 9v3a3 3 0 005.12 2.12M15 9.34V4a3 3 0 00-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 015 12v-2m14 0v2a7 7 0 01-.11 1.23M12 19v4M8 23h8'/%3E%3C/svg%3E%0A");
background-position: center;
}
.video-action-button.camera {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%232c303a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-camera-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M21 21H3a2 2 0 01-2-2V8a2 2 0 012-2h3m3-3h6l2 3h4a2 2 0 012 2v9.34m-7.72-2.06a4 4 0 11-5.56-5.56'/%3E%3C/svg%3E%0A");
background-position: center;
}
.video-action-button.maximize {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%232c303a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize' viewBox='0 0 24 24'%3E%3Cpath d='M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3'/%3E%3C/svg%3E%0A");
background-position: center;
}
.video-action-button.endcall {
color: #ff1932;
width: auto;
font-size: 14px;
padding-left: 42px;
padding-right: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff1932' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-phone-missed'%3E%3Cline x1='23' y1='1' x2='17' y2='7'/%3E%3Cline x1='17' y1='1' x2='23' y2='7'/%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
background-size: 20px;
background-position: center left 12px;
}
.video-action-button.magnifier {
padding: 0 12px;
display: flex;
align-items: center;
width: auto;
flex-grow: 0;
color: #2c303a;
}
.video-action-button.magnifier svg {
width: 20px;
flex-shrink: 0;
}
.video-action-button.magnifier span {
display: block;
margin: 0 16px;
}
.participants {
display: flex;
background-color: var(--button-bg);
box-shadow: var(--navigation-box-shadow);
margin-top: 16px;
padding: 12px;
border-radius: 8px;
max-width: 232px;
margin-left: auto;
}
.participant-more {
background-color: #e1e0e1;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
color: #636181;
font-weight: 700;
border-radius: 8px;
min-width: 32px;
}
.mode-switch {
z-index: 1;
position: absolute;
top: 20px;
left: 36px;
background-color: var(--chat-background);
border: none;
color: #ddd;
outline: none;
cursor: pointer;
box-shadow: var(--navigation-box-shadow);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
transform-origin: center;
}
.mode-switch svg {
width: 0;
height: 24px;
transition: all 0.3s ease-in;
transform-origin: center;
}
.mode-switch .moon {
opacity: 0;
}
.mode-switch .sun {
width: 24px;
}
.dark .moon {
opacity: 1;
width: 24px;
}
.dark .sun {
opacity: 0;
width: 0;
}
.expand-btn {
position: absolute;
right: 32px;
top: 24px;
border: none;
background-color: var(--chat-background);
border-radius: 4px;
padding: none;
color: var(--message-text);
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
display: none;
}
.expand-btn.show {
display: flex;
}
.btn-close-right {
border: none;
background-color: transparent;
position: absolute;
top: 24px;
right: 24px;
color: var(--light-font);
outline: none;
cursor: pointer;
display: none;
}
@media screen and (max-width: 900px) {
.expand-btn {
display: block;
}
.right-side {
position: absolute;
right: 0px;
background-color: var(--chat-background);
transform: translateX(100%);
z-index: 2;
width: 100%;
}
.right-side.show {
transform: translateX(0);
}
.btn-close-right {
display: block;
}
}
@media screen and (max-width: 520px) {
.left-side {
display: none;
}
.app-main {
padding: 72px 16px 16px 16px;
}
.expand-btn {
right: 16px;
}
.mode-switch {
left: 16px;
}
.video-call-actions {
padding-top: 32px;
}
.video-action-button {
width: 32px;
height: 32px;
background-size: 14px;
margin: 0 4px;
}
.video-action-button.endcall {
background-size: 14px;
font-size: 12px;
padding-left: 36px;
}
.video-action-button.magnifier svg {
width: 14px;
}
.video-action-button.magnifier span {
margin: 0 4px;
font-size: 12px;
}
}
@media screen and (max-width: 520px) and (max-height: 720px) {
.video-participant {
width: 50%;
height: 33.3%;
}
}
Javascript (Script.js)
Now let’s talk about Javascript, Javascript is necessary for our project because we have not made our video call website too advanced, we have made it beginners friedly but we have made the website responsive, that is why we have used Javascript in this website and we have used Javascript because when a user opens our website on a mobile device, he will not see the full navigation bar there, he will only be shown an icon on clicking which all the buttons will be shown, so we have also used Javascript only for this and if you have good knowledge of Javascript then you can use it You can see in the code below how we have used Javascript.
$(document).ready(function(){
$('button.mode-switch').click(function(){
$('body').toggleClass('dark');
});
$(".btn-close-right").click(function () {
$(".right-side").removeClass("show");
$(".expand-btn").addClass("show");
});
$(".expand-btn").click(function () {
$(".right-side").addClass("show");
$(this).removeClass("show");
});
});
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
Video Call Website Using HTML, CSS, and JavaScript (Source Code) Introduction Hello friends, welcome to today’s new blog post. Today we have …
promise day using html CSS and JavaScript Introduction Hello all my developers friends my name is Gautam and everyone is welcome to …
Age Calculator Using HTML, CSS, and JavaScript Introduction Hello friends, my name is Gautam and you are all welcome to today’s new …
Loan Calculator Using HTML, CSS, and JavaScript With Source Code Introduction Hello friends my name is Gautam and you are all welcome …
Get Huge Discounts
More Python Projects
