Add files via upload

100_projects/15-netflix-mobile-navigation-animation/app.js

@@ -0,0 +1,22 @@
+
+const netflix_open_btn = document.querySelector('.netflix-open-btn');
+const netflix_close_btn = document.querySelector('.netflix-close-btn');
+const netflix_nav = document.querySelectorAll('.netflix-nav');
+
+netflix_open_btn.addEventListener('click', () => {
+	netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') });
+});
+netflix_close_btn.addEventListener('click', () => {
+	netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
+});
+// GET IN TOUCH COMPONENT
+const floating_btn = document.querySelector('.floating-btn');
+const close_btn = document.querySelector('.close-btn');
+const social_panel_container = document.querySelector('.social-panel-container');
+
+floating_btn.addEventListener('click', () => {
+	social_panel_container.classList.toggle('visible')
+});
+close_btn.addEventListener('click', () => {
+	social_panel_container.classList.remove('visible')
+});

100_projects/15-netflix-mobile-navigation-animation/css/style.css

@@ -0,0 +1,172 @@
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+body {
+	font-family: 'Muli';
+	background: url(../header.jpg);
+	background-size: cover;
+	background-repeat: no-repeat;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	height: 100vh;
+	position: relative;
+}
+body::after{
+	content: '';
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, .4);
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+}
+.nav{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	padding: 20px 40px;
+}
+.nav div button{
+	background-color: #E50914;
+	color: #fff;
+	border: none;
+	padding: 9px 12px;
+	font-size: 17px;
+}
+.nav .btns1{
+	display: flex;
+	gap: 15px;
+}
+.nav div select{
+	background-color: #000;
+	color: #fff;
+	border: 1px solid #fff;
+	padding: 6px 12px;
+	font-size: 17px;
+	text-align: center;
+}
+.netflix-logo{
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+.netflix-text {
+	text-transform: uppercase;
+	color: #fff;
+	font-size: 24px;
+	font-weight: 800;
+}
+.netflix-nav-btn {
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+	font-size: 20px;
+}
+.netflix-open-btn {
+	color: #fff;
+	font-size: 26px;
+	transition: .3s;
+}
+.netflix-open-btn:hover{
+	opacity: .8;
+}
+.netflix-close-btn {
+	position: absolute;
+	top: 40px;
+	right: 30px;
+	background: #fff;
+	padding: 3px 7px;
+	border-radius: 3px;
+	transition: .3s;
+}
+.netflix-close-btn:hover{
+	color: #F40612;
+}
+.netflix-nav {
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 100vh;
+	transform: translateX(-100%);
+	transition: transform .3s ease-in-out; 
+}
+.netflix-nav.visible {
+	transform: translateX(0);
+}
+.netflix-nav-black {
+	background-color: #000;
+	padding: 40px;
+	position: relative;
+	transition-delay: 0s; 
+	width: 95%;
+}
+.netflix-nav-black.visible {
+	transition-delay: .4s;
+}
+.netflix-nav-white {
+	background-color: #fff;
+	width: 60%;
+	max-width: 480px;
+	min-width: 320px;
+	transition-delay: .4s;
+}
+.netflix-nav-white.visible {
+	transition-delay: 0s;
+}
+.netflix-nav-red {
+	background-color: #F40612;
+	transition-delay: .2s; 
+	width: 95%;
+}
+.netflix-nav-red.visible {
+	transition-delay: .2s;
+}
+.logo {
+	max-width: 100%;
+}
+.logo-menu{
+	width: 200px;
+}
+.netflix-list {
+	list-style-type: none;
+	padding: 0;
+}
+.netflix-list li {
+	margin: 20px 0;
+}
+.netflix-list li a {
+	color: #fff;
+	font-size: 17px;
+	text-decoration: none;
+	text-transform: uppercase;
+	position: relative;
+}
+.netflix-list li a:hover{
+	color: #F40612;
+}
+@media (min-width:768px){
+	.netflix-list li a::after{
+		content: '';
+		position: absolute;
+		bottom: -5px;
+		left: 0;
+		width: 0;
+		height: 1px;
+		background: #F40612;
+		transition: .3s;
+	}
+	.netflix-list li a:hover::after{
+		width: 100%;
+	}
+}
+.netflix-list ul {
+	list-style-type: none;
+	padding-left: 20px;
+}

100_projects/15-netflix-mobile-navigation-animation/index.html

@@ -0,0 +1,55 @@
+<!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="css/style.css">
+  <link rel="stylesheet" href="css/all.min.css">
+  <title>Document</title>
+</head>
+<body>
+  <div class="nav">
+    <button class="netflix-nav-btn netflix-open-btn">
+      <i class="fas fa-bars"></i>
+    </button>
+    <div class="btns1">
+      <select name="lang" id="lang">
+        <option value="English">English</option>
+        <option value="العربية">العربية</option>
+      </select>
+      <button>Sing in</button>
+
+    </div>
+  </div>
+  <div class="netflix-logo">
+    <img class="logo" src="nextflix.png" alt="Netflix Logo" />
+    <p class="netflix-text">
+      Unlimited movies, TV shows, and more.
+    </p>
+  </div>
+  <div class="netflix-nav netflix-nav-white">
+    <div class="netflix-nav netflix-nav-red">
+      <div class="netflix-nav netflix-nav-black">
+        <button class="netflix-nav-btn netflix-close-btn"><i class="fas fa-times"></i></button>
+        <img class="logo-menu" src="nextflix.png" alt="Netflix Logo" />
+        <ul class="netflix-list">
+          <li><a href="#">Teams</a></li>
+          <li><a href="#">Locations</a></li>
+          <li><a href="#">Life at netflix</a></li>
+          <li>
+            <ul>
+              <li><a href="#">Netflix culture memo</a></li>
+              <li><a href="#">Work life philosophy</a></li>
+              <li><a href="#">Inclusion & Diversity</a></li>
+              <li><a href="#">Wearenetflix</a></li>
+              <li><a href="#">Blog</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>