Hugging Face's logo

Spaces:
techiqbal
/
quantumnanotech-explorers
Running

App Files Community
techiqbal commited on
Commit
2c7757d
·
verified ·
1 Parent(s): cb86cbf

https://mohantylabpsu.org/ recreate navbar and footer

Browse files
Files changed (2) hide show
  1. README.md +8 -4
  2. index.html +156 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Quantumnanotech Explorers
3
- emoji: 🌖
4
  colorFrom: blue
5
- colorTo: red
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: QuantumNanoTech Explorers 🚀
 
3
  colorFrom: blue
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,156 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MohantyLab | PSU</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .nav-link::after {
13
+ content: '';
14
+ display: block;
15
+ width: 0;
16
+ height: 2px;
17
+ background: #3b82f6;
18
+ transition: width 0.3s;
19
+ }
20
+ .nav-link:hover::after {
21
+ width: 100%;
22
+ }
23
+ .footer-link:hover {
24
+ color: #93c5fd;
25
+ transform: translateX(5px);
26
+ transition: all 0.3s ease;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50 font-sans">
31
+ <!-- Modern Navbar -->
32
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
33
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
34
+ <div class="flex justify-between h-20 items-center">
35
+ <!-- Logo -->
36
+ <div class="flex-shrink-0 flex items-center">
37
+ <div class="flex items-center space-x-2">
38
+ <i data-feather="cpu" class="text-blue-600 w-8 h-8"></i>
39
+ <span class="text-xl font-bold text-gray-900">Mohanty<span class="text-blue-600">Lab</span></span>
40
+ <span class="text-sm text-gray-500">| PSU</span>
41
+ </div>
42
+ </div>
43
+
44
+ <!-- Desktop Menu -->
45
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
46
+ <a href="/" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">Home</a>
47
+ <a href="/research" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">Research</a>
48
+ <a href="/publications" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">Publications</a>
49
+ <a href="/people" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">People</a>
50
+ <a href="/resources" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">Resources</a>
51
+ <a href="/contact" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">Contact</a>
52
+ <a href="/join" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition duration-300 shadow-md hover:shadow-lg">Join Us</a>
53
+ </div>
54
+
55
+ <!-- Mobile menu button -->
56
+ <div class="md:hidden flex items-center">
57
+ <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-600">
58
+ <i data-feather="menu" class="w-6 h-6"></i>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Mobile Menu -->
65
+ <div class="mobile-menu hidden md:hidden">
66
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white shadow-md">
67
+ <a href="/" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600">Home</a>
68
+ <a href="/research" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600">Research</a>
69
+ <a href="/publications" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600">Publications</a>
70
+ <a href="/people" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600">People</a>
71
+ <a href="/resources" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600">Resources</a>
72
+ <a href="/contact" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-blue-600">Contact</a>
73
+ <a href="/join" class="block mt-4 w-full text-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition duration-300">Join Us</a>
74
+ </div>
75
+ </div>
76
+ </nav>
77
+ <!-- Footer -->
78
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
79
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
80
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
81
+ <!-- About Column -->
82
+ <div>
83
+ <h3 class="text-xl font-bold mb-4">Mohanty Lab</h3>
84
+ <p class="text-gray-400 mb-4">Exploring quantum frontiers at Portland State University</p>
85
+ <div class="flex space-x-4">
86
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
87
+ <i data-feather="twitter" class="w-5 h-5"></i>
88
+ </a>
89
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
90
+ <i data-feather="linkedin" class="w-5 h-5"></i>
91
+ </a>
92
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
93
+ <i data-feather="github" class="w-5 h-5"></i>
94
+ </a>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Research Column -->
99
+ <div>
100
+ <h3 class="text-lg font-semibold mb-4">Research</h3>
101
+ <ul class="space-y-2">
102
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Quantum Computing</a></li>
103
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Nanoelectronics</a></li>
104
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Quantum Materials</a></li>
105
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Sensors</a></li>
106
+ </ul>
107
+ </div>
108
+
109
+ <!-- Quick Links Column -->
110
+ <div>
111
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
112
+ <ul class="space-y-2">
113
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">PSU Home</a></li>
114
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Physics Department</a></li>
115
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Directions</a></li>
116
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Careers</a></li>
117
+ </ul>
118
+ </div>
119
+
120
+ <!-- Contact Column -->
121
+ <div>
122
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
123
+ <address class="not-italic text-gray-400 space-y-2">
124
+ <p>Science Building 1</p>
125
+ <p>1719 SW 10th Ave</p>
126
+ <p>Portland, OR 97201</p>
127
+ <p>Email: lab@mohantylabpsu.org</p>
128
+ <p>Phone: (503) 725-XXXX</p>
129
+ </address>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
134
+ <p>© 2023 Mohanty Research Group. All rights reserved.</p>
135
+ </div>
136
+ </div>
137
+ </footer>
138
+
139
+ <script>
140
+ // Mobile menu toggle
141
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
142
+ const mobileMenu = document.querySelector('.mobile-menu');
143
+
144
+ mobileMenuButton.addEventListener('click', () => {
145
+ mobileMenu.classList.toggle('hidden');
146
+ const icon = mobileMenuButton.querySelector('i');
147
+ if (mobileMenu.classList.contains('hidden')) {
148
+ feather.replace();
149
+ } else {
150
+ icon.setAttribute('data-feather', 'x');
151
+ feather.replace();
152
+ }
153
+ });
154
+ </script>
155
+ </body>
156
+ </html>