diff --git a/web components/responsive-mega-menu/README.md b/web components/responsive-mega-menu/README.md deleted file mode 100644 index 96843da..0000000 --- a/web components/responsive-mega-menu/README.md +++ /dev/null @@ -1,7 +0,0 @@ -## Responsive Mega Menu and Dropdown Menu using only HTML and CSS & Javascript - -[Watch On Youtube](https://youtu.be/1eqhm3UTk58) - -![thumbnail](thumbnail.png) - ------------------------- diff --git a/web components/responsive-mega-menu/data.md b/web components/responsive-mega-menu/data.md deleted file mode 100644 index e72865e..0000000 --- a/web components/responsive-mega-menu/data.md +++ /dev/null @@ -1,114 +0,0 @@ -Home - -Products - -Products - - Team dashboard - Monitor your metrics. - - Limitless segmentation - Surface hidden trends. - - Group analytics - Learn about your users - - Interactive reports - Measure B2B account health. - -Use cases - - Convert - Analyze conversion rates. - - Engage - Measure active usage. - - Retain - Find retention drivers. - - Grow - Grow your user base faster. - -Resources - - Blog - The latest industry news. - - Customer stories - Learn how our customers. - - Video tutorials - New features and techniques. - - Documentation - All the boring stuff. - -Company - - About us - Learn about our story. - - Press - News and press resources. - - We’re hiring! - Careers - Join our team! - - Legal - All the boring stuff. - -Resources -Pricing - -Log in -Sign up - -```html - - -``` - -```css -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; -} - -:root { - --primary: #7F56D9; - --secondary: #F4EBFF; - --text-primary: #101828; - --text-secondary: #667085; - --badge-bg: #ECFDF3; - --badge-text: #027A48; - --white: #fff; - --dropdown-bg: rgb(252, 253, 251); - --shadow: rgba(32, 7, 65, 0.14); - --container: 124rem; - --nav-height: 7rem; -} - -html { - font-family: 'Inter', sans-serif; - font-size: 62.5%; - font-style: normal; -} - -body { - font-size: 1.6rem; -} - -.container { - max-width: var(--container); - margin: 0 auto; - padding: 0 1rem; -} -``` \ No newline at end of file diff --git a/web components/responsive-mega-menu/images/arrow.svg b/web components/responsive-mega-menu/images/arrow.svg deleted file mode 100644 index a7e572d..0000000 --- a/web components/responsive-mega-menu/images/arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-1.svg b/web components/responsive-mega-menu/images/icon-1.svg deleted file mode 100644 index 1809123..0000000 --- a/web components/responsive-mega-menu/images/icon-1.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-10.svg b/web components/responsive-mega-menu/images/icon-10.svg deleted file mode 100644 index 70997ab..0000000 --- a/web components/responsive-mega-menu/images/icon-10.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-11.svg b/web components/responsive-mega-menu/images/icon-11.svg deleted file mode 100644 index 6aed15c..0000000 --- a/web components/responsive-mega-menu/images/icon-11.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web components/responsive-mega-menu/images/icon-12.svg b/web components/responsive-mega-menu/images/icon-12.svg deleted file mode 100644 index fdd2bc8..0000000 --- a/web components/responsive-mega-menu/images/icon-12.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-13.svg b/web components/responsive-mega-menu/images/icon-13.svg deleted file mode 100644 index e315259..0000000 --- a/web components/responsive-mega-menu/images/icon-13.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-14.svg b/web components/responsive-mega-menu/images/icon-14.svg deleted file mode 100644 index ba2ece9..0000000 --- a/web components/responsive-mega-menu/images/icon-14.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-15.svg b/web components/responsive-mega-menu/images/icon-15.svg deleted file mode 100644 index 5eb96b3..0000000 --- a/web components/responsive-mega-menu/images/icon-15.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-16.svg b/web components/responsive-mega-menu/images/icon-16.svg deleted file mode 100644 index f748c6d..0000000 --- a/web components/responsive-mega-menu/images/icon-16.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-2.svg b/web components/responsive-mega-menu/images/icon-2.svg deleted file mode 100644 index 0b50699..0000000 --- a/web components/responsive-mega-menu/images/icon-2.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-3.svg b/web components/responsive-mega-menu/images/icon-3.svg deleted file mode 100644 index f34479c..0000000 --- a/web components/responsive-mega-menu/images/icon-3.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-4.svg b/web components/responsive-mega-menu/images/icon-4.svg deleted file mode 100644 index e48ef0d..0000000 --- a/web components/responsive-mega-menu/images/icon-4.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-5.svg b/web components/responsive-mega-menu/images/icon-5.svg deleted file mode 100644 index 7617ef1..0000000 --- a/web components/responsive-mega-menu/images/icon-5.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-6.svg b/web components/responsive-mega-menu/images/icon-6.svg deleted file mode 100644 index 3869b68..0000000 --- a/web components/responsive-mega-menu/images/icon-6.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-7.svg b/web components/responsive-mega-menu/images/icon-7.svg deleted file mode 100644 index 1af704d..0000000 --- a/web components/responsive-mega-menu/images/icon-7.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-8.svg b/web components/responsive-mega-menu/images/icon-8.svg deleted file mode 100644 index eb47d60..0000000 --- a/web components/responsive-mega-menu/images/icon-8.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/icon-9.svg b/web components/responsive-mega-menu/images/icon-9.svg deleted file mode 100644 index bf3ccb5..0000000 --- a/web components/responsive-mega-menu/images/icon-9.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/responsive-mega-menu/images/logo.svg b/web components/responsive-mega-menu/images/logo.svg deleted file mode 100644 index 8b7552f..0000000 --- a/web components/responsive-mega-menu/images/logo.svg +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web components/responsive-mega-menu/index.html b/web components/responsive-mega-menu/index.html deleted file mode 100644 index d6f60d8..0000000 --- a/web components/responsive-mega-menu/index.html +++ /dev/null @@ -1,223 +0,0 @@ - - - - - - - - Document - - - - -
-
- -
-
- - - - - - - \ No newline at end of file diff --git a/web components/responsive-mega-menu/script.js b/web components/responsive-mega-menu/script.js deleted file mode 100644 index 5ab690f..0000000 --- a/web components/responsive-mega-menu/script.js +++ /dev/null @@ -1,10 +0,0 @@ -let nav_toggle = document.querySelector('.nav_toggle'); -let nav_toggle_icon = document.querySelector('.nav_toggle ion-icon'); -let nav_menu = document.querySelector('.nav_menu'); - -nav_toggle.addEventListener('click', () => { - nav_menu.classList.toggle('active'); - nav_toggle_icon.setAttribute('name', - nav_menu.classList.contains('active') ? 'close-outline' : 'menu-outline' - ); -}); \ No newline at end of file diff --git a/web components/responsive-mega-menu/style.css b/web components/responsive-mega-menu/style.css deleted file mode 100644 index eb916bd..0000000 --- a/web components/responsive-mega-menu/style.css +++ /dev/null @@ -1,199 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; -} - -:root { - --primary: #7F56D9; - --secondary: #F4EBFF; - --text-primary: #101828; - --text-secondary: #667085; - --badge-bg: #ECFDF3; - --badge-text: #027A48; - --white: #fff; - --dropdown-bg: rgb(252, 253, 251); - --shadow: rgba(32, 7, 65, 0.14); - --container: 124rem; - --nav-height: 7rem; -} - -html { - font-family: 'Inter', sans-serif; - font-size: 62.5%; - font-style: normal; -} - -body { - font-size: 1.6rem; -} - -.container { - max-width: var(--container); - margin: 0 auto; - padding: 0 1rem; -} - -.navigation { - display: flex; - align-items: center; - justify-content: space-between; - height: var(--nav-height); - position: relative; - background: var(--white); -} - -.nav_list { - display: inline-flex; - gap: 2rem; - align-items: center; - margin: 0 1.5rem; -} - -.nav_action { - display: flex; - align-items: center; - gap: 1rem; -} - -.nav_link, -.btn { - display: flex; - justify-content: center; - gap: 1rem; - font-weight: 500; - color: var(--text-primary); -} - -.btn-primary { - display: inline-flex; - color: var(--white); - background: var(--primary); - font-weight: 500; - padding: 0.6rem 1.5rem; - border-radius: 1.5rem; -} - -.nav_toggle { - cursor: pointer; - display: none; -} - -.nav_toggle ion-icon { - font-size: 3.5rem; - color: var(--text-primary); -} - -.dropdown { - position: absolute; - top: var(--nav-height); - left: 0; - width: 100%; - background: var(--dropdown-bg); - box-shadow: 0rem 0.2rem 0.5rem var(--shadow); - clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); - transition: all 0.5s ease-in; -} - -.dropdown-inner { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); - gap: 1rem; - padding: 2rem; -} - -.nav_list_menu:hover ion-icon { - transition: all 0.5s ease-in; - transform: rotate(180deg); -} - -.nav_list_menu:hover .dropdown { - clip-path: polygon(0 0, 100% 0, 100% 102%, 0 102%); -} - -.item-list { - display: flex; - align-items: center; - gap: 1rem; - margin: 3rem 0; -} - -.item-img { - width: 4rem; - height: 4rem; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - background: var(--secondary); -} - -.item-list-info { - position: relative; - width: 100%; -} - -.info-badge { - position: absolute; - right: 1rem; - top: 0; - background: var(--badge-bg); - padding: 0.1rem 0.5rem; - border-radius: 1rem; - color: var(--badge-text); -} - -@media (max-width:730px) { - .nav_toggle { - display: block; - } - .nav_menu { - position: absolute; - top: var(--nav-height); - left: 0; - width: 100%; - background: var(--dropdown-bg); - display: none; - } - .nav_menu.active { - display: block; - } - .nav_list { - display: block; - margin: 2rem 0; - text-align: center; - } - .nav_link { - padding: 0 2rem; - display: flex; - justify-content: space-between; - } - .dropdown { - top: 0; - position: relative; - clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); - box-shadow: none; - height: 0; - text-align: start; - transition: all 0.5s ease-in; - } - .nav_list_menu:hover .dropdown { - height: 100%; - transition: all 0.5s ease-in; - } -} - -@media (max-width:365px) { - .logo-img { - width: 10rem; - } - .btn, - .btn-primary { - padding: 0.4rem 1rem; - } -} \ No newline at end of file diff --git a/web components/responsive-mega-menu/thumbnail.png b/web components/responsive-mega-menu/thumbnail.png deleted file mode 100644 index 20a47e7..0000000 Binary files a/web components/responsive-mega-menu/thumbnail.png and /dev/null differ