Template Youtube Simpel

byTrisna Almuti •Juli 29, 2022

0

Youtube

Source Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
   initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/6a5f6ace61.js"
   crossorigin="anonymous"></script>
<title>Youtube</title>
</head>

<body>
<nav class="navbar-background">

<div class="navbar-logo">
<a href="#" class="menu-bars" id="show-menu">
<i class="fas fa-bars"></i>
</a>
<a href="https://www.youtube.com"
                 class="a-youtube">
<img src="Youtube.png" width="50"
                 height="30" />
<h4 class="h4-youtube">Youtube</h4>
</a>
</div>
<div id="search-bar">
<i id="search-icon" class="fas fa-search"></i>
<input id="search-input" placeholder="Search">
<i id="mic-icon" class="fas fa-microphone"></i>
</div>
<nav id="nav-menu" class="nav-youtube">
<ul class="nav-menu-items">
<div id="navbar-toggle">
<a href="" class="menu-bars"
                   id="hide-menu">
<i class="fas fa-bars nav-icon"></i>
</a>
<a href="#">
<h1><i class="fab fa-youtube"
                   id="youtube-logo"></i>Youtube</h1>
</a>
</div>
<hr />
<div class="nav-section">
<li class="nav-text"><a href="#">
<i class="fas fa-home nav-icon"></i>Home</a></li>
<li class="nav-text"><a href="#">
<i class="fas fa-fire nav-icon"></i>Trending</a></li>
<li class="nav-text"><a href="#">
<i class="fab fa-square-youtube nav-icon"></i>Subscription
</a></li>
</div>
<hr />
<div class="nav-section">
<li class="nav-text"><a href="#">
<i class="fas fa-play-circle nav-icon"></i>Library</a></li>
<li class="nav-text"><a href="#">
<i class="fas fa-history nav-icon"></i>History</a></li>
<li class="nav-text"><a href="#">
<i class="fas fa-clock nav-icon"></i>Watch Later</a></li>
</div>
</ul>
</nav>

<div>
<ul class="ul-navbar">
<li class="nav-text-background"><a href="#">
       <i class="fa-solid fa-video"></i></a></li>
<li class="nav-text-background"><a href="#">
       <i class="fa-regular fa-bell"></i></a></li>
<li class="nav-text-background"><a href="#"
       class="nav-text-background"><img src="avatar.png"
height="32" /></a>
</li>
</ul>
</div>
</nav>
<img src="konten.png" class="img" />
</body>

</html>
-------------------------------------------------------------

CSS:
@import url('https://fonts.googleapis.com/css2?family=Oswald&
           display=swap');

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}

body {
background-color: #444;
}

hr {
background-color: #464646;
height: 1px;
border: none;
}

#navbar {
background-color: #212121;
height: 100px;
display: flex;
justify-content: start;
align-items: center;
}

/* Navbar /

.navbar-background {
background-color: #333;
height: 70px;
width: 100%;
display: flex;
justify-content: space-between;
box-shadow: 10px 12px 5px -6px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px 12px 5px -6px rgba(0,0,0,0.6);
-moz-box-shadow: 10px 12px 5px -6px rgba(0,0,0,0.6);
}

.menu-bars {
margin-left: 2rem;
font-size: 2rem;
color: #909090;
}

#nav-menu {
background-color: #282828;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}

#nav-menu.active {
left: 0;
transition: 350ms;
}

.nav-text {
display: flex;
justify-content: start;
list-style: none;
height: 50px;
padding: 1rem;
}

.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 1.2rem;
margin-left: 1rem;
}

.nav-text:hover {
background-color: rgba(144, 144, 144, 0.219);
cursor: pointer;
}

.nav-menu-items {
width: 100%;
}

.nav-icon {
padding-right: 1rem;
color: #909090;
}

#youtube-logo {
color: #f90201;
padding-right: 0.2rem;
}

#navbar-toggle {
background-color: #212121;
width: 100%;
height: 70px;
display: flex;
justify-content: start;
align-items: center;
}

#navbar-toggle h1 {
color: #fff;
font-family: 'Oswald', sans-serif;
}

#navbar-toggle a {
text-decoration: none;
}

.fa-bars {
color: #fff;
}

.nav-section {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}

.navbar-logo {
display: flex;
justify-content: center;
align-items: center;
}

.ul-navbar {
display: flex;
height: 50px;
width: 100%;
color: white;
justify-content: center;
align-items: center;
list-style-type: none;
padding: 1px;
margin: 1px;
}

.ul-navbar a {
display: flex;
height: 20px;
width: 100%;
color: white;
justify-content: center;
align-items: center;
list-style-type: none;
padding: 1px;
margin: 5px;
}

.h4-youtube {
margin: 7px;
font-family: 'Oswald', sans-serif;
}

.a-youtube {
margin: 10px;
text-decoration: none;
color: rgb(255, 255, 255);
justify-content: center;
display: flex;
align-items: center;
}

.li-navbar {
display: flex;
color: white;
justify-content: center;
align-items: center;
list-style-type: none;
}

.nav-text-background {
height: 50px;
padding: 1rem;
}

.nav-text-background a {
text-decoration: none;
color: #f5f5f5;
font-size: 1.5rem;
margin-left: none;
display: flexbox;
}

.a-navbar {
color: white;
text-decoration: none;
}

/ Search Bar /

#search-bar {
position: relative;
margin: 10px;
}

#search-input {
line-height: 2rem;
border-radius: 10px;
padding: 0.2rem 2rem;
font-size: 1.8rem;

}

#search-icon {
position: absolute;
top: 0;
left: 0;
margin-top: 0.8rem;
padding: 0px 0.5rem;
}

#mic-icon {
position: absolute;
top: 0;
right: 0;
margin-top: 0.8rem;
padding: 0px 0.5rem;
}

/ End Search Bar */

.img {
height: 560px;
width: 1125px;
float: right;
}
-------------------------------------------------------------

Javascript:
const openMenu = document.querySelector('#show-menu')
const hideMenuIcon = document.querySelector('#hide-menu')
const sideMenu = document.querySelector('#nav-menu')

openMenu.addEventListener('click', function() {
sideMenu.classList.add('active')
})

hideMenuIcon.addEventListener('click', function() {
sideMenu.classList.remove('active')
})
-------------------------------------------------------------

Hasil:

Maaf jika penanda pada codingan tidak rapih

Kunjungi Web Template ini :
https://trisn0802.github.io/Youtube-Template/Youtube.html

Posting Komentar