Design a Video Calling Website UI Template using HTML and CSS

Last Updated : 08 Feb, 2024

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.

HTML

<!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>

CSS

/* 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;
}