From ad3dea1991d1fd952c0ad5c9b441a6d705eb1eff Mon Sep 17 00:00:00 2001 From: Mozibx Date: Tue, 22 Aug 2023 23:52:50 +0100 Subject: [PATCH 01/46] chores: created new-landing-page --- index2.html | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 index2.html diff --git a/index2.html b/index2.html new file mode 100644 index 00000000..b6572b44 --- /dev/null +++ b/index2.html @@ -0,0 +1,94 @@ + + + + + + NEW LANDING PAGE + + + + +
+
+ + + + +
+
+ + From d1692e543c70d4ea846cbcf6f8b92f87c901b282 Mon Sep 17 00:00:00 2001 From: Mozibx Date: Wed, 23 Aug 2023 00:48:32 +0100 Subject: [PATCH 02/46] chores: updated nav_hero section --- index2.html | 74 ++++++++++++++++++++++------------------------------- 1 file changed, 31 insertions(+), 43 deletions(-) diff --git a/index2.html b/index2.html index b6572b44..673e4623 100644 --- a/index2.html +++ b/index2.html @@ -3,6 +3,16 @@ + + + + NEW LANDING PAGE @@ -10,53 +20,27 @@
- - + + +
+
+

ZeroOctave JavaScript Projects

+

+ ZeroOctave Javascript Projects provide some awesome web + development projects to work upon and enhance your skills. The + motive of this project is to help new learners like you to get + familiar with web development skills. +

