Hugging Face's logo

Spaces:
amir-rf
/
wasteless-save-food-save-money-save-earth
Running

App Files Community
amir-rf commited on
Commit
e2bcbce
·
verified ·
1 Parent(s): 93fd1ac

this part lacks design it needs the be consistent with the design of the website

Browse files
Files changed (1) hide show
  1. components/navbar.js +38 -32
components/navbar.js CHANGED
@@ -12,72 +12,78 @@ class CustomNavbar extends HTMLElement {
12
  }
13
  .nav-link {
14
  position: relative;
15
- transition: color 0.3s ease;
 
16
  }
17
  .nav-link:hover {
18
- color: #2e7d32;
19
  }
20
  .nav-link::after {
21
  content: '';
22
  position: absolute;
23
- bottom: -2px;
24
  left: 0;
25
  width: 0;
26
  height: 2px;
27
- background-color: #2e7d32;
28
  transition: width 0.3s ease;
29
  }
30
  .nav-link:hover::after {
31
  width: 100%;
32
  }
33
  .active-link {
34
- color: #2e7d32;
35
  font-weight: 500;
36
  }
37
  .active-link::after {
38
  width: 100%;
 
39
  }
40
- .mobile-menu {
41
  max-height: 0;
42
  overflow: hidden;
43
- transition: max-height 0.3s ease-out;
44
  }
45
  .mobile-menu.open {
46
  max-height: 500px;
 
47
  }
48
- </style>
49
  <nav class="navbar fixed w-full z-50 bg-primary text-white">
50
  <div class="container mx-auto px-6 py-4">
51
- <div class="flex justify-between items-center">
52
- <a href="index.html" class="text-2xl font-bold flex items-center">
53
- <i data-feather="shopping-bag" class="mr-2"></i>
54
- WasteLess
55
- </a>
56
-
57
- <!-- Desktop Navigation -->
58
- <div class="hidden md:flex items-center space-x-8">
59
- <a href="index.html" class="nav-link">Home</a>
60
- <a href="features.html" class="nav-link">Features</a>
61
- <a href="about.html" class="nav-link">About</a>
62
- <a href="#" class="bg-white text-primary px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition duration-300">Get App</a>
 
 
 
 
 
 
 
 
63
  </div>
64
-
65
- <!-- Mobile menu button -->
66
- <button class="md:hidden focus:outline-none" id="mobile-menu-button">
67
- <i data-feather="menu" class="w-6 h-6"></i>
68
- </button>
69
- </div>
70
-
71
  <!-- Mobile Navigation -->
72
  <div class="mobile-menu md:hidden" id="mobile-menu">
73
  <div class="px-2 pt-2 pb-4 space-y-2">
74
- <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-primary-dark">Home</a>
75
- <a href="features.html" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-primary-dark">Features</a>
76
- <a href="about.html" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-primary-dark">About</a>
77
- <a href="#" class="block w-full text-center bg-white text-primary px-4 py-2 rounded-full font-medium mt-2">Get App</a>
 
 
78
  </div>
79
  </div>
80
- </div>
81
  </nav>
82
  `;
83
 
 
12
  }
13
  .nav-link {
14
  position: relative;
15
+ transition: all 0.3s ease;
16
+ padding: 0.5rem 0;
17
  }
18
  .nav-link:hover {
19
+ color: #81c784;
20
  }
21
  .nav-link::after {
22
  content: '';
23
  position: absolute;
24
+ bottom: 0;
25
  left: 0;
26
  width: 0;
27
  height: 2px;
28
+ background-color: #81c784;
29
  transition: width 0.3s ease;
30
  }
31
  .nav-link:hover::after {
32
  width: 100%;
33
  }
34
  .active-link {
35
+ color: #81c784;
36
  font-weight: 500;
37
  }
38
  .active-link::after {
39
  width: 100%;
40
+ background-color: #81c784;
41
  }
42
+ .mobile-menu {
43
  max-height: 0;
44
  overflow: hidden;
45
+ transition: max-height 0.3s ease-out, padding 0.3s ease;
46
  }
47
  .mobile-menu.open {
48
  max-height: 500px;
49
+ padding-bottom: 1rem;
50
  }
51
+ </style>
52
  <nav class="navbar fixed w-full z-50 bg-primary text-white">
53
  <div class="container mx-auto px-6 py-4">
54
+ <div class="flex justify-between items-center">
55
+ <a href="index.html" class="text-2xl font-bold flex items-center text-white hover:text-secondary transition-colors duration-300">
56
+ <i data-feather="shopping-bag" class="mr-2 w-6 h-6"></i>
57
+ WasteLess
58
+ </a>
59
+
60
+ <!-- Desktop Navigation -->
61
+ <div class="hidden md:flex items-center space-x-8">
62
+ <a href="index.html" class="nav-link text-white hover:text-secondary transition-colors duration-300">Home</a>
63
+ <a href="features.html" class="nav-link text-white hover:text-secondary transition-colors duration-300">Features</a>
64
+ <a href="about.html" class="nav-link text-white hover:text-secondary transition-colors duration-300">About</a>
65
+ <a href="#" class="bg-white text-primary px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition-all duration-300 shadow-md hover:shadow-lg">
66
+ Get App
67
+ </a>
68
+ </div>
69
+
70
+ <!-- Mobile menu button -->
71
+ <button class="md:hidden focus:outline-none p-2 rounded-full hover:bg-white/20 transition-colors duration-300" id="mobile-menu-button">
72
+ <i data-feather="menu" class="w-6 h-6 text-white"></i>
73
+ </button>
74
  </div>
 
 
 
 
 
 
 
75
  <!-- Mobile Navigation -->
76
  <div class="mobile-menu md:hidden" id="mobile-menu">
77
  <div class="px-2 pt-2 pb-4 space-y-2">
78
+ <a href="index.html" class="block px-3 py-3 rounded-lg text-base font-medium text-white hover:bg-white/20 transition-colors duration-300">Home</a>
79
+ <a href="features.html" class="block px-3 py-3 rounded-lg text-base font-medium text-white hover:bg-white/20 transition-colors duration-300">Features</a>
80
+ <a href="about.html" class="block px-3 py-3 rounded-lg text-base font-medium text-white hover:bg-white/20 transition-colors duration-300">About</a>
81
+ <a href="#" class="block w-full text-center bg-white text-primary px-4 py-3 rounded-full font-medium mt-2 hover:bg-gray-100 transition-all duration-300 shadow-md">
82
+ Get App
83
+ </a>
84
  </div>
85
  </div>
86
+ </div>
87
  </nav>
88
  `;
89