Hugging Face's logo

Spaces:
techiqbal
/
quantumcircuitcrew
Running

App Files Community
techiqbal commited on
Commit
5042462
·
verified ·
1 Parent(s): e7478ba

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

Browse files
Files changed (2) hide show
  1. README.md +8 -4
  2. index.html +169 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Quantumcircuitcrew
3
- emoji: 💻
4
  colorFrom: gray
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: QuantumCircuitCrew ⚡
 
3
  colorFrom: gray
4
+ colorTo: pink
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,169 @@
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
+ <!-- Enhanced Navbar -->
32
+ <nav class="bg-white shadow-md sticky top-0 z-50 border-b border-gray-100">
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
+ <a href="/" 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-800">Mohanty<span class="text-blue-600">Lab</span>@PSU</span>
40
+ </a>
41
+ </div>
42
+
43
+ <!-- Desktop Menu -->
44
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
45
+ <a href="/" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 font-medium transition duration-300">Home</a>
46
+ <a href="/research" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 font-medium transition duration-300">Research</a>
47
+ <a href="/publications" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 font-medium transition duration-300">Publications</a>
48
+ <a href="/team" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 font-medium transition duration-300">People</a>
49
+ <a href="/resources" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 font-medium transition duration-300">Resources</a>
50
+ <a href="/contact" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 font-medium transition duration-300">Contact</a>
51
+ <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 hover:shadow-md">Join Us</a>
52
+ </div>
53
+
54
+ <!-- Mobile menu button -->
55
+ <div class="md:hidden flex items-center">
56
+ <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-blue-600 hover:bg-gray-50 focus:outline-none transition duration-300">
57
+ <i data-feather="menu" class="w-6 h-6"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </nav>
63
+
64
+ <!-- Mobile Menu (hidden by default) -->
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-lg">
67
+ <a href="/" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Home</a>
68
+ <a href="/research" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Research</a>
69
+ <a href="/publications" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Publications</a>
70
+ <a href="/team" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">People</a>
71
+ <a href="/resources" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Resources</a>
72
+ <a href="/contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Contact</a>
73
+ <a href="/join" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-600 hover:bg-blue-700">Join Us</a>
74
+ </div>
75
+ </div>
76
+ <!-- Footer -->
77
+ <footer class="bg-gray-800 text-white pt-12 pb-8">
78
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
79
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
80
+ <div class="space-y-4">
81
+ <div class="flex items-center space-x-2">
82
+ <i data-feather="cpu" class="text-blue-400 w-8 h-8"></i>
83
+ <span class="text-xl font-bold">Mohanty<span class="text-blue-400">Lab</span></span>
84
+ </div>
85
+ <p class="text-gray-300 text-sm">Innovating at the intersection of quantum computing and machine learning.</p>
86
+ <div class="flex space-x-4">
87
+ <a href="#" class="text-gray-300 hover:text-blue-400 transition duration-300">
88
+ <i data-feather="twitter" class="w-5 h-5"></i>
89
+ </a>
90
+ <a href="#" class="text-gray-300 hover:text-blue-400 transition duration-300">
91
+ <i data-feather="github" class="w-5 h-5"></i>
92
+ </a>
93
+ <a href="#" class="text-gray-300 hover:text-blue-400 transition duration-300">
94
+ <i data-feather="linkedin" class="w-5 h-5"></i>
95
+ </a>
96
+ <a href="#" class="text-gray-300 hover:text-blue-400 transition duration-300">
97
+ <i data-feather="youtube" class="w-5 h-5"></i>
98
+ </a>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="space-y-4">
103
+ <h3 class="font-semibold text-blue-400">Quick Links</h3>
104
+ <ul class="space-y-2">
105
+ <li><a href="/research" class="footer-link text-gray-300 hover:text-blue-400 block transition duration-300">Research Areas</a></li>
106
+ <li><a href="/publications" class="footer-link text-gray-300 hover:text-blue-400 block transition duration-300">Publications</a></li>
107
+ <li><a href="/team" class="footer-link text-gray-300 hover:text-blue-400 block transition duration-300">Our Team</a></li>
108
+ <li><a href="/join" class="footer-link text-gray-300 hover:text-blue-400 block transition duration-300">Join the Lab</a></li>
109
+ </ul>
110
+ </div>
111
+
112
+ <div class="space-y-4">
113
+ <h3 class="font-semibold text-blue-400">Resources</h3>
114
+ <ul class="space-y-2">
115
+ <li><a href="/resources/code" class="footer-link text-gray-300 hover:text-blue-400 block transition duration-300">Code & Tools</a></li>
116
+ <li><a href="/resources/datasets" class="footer-link text-gray-300 hover:text-blue-400 block transition duration-300">Datasets</a></li>
117
+ <li><a href="/resources/tutorials" class="footer-link text-gray-300 hover:text-blue-400 block transition duration-300">Tutorials</a></li>
118
+ <li><a href="/resources/blog" class="footer-link text-gray-300 hover:text-blue-400 block transition duration-300">Blog</a></li>
119
+ </ul>
120
+ </div>
121
+
122
+ <div class="space-y-4">
123
+ <h3 class="font-semibold text-blue-400">Contact Us</h3>
124
+ <ul class="space-y-2">
125
+ <li class="flex items-start space-x-2">
126
+ <i data-feather="map-pin" class="w-4 h-4 mt-1 text-blue-400"></i>
127
+ <span class="text-gray-300">Penn State University, University Park, PA</span>
128
+ </li>
129
+ <li class="flex items-start space-x-2">
130
+ <i data-feather="mail" class="w-4 h-4 mt-1 text-blue-400"></i>
131
+ <a href="mailto:contact@mohantylabpsu.org" class="footer-link text-gray-300 hover:text-blue-400 transition duration-300">contact@mohantylabpsu.org</a>
132
+ </li>
133
+ <li class="flex items-start space-x-2">
134
+ <i data-feather="phone" class="w-4 h-4 mt-1 text-blue-400"></i>
135
+ <span class="text-gray-300">(814) 865-0000</span>
136
+ </li>
137
+ </ul>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="mt-12 pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
142
+ <p class="text-gray-400 text-sm">© 2023 MohantyLab@PSU. All rights reserved.</p>
143
+ <div class="flex space-x-6 mt-4 md:mt-0">
144
+ <a href="/privacy" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Privacy Policy</a>
145
+ <a href="/terms" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Terms of Use</a>
146
+ <a href="/accessibility" class="text-gray-400 hover:text-blue-400 text-sm transition duration-300">Accessibility</a>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </footer>
151
+
152
+ <script>
153
+ // Mobile menu toggle
154
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
155
+ const mobileMenu = document.querySelector('.mobile-menu');
156
+
157
+ mobileMenuButton.addEventListener('click', () => {
158
+ mobileMenu.classList.toggle('hidden');
159
+ const icon = mobileMenuButton.querySelector('i');
160
+ if (mobileMenu.classList.contains('hidden')) {
161
+ feather.replace();
162
+ } else {
163
+ icon.setAttribute('data-feather', 'x');
164
+ feather.replace();
165
+ }
166
+ });
167
+ </script>
168
+ </body>
169
+ </html>