Create Video Platform Ui Clone Html Css (Complete Code)
Hey there welcome to the codewithrandom blog … In this blog, we are going to create an internal video platform ui with html, css, and javascript. So what is this project based on ?.. Let’s see.
This project is based on a video streaming platform where users can create a video and upload it by choosing what kind of topic their video covers. Then users can search for what type of video they want by giving the respective topic name, so the video will be shown according to the topic the user searched.
Also, we can add the videos to the playlist option, and the favorites option and the videos we watched will be displayed in the history section.
Those are all the kinds of stuff that were included in this internal video project. So now we just start out the coding part by adding the first section with html.
Html code for video platform UI clone:
<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">
<div class="app-wrapper">
<div class="left-area hide-on-mobile">
<div class="app-header">Video.
<span class="inner-text">ply</span>
<button class="close-menu">
<svg width="24" height="24" fill="none" stroke="#51a380" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-x">
<defs />
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
</div>
<div class="left-area-content">
<div class="profile">
<img src="https://images.unsplash.com/photo-1496340672773-0b29c9b17ed2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="">
<div class="profile-info">
<span class="profile-name">Michealla Cruz</span>
<span class="country">Country</span>
</div>
</div>
<div class="page-link-list">
<a href="#" class="item-link active" id="pageLink">
<svg class="link-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-home" viewBox="0 0 24 24">
<defs />
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
<path d="M9 22V12h6v10" /></svg>
Home</a>
<a href="#" class="item-link" id="pageLink">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
</svg>
Favourites</a>
<a href="#" class="item-link" id="pageLink">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play">
<path d="M5 3l14 9-14 9V3z" />
</svg>
My Contents</a>
<a href="#" class="item-link" id="pageLink">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
</svg>
Playlist</a>
<a href="#" class="item-link" id="pageLink">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" /></svg>
History</a>
</div>
<div class="list-header">
<span class="">Private</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="16" />
<line x1="8" y1="12" x2="16" y2="12" /></svg>
</div>
<a href="#" class="item-link" id="pageLink">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
<path d="M7 11V7a5 5 0 0110 0v4" />
</svg>
Studio Records</a>
<a href="#" class="item-link" id="pageLink">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
<path d="M7 11V7a5 5 0 0110 0v4" />
</svg>
Personal</a>
<div class="list-header">
<span class="">Public</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="16" />
<line x1="8" y1="12" x2="16" y2="12" /></svg>
</div>
<a href="#" class="item-link" id="pageLink">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" /></svg>
Vlogs</a>
<a href="#" class="item-link" id="pageLink">
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" /></svg>
Dance</a>
</div>
<button class="btn-invite">Invite Team</button>
</div>
<div class="right-area">
<div class="right-area-upper">
<button class="menu-button">
<svg width="24" height="24" fill="none" stroke="#51a380" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<defs />
<path d="M3 12h18M3 6h18M3 18h18" />
</svg>
</button>
<div class="search-part-wrapper">
<input class="search-input" type="text" placeholder="Search videos...">
<a class="menu-links" href="#">Explore</a>
<a class="menu-links" href="#">Events</a>
<button class="more-button">
<svg width="24" height="24" fill="none" stroke="#51a380" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-more-vertical">
<defs />
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
<ul class="more-menu-list hide">
<li><a href="#">Explore</a></li>
<li><a href="#">Events</a></li>
<li> <button class="action-buttons btn-record">Record</button></li>
<li><button class="action-buttons btn-upload">Upload</button></li>
</ul>
</div>
<button class="btn-notification">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#232428" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
</svg>
<span>3</span>
</button>
<div class="action-buttons-wrapper">
<button class="action-buttons btn-record">Record</button>
<button class="action-buttons btn-upload">Upload</button>
</div>
</div>
<div class="page-right-content">
<div class="content-line content-line-hero">
<div class="line-header">
<span class="header-text">New Uploads</span>
</div>
<div class="slider-wrapper owl-carousel owl-theme" id="owl-slider-1">
<div class="item hero-img-wrapper img-1">
<div class="upload-text-wrapper">
<p class="upload-text-header">The </p>
<p class="upload-text-info">By Pravin <span> 20 minutes ago</span></p>
</div>
<img src="https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2240&q=80" alt="SlideShow">
</div>
<div class="item hero-img-wrapper img-2">
<div class="upload-text-wrapper">
<p class="upload-text-header">History of Art</p>
<p class="upload-text-info">By Pravin <span> 10 minutes ago</span></p>
</div>
<img src="https://images.unsplash.com/photo-1485518994577-6cd6324ade8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2144&q=80" alt="SlideShow">
</div>
<div class="item hero-img-wrapper img-3">
<div class="upload-text-wrapper">
<p class="upload-text-header">Van Life</p>
<p class="upload-text-info">By Tess <span> 3 days ago</span></p>
</div>
<img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2208&q=80" alt="SlideShow">
</div>
</div>
</div>
<div class="content-line content-line-list">
<div class="line-header">
<span class="header-text">Trending</span>
</div>
<div id="owl-slider-2" class="slider-wrapper owl-carousel">
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1532673492-1b3cdb05d51b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Minimal Photography</p>
<p class="video-description-subheader">By July</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1531736275454-adc48d079ce9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Puppet Theatre</p>
<p class="video-description-subheader">By July</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1562832275-4b5d7650c888?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Road Trip</p>
<p class="video-description-subheader">By Wallace</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1523554888454-84137e72c3ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Young Folks</p>
<p class="video-description-subheader">By Peter</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1502691876148-a84978e59af8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Minimal Photography</p>
<p class="video-description-subheader">By July</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1518272417499-b6ebd5fab96a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2181&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Puppet Theatre</p>
<p class="video-description-subheader">By July</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1555298472-8c43a95ddb8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Road Trip</p>
<p class="video-description-subheader">By Wallace</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Young Folks</p>
<p class="video-description-subheader">By Peter</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
</div>
</div>
<div class="content-line content-line-list">
<div class="line-header">
<span class="header-text">Public</span>
</div>
<div id="owl-slider-3" class="slider-wrapper owl-carousel">
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1494252713559-f26b4bf0b174?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Minimal Photography</p>
<p class="video-description-subheader">By July</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1524678714210-9917a6c619c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=2249&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Puppet Theatre</p>
<p class="video-description-subheader">By July</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?ixlib=rb-1.2.1&auto=format&fit=crop&w=2168&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Road Trip</p>
<p class="video-description-subheader">By Wallace</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1502136969935-8d8eef54d77b?ixlib=rb-1.2.1&auto=format&fit=crop&w=2249&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Young Folks</p>
<p class="video-description-subheader">By Peter</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1490535004195-099bc723fa1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3280&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Minimal Photography</p>
<p class="video-description-subheader">By July</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1522410818928-5522dacd5066?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Puppet Theatre</p>
<p class="video-description-subheader">By July</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1544509099-047faa4b96ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Road Trip</p>
<p class="video-description-subheader">By Wallace</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
<div class="item video-box-wrapper">
<div class="img-preview">
<img src="https://images.unsplash.com/photo-1533157461-59f499ba82e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=2251&q=80" alt="video">
</div>
<div class="video-description-wrapper">
<p class="video-description-header">Young Folks</p>
<p class="video-description-subheader">By Peter</p>
<p class="video-description-info">116K views <span>1 hour ago</span></p>
<button class="btn-play"></button>
</div>
</div>
</div>
</div>
</div>
</div>Now we have done without html code. In this code we first add the profile details section containing photos and names with svg tags and div tags, then we include a link with anchor tags by adding a button tag at last in this link section and an input tag for searching for videos with the respective search icon.
Then we are adding the card properties for the video display section with div tags and paragraph tags to include videos with descriptions. And then we just add span tags after p tags for displaying the uploaded time and views of that video.
Further, we are done by adding all those necessary stuff that is mandatory in a video streaming platform were finished with this html code.
Now we can move on to css for styling our web page.
Css code for video platform ui clone:
* {
box-sizing: border-box;
outline: none;
}
%flex {
display: flex;
align-items: center;
}
$primary-font-color: #232428;
$secondary-font-color: #adadad;
$active-color: #499d77;
$green-dark: #51a380;
$green-light: #e6f1ed;
/*ICONS*/
@mixin playIcon($color) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23#{$color}' stroke='%23#{$color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
}
body {
margin: 0;
@extend %flex;
justify-content: center;
flex-direction: column;
overflow: hidden;
width: 100%;
height: 100vh;
padding: 20px;
font-family: 'DM Sans', sans-serif;;
font-size: 12px;
background: linear-gradient(to top, #be93c5, #7bc6cc);
@media screen and (max-width: 900px) {
& { padding: 0; }
}
}
button {
border: none;
cursor: pointer;
background-color: transparent;
transition: all .2s ease-in;
}
a {
text-decoration: none;
}
input[type=text] {
border: none;
}
::-webkit-scrollbar {
width: 6px;
border-radius:10px;
}
::-webkit-scrollbar-track{
background:none;
}
::-webkit-scrollbar-thumb {
background: rgba(216, 216, 216,0.5);
border-radius: 10px;
}
.app-wrapper {
width: 100%;
max-width: 1500px;
height: 100vh;
background-color: #fff;
border-radius: 4px;
box-shadow:
0 0.3px 2.2px rgba(0, 0, 0, 0.011),
0 0.7px 5.3px rgba(0, 0, 0, 0.016),
0 1.3px 10px rgba(0, 0, 0, 0.02),
0 2.2px 17.9px rgba(0, 0, 0, 0.024),
0 4.2px 33.4px rgba(0, 0, 0, 0.029),
0 10px 80px rgba(0, 0, 0, 0.04);
overflow: hidden;
display: flex;
@media screen and (max-width: 900px) {
& { border-radius: none; }
}
}
.left-area {
max-width: 190px;
transition: all .6s linear;
border-right: 1px solid #ddd;
display: flex;
flex-direction: column;
height: 100%;
padding-bottom: 20px;
&.hide-on-mobile {
transition: all .6s linear;
@media screen and (max-width: 900px) {
& {
left: -100%;
opacity: 0;
}
}
}
@media screen and (max-width: 900px) {
& {
position: absolute;
background-color: #fff;
z-index: 2;
left: 0;
opacity: 1;
box-shadow: 4px 0px 4px 0px rgba(222,222,222,0.3);
border-right: none;
}
}
}
.app-header {
font-size: 20px;
font-weight: 500;
color: $primary-font-color;
background-repeat: no-repeat;
background-size: 24px;
background-position: center left 20px;
padding: 20px 20px 20px 44px;
@include playIcon('499d77');
border-bottom: 1px solid #ddd;
position: relative;
.close-menu {
display: none;
position: absolute;
top: 8px;
right: 0;
@media screen and (max-width: 900px) {
& {
display: block;
}
}
}
}
.inner-text {
color: $secondary-font-color;
}
.profile {
display: flex;
align-items: flex-start;
cursor: pointer;
padding: 20px;
img{
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 6px;
margin-right: 12px;
}
span {
display: block;
line-height: 20px;
}
.profile-name {
color: $primary-font-color;
font-weight: 500;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23bebebe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E%0A");
padding-right: 16px;
background-position: center right;
background-repeat: no-repeat;
background-size: 16px;
}
.country {
color: $secondary-font-color;
font-weight: 500;
}
}
.item-link {
display: block;
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
color: $secondary-font-color;
transition: all .2s ease-in;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
&:not(:first-of-type) {
margin-top: 10px;
}
&.active {
color: $active-color;
background-color: lighten($active-color,46%);
}
&:not(.active):hover {
color: lighten($active-color,30%);
background-color: lighten($active-color,52%);
}
.link-icon {
width: 16px;
display: inline-block;
vertical-align: sub;
margin-right: 4px;
}
}
.list-header {
font-size: 12px;
color: $secondary-font-color;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
margin: 10px 0;
transition: all .2s ease-in;
cursor: pointer;
background-color: lighten($secondary-font-color,30%);
svg { transition: all .2s ease-in; }
span {
display: block;
font-weight: 500;
}
&:hover svg {
transition: all .2s ease-in;
fill: $secondary-font-color;
line { stroke: #fff; }
}
}
.btn-invite {
background-color: $active-color;
border: none;
color: #fff;
border-radius: 4px;
padding: 10px;
font-size: 14px;
line-height: 20px;
width: 100%;
max-width: 160px;
margin: 0 auto;
display: block;
margin-top: auto;
&:hover {
background-color: darken($active-color,4%);
}
}
.left-area-content {
flex: 1;
overflow: auto;
}
.right-area {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: calc(100% - 190px);
@media screen and (max-width: 900px) {
& {
max-width: 100%;
}
}
}
.right-area-upper {
width: 100%;
border-bottom: 1px solid #ddd;
display: flex;
max-height: 64px;
padding: 0 20px;
.menu-button {
display: none;
}
@media screen and (max-width: 900px) {
& {
.menu-button {
display: block;
}
}
}
@media screen and (max-width: 520px) {
& { padding: 0 10px; }
}
}
.search-input {
flex: 1;
width: 100%;
font-size: 14px;
line-height: 20px;
color: #adadad;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23adadad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 20px;
background-position: center left 0px;
padding: 10px 10px 10px 24px;
}
.search-part-wrapper {
position: relative;
padding: 14px 20px;
display: flex;
align-items: center;
flex: 1;
a {
color: $primary-font-color;
font-size: 14px;
font-weight: 500;
+ a { margin-left: 10px; }
}
}
.more-menu-list {
position: absolute;
top: 100%;
right: 0;
background-color: #fff;
z-index: 1;
border-radius: 4px;
box-shadow: 0px 2px 4px 2px rgba(209, 209, 209, 0.4);
padding: 10px 0;
transform-origin: center;
&.hide { display: none; }
&:before {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
transform: rotate(45deg);
border-radius: 2px;
top: -6px;
right: 32px;
box-shadow: 0px 0px 4px 0px rgba(209, 209, 209, 0.4);
}
li {
padding: 8px 20px;
list-style-type: none;
cursor: pointer;
&:hover {
background-color: lighten(#e6f1ed,4%);
}
}
}
.btn-notification {
position: relative;
display: block;
border: 1px solid #ddd;
border-top: 0;
border-bottom: 0;
padding: 0 20px;
span {
position: absolute;
background-color: red;
color: #fff;
border-radius: 50%;
padding: 2px;
width: 14px;
height: 14px;
right: 18px;
top: 18px;
font-size: 10px;
}
}
.action-buttons {
border-radius: 2px;
padding: 10px 24px 10px 40px;
font-size: 12px;
color: $green-dark;
background-size: 16px;
background-repeat: no-repeat;
background-position: center left 16px;
max-height: 36px;
}
.btn-record {
color: $green-dark;
background-color: $green-light;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2351a380' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-video'%3E%3Cpath d='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E ");
margin-right: 20px;
&:hover {
background-color: darken($green-light,6%);
}
}
.btn-upload {
color: $green-light;
background-color: $green-dark;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e6f1ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-upload-cloud'%3E%3Cpath d='M16 16l-4-4-4 4M12 12v9'/%3E%3Cpath d='M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3'/%3E%3Cpath d='M16 16l-4-4-4 4'/%3E%3C/svg%3E ");
&:hover {
background-color: lighten($green-dark,6%);
}
}
.action-buttons-wrapper {
padding: 0 20px;
align-items: center;
display: flex;
}
.page-right-content {
flex: 1;
padding: 20px;
overflow: auto;
}
.content-line {
width: 100%;
position: relative;
+ .content-line { margin-top: 24px; transition: .2s;}
.header-text {
display: block;
line-height: 24px;
font-weight: 500;
font-size: 16px;
color: $primary-font-color;
}
}
.line-header {
position: absolute;
padding: 0 10px;
}
.content-line-hero .owl-dots {
position: absolute;
z-index: 12;
left: 50%;
transform: translatex(-50%);
bottom: 24px;
.owl-dot {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 2px;
opacity: 0.5;
padding: 0;
&.active { opacity: 1; }
}
}
.owl-nav {
position: absolute;
top: 0;
right: 10px;
}
.owl-nav button {
background-color: $green-dark;
border-radius: 50%;
width: 24px;
height: 24px;
background-position: center;
background-repeat: no-repeat;
transition: all .2s ease-in;
span { display: none; }
&:hover {
background-color: lighten($green-dark,6%);
}
}
.owl-prev {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e6f1ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E ");
margin-right: 6px;
&:hover {
background-position: center left 2px;
}
}
.owl-next {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e6f1ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E ");
&:hover {
background-position: center right 2px;
}
}
.owl-carousel {
position: relative;
overflow: hidden;
}
.owl-item {
padding: 6px 10px;
}
.owl-stage-outer { width: 100%; }
.hero-img-wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
flex-shrink: 0;
border-radius: 4px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.owl-carousel {
position: relative;
width: 100%;
height: 280px;
display: flex;
align-items: center;
padding-top: 32px;
padding-bottom: 8px;
}
.upload-text {
&-wrapper {
position: absolute;
top: 24px;
left: 24px;
}
&-header {
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #fff;
margin: 0;
}
&-info {
font-size: 12px;
font-weight: 400;
color: #fff;
margin: 0;
opacity: .8;
span {
border-left: 1px solid #fff;
padding-left: 4px;
}
}
}
.img-preview {
flex: 1;
}
.video-box-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 4px;
overflow: hidden;
box-shadow: 0px 2px 4px 0px rgba(209,209,209,.4);
margin-right: 10px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.video-description {
&-wrapper {
background-color: #fff;
padding: 8px;
position: relative;
p {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&-header {
font-weight: 500;
margin: 16px 0 4px 0;
font-size: 14px;
}
&-subheader {
color: #bebfbf;
margin: 0;
font-size: 12px;
}
&-info {
font-size: 12px;
margin: 4px 0;
span {
border-left: 1px solid #cdcdcd;
padding-left: 4px;
}
}
}
.btn-play {
position: absolute;
top: -16px;
right: 8px;
background-color: #fff;
border-radius: 50%;
width: 32px;
height: 32px;
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2311a074' stroke='%2311a074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpath d='M5 3l14 9-14 9V3z' /%3E%3C/svg%3E");
box-shadow: 0px 2px 4px 2px rgba(209,209,209,.4);
}
.more-button { display: none; }
@media screen and (max-width: 768px) {
.menu-links {
display: none;
}
.more-button {
display: block;
}
.action-buttons-wrapper {
display: none;
}
}
#owl-slider-1 .hero-img-wrapper img{
display: block;
width: 100%;
}
.owl-stage {
height: 250px;
display: flex;
}Now the css code is added successfully. In this code, we first added the box properties, background colors, and font families in the body section. Then we set the default margin and padding values to zero. Then one by one we are styling each and every element of html by adding background colors, text colors, flex-box properties, margins and paddings, animations, and a lot more.
After this, we added some content alignment properties to make the contents align to various screen sizes and that is done with this media queries concept.
So that’s for css, but now we should add some javascript lines to make a carousel of videos and menu bar navigation links that works under lower screen devices.
Javascript code:
$(document).ready(function () {
$("a#pageLink").click(function () {
$("a#pageLink").removeClass("active");
$(this).addClass("active");
});
$(".menu-button").click(function () {
$(".left-area").removeClass("hide-on-mobile");
});
$(".close-menu").click(function () {
$(".left-area").addClass("hide-on-mobile");
});
$(".more-button").click(function () {
$(".more-menu-list").toggle("hide");
});
var owl = $("#owl-slider-1");
$("#owl-slider-1").owlCarousel({
navigation: true,
slideSpeed: 400,
paginationSpeed: 400,
items: 1,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: false,
itemsMobile: false,
autoplay: true,
autoPlaySpeed: 200,
autoPlayTimeout: 100,
autoplayHoverPause: true
});
// Custom Navigation Events
$(".owl-next").click(function () {
owl.trigger("owl.next");
});
$(".owl-prev").click(function () {});
$(".play").click(function () {
owl.trigger("owl.play", 100);
});
$(".stop").click(function () {
owl.trigger("owl.stop");
});
var owl = $("#owl-slider-2");
owl.owlCarousel({
navigation: true,
slideSpeed: 400,
paginationSpeed: 400,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 4
}
}
});
var owl = $("#owl-slider-3");
owl.owlCarousel({
navigation: true,
slideSpeed: 400,
paginationSpeed: 400,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 4
}
}
});
});Now the javascript code is also added successfully. These js lines are used to make some videos in carousel format which means we add some 5 slides of videos in which it displays line by line with the timing declared for example start time, end time, and delay time will be added so it represents the videos with this.
We are getting specific elements with the javascript to get element properties and adding values to the selected videos for the carousel by specifying start, end, and delay timings. Furthermore, the various links will be diminished inside a menu bar which we can saw it in mobile versions, also animate properties were included in these js codes for slide transitions performed on the given values.
And all of those were done with these java scripts. Now it’s time to view or project preview in the output section.
Final output:
Hey, there we came to an end now as we have successfully completed our internal video platform UI using html, css, and javascript. Now it’s your turn to work on this project and the project source code is given. Also, you can make use of the reference code which is mentioned below.
Age calculator using html css javascript ( source code
If you find this blog useful? , then make sure to search code with random on google to get more projects and also make sure to follow the Instagram page – codewithrandom.
Refer code – aybuke ceylan
Written by – ragunathan s
