Design a Video Calling Website UI Template using HTML and CSS
Last Updated :
28 Apr, 2025
Improve
In this tutorial, we will learn the process of building a UI template for a Video Calling Website using HTML and CSS. Our goal is to create an attractive and user-friendly interface that makes video calls an enjoyable experience. The website will have a navigation bar with quick-access icons, a main content area that displays video feeds, and a sidebar that lists all participants in the call.
Preview
Approach:
- First create a simple HTML layout with sections for navigation, main content, and a sidebar.
- Add a logo and icons for navigation and sidebar sections using
<img>tags. - Utilize CSS Flexbox to create a column layout for the navigation and sidebar.
- Apply CSS Grid for the main content's image container, arranging images in a grid.
- Include icons for the "People Joined" section in the left sidebar, aligning them with text.
- Implement hover effects and animations to improve user interaction.
- Ensure responsiveness by using relative units and flex properties, allowing for adaptability across various screen sizes.
Example: Implementation to design video calling UI template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="navigation">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240130154852/ddd-min.png" alt="Logo">
<!-- Icons here -->
<div class="icons">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151539/temp1.png" class="active-icon">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151538/emp2.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151538/temp3.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151538/temp4.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151537/temp5.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151537/temp6.png">
</div>
</div>
<div class="main-content">
<!-- Main content goes here -->
<div class="image-container">
<div class="image"> <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/man.png"></div>
<div class="image"><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/man.png"></div>
<div class="image"><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/man.png"></div>
<div class="image"><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/man.png"></div>
</div>
<div class="icons main-icons">
<!-- Icons here -->
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151955/temp1.png" height="10" alt="Icon 1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151955/temp2.png" height="10" alt="Icon 2">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240130162531/call.png" height="10" class="call-icon"
alt="Icon 3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151954/temp4.png" height="10" alt="Icon 4">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206151954/temp5.png" height="10" alt="Icon 5">
</div>
</div>
<div class="sidebar">
<!-- Sidebar content goes here -->
<h3>People Joined</h3>
<ul>
<li><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/girl.png" alt="Post 1">
People 1</li>
<li><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/girl.png" alt="Post 1">
People 2</li>
<li><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/girl.png" alt="Post 1">
People 3</li>
<li><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/girl.png" alt="Post 1">
People 4</li>
<li><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/girl.png" alt="Post 1">
People 5</li>
<li><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240208132102/girl.png" alt="Post 1">
People 6</li>
<li><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240206152217/t7.png" alt="Invite">
Invite More People</li>
</ul>
</div>
</div>
</body>
</html>
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body {
background-color: #404245;
;
}
.container {
display: flex;
}
.navigation {
width: 9%;
background-color: rgb(17, 41, 73);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
}
.navigation img {
width: 80px;
/* Adjust the width as needed */
height: 80px;
margin-bottom: 10px;
}
.icons img {
width: 30px;
/* Adjust the width as needed */
height: auto;
margin-right: 10px;
border: 2px solid transparent;
/* Add border */
border-radius: 50%;
/* Add border radius */
transition: border-color 0.3s;
/* Add transition effect */
display: block;
margin: 10px;
cursor: pointer;
opacity: 0.5;
border-radius: 10px;
transition: opacity 0.5s, background 0.5s;
}
.icons img:hover {
opacity: 1;
background: #3388cc;
/* Change border color on hover */
}
.active-icon {
opacity: 1;
background: #3388cc;
}
.main-content {
width: 65%;
padding: 10px;
background-color: #5e5959;
border-radius: 10px;
margin-left: 10px;
margin-right: 10px;
}
.image-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.image img {
width: 90%;
border-radius: 10px;
cursor: pointer;
height: 70%;
}
.main-icons {
display: flex;
justify-content: center;
align-items: center;
}
.main-icons .call-icon {
width: 60px;
}
.sidebar {
width: 25%;
background-color: rgb(17, 41, 73);
padding: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
/* Align items center */
}
.sidebar h3 {
margin-bottom: 10px;
color: white;
}
.sidebar ul {
list-style-type: none;
padding: 0;
margin-right: 100px;
}
.sidebar ul li {
margin-bottom: 10px;
color: white;
display: flex;
align-items: center;
/* Align items center */
}
.sidebar ul li img {
margin-right: 10px;
height: 50px;
width: 50px;
}
Output:
