diff --git a/netflix-mobile-navigation/index.html b/netflix-mobile-navigation/index.html new file mode 100644 index 0000000..4d4a72c --- /dev/null +++ b/netflix-mobile-navigation/index.html @@ -0,0 +1,47 @@ + + + + + + + + Netflix Mobile Navigation + + + + + + +

Mobile Navigation

+ +
+
+
+ + + + + +
+
+
+ + + + diff --git a/netflix-mobile-navigation/script.js b/netflix-mobile-navigation/script.js new file mode 100644 index 0000000..3bc1f9a --- /dev/null +++ b/netflix-mobile-navigation/script.js @@ -0,0 +1,11 @@ +const open_btn = document.querySelector('.open-btn') +const close_btn = document.querySelector('.close-btn') +const nav = document.querySelectorAll('.nav') + +open_btn.addEventListener('click', () => { + nav.forEach(nav_el => nav_el.classList.add('visible')) +}) + +close_btn.addEventListener('click', () => { + nav.forEach(nav_el => nav_el.classList.remove('visible')) +}) \ No newline at end of file diff --git a/netflix-mobile-navigation/style.css b/netflix-mobile-navigation/style.css new file mode 100644 index 0000000..c5d723a --- /dev/null +++ b/netflix-mobile-navigation/style.css @@ -0,0 +1,110 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +* { + box-sizing: border-box; +} + +body { + font-family: 'Muli', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} + +.text { + text-transform: uppercase; +} + +.logo { + width: 150px; +} + +.nav-btn { + border: none; + background-color: transparent; + cursor: pointer; + font-size: 20px; +} + +.open-btn { + position: fixed; + top: 10px; + left: 10px; +} + +.nav { + position: fixed; + top: 0; + left: 0; + height: 100vh; + transform: translateX(-100%); + transition: transform 0.3s ease-in-out; +} + +.nav.visible { + transform: translateX(0); +} + +.nav-black { + background-color: rgb(34, 31, 31); + width: 60%; + max-width: 480px; + min-width: 320px; + transition-delay: 0.4s; +} + +.nav-black.visible { + transition-delay: 0s; +} + +.nav-red { + background-color: rgb(229, 9, 20); + width: 95%; + transition-delay: 0.2s; +} + +.nav-red.visible { + transition-delay: 0.2s; +} + +.nav-white { + background-color: #fff; + width: 95%; + padding: 40px; + position: relative; + transition-delay: 0s; +} + +.nav-white.visible { + transition-delay: 0.4s; +} + +.close-btn { + opacity: 0.3; + position: absolute; + top: 40px; + right: 30px; +} + +.list { + list-style-type: none; + padding: 0; +} + +.list li { + margin: 20px 0; +} + +.list li a { + color: rgb(34, 31, 31); + font-size: 14px; + text-decoration: none; + text-transform: uppercase; +} + +.list ul { + list-style-type: none; + padding-left: 20px; +}