Design a Video Calling Website UI Template using HTML and CSS
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.w3wiki.net/wp-content/uploads/20240130154852/ddd-min.png" alt="Logo"> <!-- Icons here --> <div class="icons"> <img src="https://media.w3wiki.net/wp-content/uploads/20240206151539/temp1.png" class="active-icon"> <img src="https://media.w3wiki.net/wp-content/uploads/20240206151538/emp2.png"> <img src="https://media.w3wiki.net/wp-content/uploads/20240206151538/temp3.png"> <img src="https://media.w3wiki.net/wp-content/uploads/20240206151538/temp4.png"> <img src="https://media.w3wiki.net/wp-content/uploads/20240206151537/temp5.png"> <img src="https://media.w3wiki.net/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.w3wiki.net/wp-content/uploads/20240208132102/man.png"></div> <div class="image"><img src="https://media.w3wiki.net/wp-content/uploads/20240208132102/man.png"></div> <div class="image"><img src="https://media.w3wiki.net/wp-content/uploads/20240208132102/man.png"></div> <div class="image"><img src="https://media.w3wiki.net/wp-content/uploads/20240208132102/man.png"></div> </div> <div class="icons main-icons"> <!-- Icons here --> <img src="https://media.w3wiki.net/wp-content/uploads/20240206151955/temp1.png" height="10" alt="Icon 1"> <img src="https://media.w3wiki.net/wp-content/uploads/20240206151955/temp2.png" height="10" alt="Icon 2"> <img src="https://media.w3wiki.net/wp-content/uploads/20240130162531/call.png" height="10" class="call-icon" alt="Icon 3"> <img src="https://media.w3wiki.net/wp-content/uploads/20240206151954/temp4.png" height="10" alt="Icon 4"> <img src="https://media.w3wiki.net/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.w3wiki.net/wp-content/uploads/20240208132102/girl.png" alt="Post 1"> People 1</li> <li><img src="https://media.w3wiki.net/wp-content/uploads/20240208132102/girl.png" alt="Post 1"> People 2</li> <li><img src="https://media.w3wiki.net/wp-content/uploads/20240208132102/girl.png" alt="Post 1"> People 3</li> <li><img src="https://media.w3wiki.net/wp-content/uploads/20240208132102/girl.png" alt="Post 1"> People 4</li> <li><img src="https://media.w3wiki.net/wp-content/uploads/20240208132102/girl.png" alt="Post 1"> People 5</li> <li><img src="https://media.w3wiki.net/wp-content/uploads/20240208132102/girl.png" alt="Post 1"> People 6</li> <li><img src="https://media.w3wiki.net/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;} |
Output:
Contact Us