+
+
From 295cc918c8ae4f6a034091148cd66492fab39009 Mon Sep 17 00:00:00 2001 From: Mozibx Date: Wed, 23 Aug 2023 00:48:55 +0100 Subject: [PATCH 03/46] chores: updated homepage js file --- index2.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 index2.js diff --git a/index2.js b/index2.js new file mode 100644 index 00000000..3c5cc0c9 --- /dev/null +++ b/index2.js @@ -0,0 +1,46 @@ +const toogleBtn = document.querySelector(".toogle_btn"); +const toogleBtnIcon = document.querySelector(".toogle_btn i"); +const menu = document.querySelector(".dropdown_menu"); +const menuLists = document.querySelectorAll(".menu_lists li"); +const navScroll = document.querySelector(".navbar"); + +/* NAV-FUNCTIONS */ + +/* ACTIVE LINKS */ +const removeActive = () => { + menuLists.forEach((link) => { + link.classList.remove("active"); + }); +}; + +menuLists.forEach((link) => { + link.addEventListener("click", () => { + removeActive(); + link.classList.add("active"); + }); +}); + +toogleBtn.onclick = () => { + menu.classList.toggle("open"); + + const isOpen = menu.classList.contains("open"); + + toogleBtnIcon.classList = isOpen ? "fa fa-times" : "fa fa-bars"; +}; + +const isClose = () => { + const isClose = menu.classList.remove("open"); + + toogleBtnIcon.classList = isClose ? "fa fa-times" : "fa fa-bars"; +}; + +document.onclick = (e) => { + if (!toogleBtn.contains(e.target) && !menu.contains(e.target)) { + isClose(); + } +}; +document.onscroll = (e) => { + if (!toogleBtn.contains(e.target) && !menu.contains(e.target)) { + isClose(); + } +}; From 7e2b1a7dcf7561a6bb802f72ce681e3482c5b230 Mon Sep 17 00:00:00 2001 From: Mozibx Date: Wed, 23 Aug 2023 00:49:09 +0100 Subject: [PATCH 04/46] style: updated color styles --- styles/_colors.scss | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 styles/_colors.scss diff --git a/styles/_colors.scss b/styles/_colors.scss new file mode 100644 index 00000000..1db5f8c3 --- /dev/null +++ b/styles/_colors.scss @@ -0,0 +1,3 @@ +$white: #fff; +$black: #000; +$main_bg: #f3f5f8; From 3794af69af81e1ab40c97b7942a6d4268063b20c Mon Sep 17 00:00:00 2001 From: Mozibx Date: Wed, 23 Aug 2023 00:49:24 +0100 Subject: [PATCH 05/46] style: updated variables --- styles/_variables.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 styles/_variables.scss diff --git a/styles/_variables.scss b/styles/_variables.scss new file mode 100644 index 00000000..63f4354a --- /dev/null +++ b/styles/_variables.scss @@ -0,0 +1,16 @@ +/* ---------------------------MIXINS--------------------------- */ + +@mixin flex_center { + display: flex; + justify-content: center; + align-items: center; +} + +/* ----------------------CONTAINER VARIABLE---------------------- */ +.container_main { + padding: 1rem; + + @media screen and (min-width: 400px) { + padding: 2rem; + } +} From 45ede8bc7d73b815f3dcb5e31e0e328e5e9ed892 Mon Sep 17 00:00:00 2001 From: Mozibx Date: Wed, 23 Aug 2023 00:49:41 +0100 Subject: [PATCH 06/46] style: updated gen-styles --- styles/landing_page.css | 223 ++++++++++++++++++++++++++++++++++++ styles/landing_page.css.map | 1 + styles/landing_page.scss | 214 ++++++++++++++++++++++++++++++++++ 3 files changed, 438 insertions(+) create mode 100644 styles/landing_page.css create mode 100644 styles/landing_page.css.map create mode 100644 styles/landing_page.scss diff --git a/styles/landing_page.css b/styles/landing_page.css new file mode 100644 index 00000000..d40d1a87 --- /dev/null +++ b/styles/landing_page.css @@ -0,0 +1,223 @@ +/* ---------------------------MIXINS--------------------------- */ +/* ----------------------CONTAINER VARIABLE---------------------- */ +.container_main { + padding: 1rem; +} +@media screen and (min-width: 400px) { + .container_main { + padding: 2rem; + } +} + +*, +*::after, +*::before { + padding: 0; + margin: 0; + box-sizing: border-box; + overflow-x: hidden; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: "Poppins", sans-serif; + font-style: normal; + background: #f3f5f8; +} + +.nav_hero_inner { + background: #fff; + width: 100%; + height: 100%; + max-width: 80%; + min-height: 50vh; + margin: 0 auto; +} +.nav_hero_inner a { + text-decoration: none; + color: inherit; +} + +/* --------------------------------------HEADER-------------------------------------- */ +header { + position: relative; + /* DROPDOWN MENU */ +} +header .navbar { + width: 100%; + padding: 1rem; + z-index: 200; + transition: all 1s ease-in-out; +} +@media screen and (min-width: 992px) { + header .navbar { + padding: 0.8rem; + } +} +@media screen and (min-width: 1200px) { + header .navbar { + padding: 2% 3.5%; + } +} +header .navbar ul { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; +} +@media screen and (min-width: 1200px) { + header .navbar ul { + gap: 2rem; + } +} +header .navbar ul li { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-weight: 500; +} +header .navbar ul li:hover { + color: #000; + font-weight: 700; + /* add animation on hover */ +} +header .navbar ul li > span { + display: none; +} +@media screen and (min-width: 1200px) { + header .navbar ul li > span { + display: block; + } +} +header .navbar_inner { + display: flex; + align-items: center; + justify-content: space-between; + font-weight: 700; + text-transform: capitalize; + font-size: 1rem; +} +@media screen and (min-width: 1200px) { + header .navbar_inner { + font-size: 1.5rem; + } +} +header .navbar_inner .menu_items, +header .navbar_inner .contact_items, +header .navbar_inner .navbar_right { + display: none; +} +header .navbar_inner .toogle_btn { + display: block; + color: #000; + font-size: 2rem; + cursor: pointer; + z-index: 100; + transition: all 1s ease-in-out; +} +@media screen and (min-width: 992px) { + header .navbar_inner .menu_items, + header .navbar_inner .contact_items, + header .navbar_inner .navbar_right { + display: block; + } + header .navbar_inner .toogle_btn { + display: none; + } +} +header .navbar_logo_sec { + display: flex; + justify-content: center; + align-items: center; + font-size: 1rem; +} +@media screen and (min-width: 576px) { + header .navbar_logo_sec { + font-size: 1.5rem; + } +} +header .navbar_logo_sec img { + width: 1.5rem; + aspect-ratio: 1/1; +} +@media screen and (min-width: 576px) { + header .navbar_logo_sec img { + width: 2.5rem; + } +} +header .navbar_left { + display: flex; + justify-content: center; + align-items: center; + gap: 5rem; +} +@media screen and (min-width: 1400px) { + header .navbar_left { + gap: 7rem; + } +} +header .dropdown_menu { + position: absolute; + top: 4.5rem; + font-size: 1rem; + z-index: 20; + border-radius: 1rem; + border-top-right-radius: 0; + border-top-left-radius: 0; + height: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1rem; + overflow: hidden; + background: #fff; + transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} +@media screen and (min-width: 576px) { + header .dropdown_menu { + right: 1rem; + width: 300px; + border-radius: 1rem; + } +} +@media screen and (max-width: 992px) { + header .dropdown_menu { + position: fixed; + } +} +header .dropdown_menu.open { + height: 25rem; +} +header .dropdown_menu_inner { + padding: 1rem 0; + text-transform: capitalize; +} +header .dropdown_menu ul { + text-align: center; + display: grid; + place-items: center; + padding: 0; + gap: 1.5rem; + margin-bottom: 1rem; +} +header .dropdown_menu ul li { + cursor: pointer; +} +header .dropdown_menu ul li:hover { + color: #fff; +} +header .dropdown_menu ul li > img { + position: relative; + inset: 0.6rem 0; +} +@media screen and (min-width: 992px) { + header .dropdown_menu { + display: none; + } +}/*# sourceMappingURL=landing_page.css.map */ \ No newline at end of file diff --git a/styles/landing_page.css.map b/styles/landing_page.css.map new file mode 100644 index 00000000..9bd800bb --- /dev/null +++ b/styles/landing_page.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["_variables.scss","landing_page.css","landing_page.scss","_colors.scss"],"names":[],"mappings":"AAAA,iEAAA;AAQA,mEAAA;AACA;EACE,aAAA;ACNF;ADQE;EAHF;IAII,aAAA;ECLF;AACF;;ACNA;;;EAGE,UAAA;EACA,SAAA;EACA,sBAAA;EACA,kBAAA;ADSF;;ACNA;EACE,uBAAA;ADSF;;ACNA;EACE,kCAAA;EACA,kBAAA;EACA,mBCjBQ;AF0BV;;ACLE;EACE,gBCxBI;EDyBJ,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;EACA,cAAA;ADQJ;ACPI;EACE,qBAAA;EACA,cAAA;ADSN;;ACLA,uFAAA;AACA;EACE,kBAAA;EA+GA,kBAAA;ADtGF;ACPE;EACE,WAAA;EACA,aAAA;EACA,YAAA;EACA,8BAAA;ADSJ;ACPI;EANF;IAOI,eAAA;EDUJ;AACF;ACRI;EAVF;IAWI,gBAAA;EDWJ;AACF;ACTI;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,WAAA;ADWN;ACTM;EANF;IAOI,SAAA;EDYN;AACF;ACVM;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,gBAAA;ADYR;ACVQ;EACE,WCvEF;EDwEE,gBAAA;EAEA,4BAAA;ADWV;ACRQ;EACE,aAAA;ADUV;ACTU;EAFF;IAGI,cAAA;EDYV;AACF;ACRI;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,gBAAA;EACA,0BAAA;EACA,eAAA;ADUN;ACTM;EAPF;IAQI,iBAAA;EDYN;AACF;ACVM;;;EAGE,aAAA;ADYR;ACTM;EACE,cAAA;EACA,WCxGA;EDyGA,eAAA;EACA,eAAA;EACA,YAAA;EACA,8BAAA;ADWR;ACRM;EACE;;;IAGE,cAAA;EDUR;ECPM;IACE,aAAA;EDSR;AACF;ACLI;EF1HF,aAAA;EACA,uBAAA;EACA,mBAAA;EE0HI,eAAA;ADSN;ACRM;EAHF;IAII,iBAAA;EDWN;AACF;ACVM;EACE,aAAA;EACA,iBAAA;ADYR;ACXQ;EAHF;IAII,aAAA;EDcR;AACF;ACVI;EFzIF,aAAA;EACA,uBAAA;EACA,mBAAA;EEyII,SAAA;ADcN;ACbM;EAHF;IAII,SAAA;EDgBN;AACF;ACVE;EACE,kBAAA;EACA,WAAA;EACA,eAAA;EACA,WAAA;EACA,mBAAA;EACA,0BAAA;EACA,yBAAA;EACA,SAAA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,gBCvKI;EDwKJ,+DAAA;ADYJ;ACVI;EAnBF;IAoBI,WAAA;IACA,YAAA;IACA,mBAAA;EDaJ;AACF;ACZI;EAxBF;IAyBI,eAAA;EDeJ;AACF;ACbI;EACE,aAAA;ADeN;ACZI;EACE,eAAA;EACA,0BAAA;ADcN;ACXI;EACE,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,UAAA;EACA,WAAA;EACA,mBAAA;ADaN;ACXM;EACE,eAAA;ADaR;ACZQ;EACE,WCvMF;AFqNR;ACXQ;EACE,kBAAA;EACA,eAAA;ADaV;ACRI;EA1DF;IA2DI,aAAA;EDWJ;AACF","file":"landing_page.css"} \ No newline at end of file diff --git a/styles/landing_page.scss b/styles/landing_page.scss new file mode 100644 index 00000000..ded4c5c0 --- /dev/null +++ b/styles/landing_page.scss @@ -0,0 +1,214 @@ +@import "./colors"; +@import "./variables"; + +*, +*::after, +*::before { + padding: 0; + margin: 0; + box-sizing: border-box; + overflow-x: hidden; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: "Poppins", sans-serif; + font-style: normal; + background: $main_bg; +} + +.nav_hero { + &_inner { + background: $white; + width: 100%; + height: 100%; + max-width: 80%; + min-height: 50vh; + margin: 0 auto; + a { + text-decoration: none; + color: inherit; + } + } +} +/* --------------------------------------HEADER-------------------------------------- */ +header { + position: relative; + + .navbar { + width: 100%; + padding: 1rem; + z-index: 200; + transition: all 1s ease-in-out; + + @media screen and (min-width: 992px) { + padding: 0.8rem; + } + + @media screen and (min-width: 1200px) { + padding: 2% 3.5%; + } + + ul { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; + + @media screen and (min-width: 1200px) { + gap: 2rem; + } + + li { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-weight: 500; + + &:hover { + color: $black; + font-weight: 700; + + /* add animation on hover */ + } + + & > span { + display: none; + @media screen and (min-width: 1200px) { + display: block; + } + } + } + } + &_inner { + display: flex; + align-items: center; + justify-content: space-between; + font-weight: 700; + text-transform: capitalize; + font-size: 1rem; + @media screen and (min-width: 1200px) { + font-size: 1.5rem; + } + + .menu_items, + .contact_items, + .navbar_right { + display: none; + } + + .toogle_btn { + display: block; + color: $black; + font-size: 2rem; + cursor: pointer; + z-index: 100; + transition: all 1s ease-in-out; + } + + @media screen and (min-width: 992px) { + .menu_items, + .contact_items, + .navbar_right { + display: block; + } + + .toogle_btn { + display: none; + } + } + } + + &_logo_sec { + @include flex_center(); + font-size: 1rem; + @media screen and (min-width: 576px) { + font-size: 1.5rem; + } + img { + width: 1.5rem; + aspect-ratio: 1/1; + @media screen and (min-width: 576px) { + width: 2.5rem; + } + } + } + + &_left { + @include flex_center(); + gap: 5rem; + @media screen and (min-width: 1400px) { + gap: 7rem; + } + } + } + + /* DROPDOWN MENU */ + + .dropdown_menu { + position: absolute; + top: 4.5rem; + font-size: 1rem; + z-index: 20; + border-radius: 1rem; + border-top-right-radius: 0; + border-top-left-radius: 0; + height: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1rem; + overflow: hidden; + background: $white; + transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + + @media screen and (min-width: 576px) { + right: 1rem; + width: 300px; + border-radius: 1rem; + } + @media screen and (max-width: 992px) { + position: fixed; + } + + &.open { + height: 25rem; + } + + &_inner { + padding: 1rem 0; + text-transform: capitalize; + } + + ul { + text-align: center; + display: grid; + place-items: center; + padding: 0; + gap: 1.5rem; + margin-bottom: 1rem; + + li { + cursor: pointer; + &:hover { + color: $white; + } + + & > img { + position: relative; + inset: 0.6rem 0; + } + } + } + + @media screen and (min-width: 992px) { + display: none; + } + } +} From e2f474219e60186555a6d284edac5104e1124bee Mon Sep 17 00:00:00 2001 From: Mozibix Date: Fri, 25 Aug 2023 05:07:06 +0100 Subject: [PATCH 07/46] chores: updated navbar_section --- index2.html | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/index2.html b/index2.html index 673e4623..66464d09 100644 --- a/index2.html +++ b/index2.html @@ -3,10 +3,11 @@ + @@ -23,7 +24,7 @@