From f98f7ed7f447d06b85f7852f84d44fa177d57e4e Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Mon, 16 Oct 2023 21:40:13 +0530 Subject: [PATCH 1/3] Create index.html --- Responsive-Sticky-Navbar/index.html | 70 +++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 Responsive-Sticky-Navbar/index.html diff --git a/Responsive-Sticky-Navbar/index.html b/Responsive-Sticky-Navbar/index.html new file mode 100644 index 0000000..fe628d6 --- /dev/null +++ b/Responsive-Sticky-Navbar/index.html @@ -0,0 +1,70 @@ + + +live + + + + + + + + +
+ + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + + + + From 9b84e2ba64841cfe84c0ef15118b26bc930b65ea Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Mon, 16 Oct 2023 21:40:34 +0530 Subject: [PATCH 2/3] Create script.js --- Responsive-Sticky-Navbar/script.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 Responsive-Sticky-Navbar/script.js diff --git a/Responsive-Sticky-Navbar/script.js b/Responsive-Sticky-Navbar/script.js new file mode 100644 index 0000000..05e37cd --- /dev/null +++ b/Responsive-Sticky-Navbar/script.js @@ -0,0 +1,19 @@ +window.onscroll = function () { + scrollFunction(); + }; + function scrollFunction() { + document.getElementById("navbar").style.background = "#fff"; + } + + const navToggle = document.querySelector(".nav-toggle"); + const navLinks = document.querySelectorAll(".nav__link"); + + navToggle.addEventListener("click", () => { + document.body.classList.toggle("nav-open"); + }); + + navLinks.forEach((link) => { + link.addEventListener("click", () => { + document.body.classList.remove("nav-open"); + }); + }); From 53cb334ce9ec4a383fa3abd178ff7cb48c7df048 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Mon, 16 Oct 2023 21:40:51 +0530 Subject: [PATCH 3/3] Create style.css --- Responsive-Sticky-Navbar/style.css | 312 +++++++++++++++++++++++++++++ 1 file changed, 312 insertions(+) create mode 100644 Responsive-Sticky-Navbar/style.css diff --git a/Responsive-Sticky-Navbar/style.css b/Responsive-Sticky-Navbar/style.css new file mode 100644 index 0000000..059dae9 --- /dev/null +++ b/Responsive-Sticky-Navbar/style.css @@ -0,0 +1,312 @@ +html { + scroll-behavior: smooth; + } + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + margin: 0; + font-family: "Source Sans Pro", sans-serif; + line-height: 1.6; + overflow-x: hidden; + background: var(--bg-color); + } + + [data-theme="light"] { + --bg-color: #fff; + --primary-bg: #8c43ff; + --color: #333; + --togglebg: #d4e7d5; + --toggleslider: #fff; + --roundcolor: #fff; + --svgcolor: #111; + } + + [data-theme="dark"] { + --bg-color: #333333; + --primary-bg: #333; + --bg-color: #333333; + --color: #e9dcdc; + --togglebg: #333; + --toggleslider: #e9dcdc; + --roundcolor: #333; + --svgcolor: #fff; + } + + .nav { + height: 5rem; + width: 100%; + display: block; + justify-content: flex-start; + z-index: 10; + font-weight: 300; + /* transition: 0.2s ease-in-out; */ + /* transition: transform 400ms ease-in-out; */ + position: fixed; + } + + .nav__list { + /* list-style: none; + display: flex; + justify-content: flex-end; + margin-left: 55vh; + margin-top: -49px; + padding: 0vh 4vw; */ + list-style: none; + display: flex; + justify-content: flex-end; + /* margin-left: 55vh; */ + margin-top: -49px; + /* margin: auto; */ + padding: 0vh 4vw; + } + + .nav__link { + color: inherit; + text-decoration: none; + margin-right: 50px; + position: relative; + font-family: "Raleway", sans-serif; + padding: 16px 0; + margin: 0 12px; + letter-spacing: 1px; + line-height: 16px; + font-weight: 700; + transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in; + color: #111; + } + + .nav-toggle { + display: none; + } + + .nav__link::before { + content: ""; + display: block; + position: absolute; + bottom: 3px; + left: 0; + height: 3px; + width: 100%; + background-color: #000; + transform-origin: right top; + transform: scale(0, 1); + transition: color 0.1s, transform 0.2s ease-out; + } + + .nav__link:active::before { + background-color: #000; + } + + .nav__link:hover::before, + .nav__link:focus::before { + transform-origin: left top; + transform: scale(1, 1); + } + + .logo { + padding: 3vh 5vw; + text-align: center; + display: flex; + align-items: center; + color: rgb(22, 8, 8); + text-transform: uppercase; + width: 25rem; + font-family: "Raleway", sans-serif; + font-weight: 800; + /* margin-top: 7px;*/ + } + + .smalllogo { + display: none; + } + + a { + text-decoration: none; + color: #111; + } + + @media (max-width: 800px) { + .nav { + display: flex; + justify-content: center; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 100; + transform: translateX(100%); + transition: transform 400ms cubic-bezier(0.51, 0.6, 0.54, 0.59); + height: 100vh; + } + + .nav__list { + list-style: none; + display: flex; + height: 100%; + flex-direction: column; + justify-content: space-evenly; + text-align: center; + margin: 0; + padding: 135px; + background-color: #111; + width: 100%; + } + + .logo { + display: none; + } + .smalllogo { + padding: 4.7vh 8vw; + text-align: center; + display: flex; + align-items: center; + color: #111; + text-transform: uppercase; + font-family: "Raleway", sans-serif; + font-weight: 800; + } + + .logolink { + text-decoration: none; + color: #111; + } + + .nav-toggle { + display: block; + padding: 2.3em; + background: transparent; + border: 0; + cursor: pointer; + position: absolute; + right: 0.5rem; + top: 1.1rem; + /* left: 29rem; */ + z-index: 1000; + outline: none; + } + + .nav__link { + margin: 0; + color: #fff; + } + + .nav-open { + overflow: hidden; + } + + .nav-open .nav { + transform: translateX(0); + width: 100vw; + } + + .nav-open .logo { + display: none; + } + + .nav-open .hamburger { + transform: rotate(0.625turn); + background-color: #fff; + } + + .nav-open .hamburger::before { + transform: rotate(90deg) translateX(-6px); + background-color: #fff; + } + + .nav-open .hamburger::after { + opacity: 0; + } + + .hamburger { + display: block; + position: relative; + } + + .hamburger, + .hamburger::before, + .hamburger::after { + background-color: #111; + width: 2em; + height: 3px; + border-radius: 1em; + transition: transform 250ms ease-in-out; + } + + .hamburger::before, + .hamburger::after { + content: ""; + position: absolute; + left: 0; + right: 0; + } + + .hamburger::before { + top: 6px; + } + + .hamburger::after { + bottom: 6px; + } + + .nav__item { + color: #fff; + } + + .nav__link::before { + content: ""; + display: block; + position: absolute; + bottom: 3px; + left: 0; + height: 3px; + width: 100%; + background-color: #fff; + transform-origin: right top; + transform: scale(0, 1); + transition: color 0.1s, transform 0.2s ease-out; + } + + .nav__link:active::before { + background-color: #fff; + } + + .nav__link:hover::before, + .nav__link:focus::before { + transform-origin: left top; + transform: scale(1, 1); + } + } + + section { + width: 100%; + display: flex; + margin: auto; + align-items: center; + min-height: 110vh; + } + + .one { + background-color: #fff; + } + + .two { + background-color: rgb(190, 183, 170); + } + + .three { + background-color: rgb(63, 118, 238); + } + + .four { + background-color: rgb(221, 22, 88); + } + + .five { + background-color: rgb(163, 114, 8); + }