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 =
<!-- Icons here -->
< div class = "icons" >
< img src =
< img src =
< img src =
< img src =
< img src =
< img src =
</ div >
</ div >
< div class = "main-content" >
<!-- Main content goes here -->
< div class = "image-container" >
< div class = "image" > < img src =
< div class = "image" >< img src =
< div class = "image" >< img src =
< div class = "image" >< img src =
</ 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 =
People 1</ li >
< li >< img src =
People 2</ li >
< li >< img src =
People 3</ li >
< li >< img src =
People 4</ li >
< li >< img src =
People 5</ li >
< li >< img src =
People 6</ li >
< li >< img src =
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.3 s;
/* Add transition effect */
display : block ;
margin : 10px ;
cursor : pointer ;
opacity: 0.5 ;
border-radius: 10px ;
transition: opacity 0.5 s, background 0.5 s;
} .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 , 1 fr);
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 h 3 {
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: