Hugging Face's logo

Spaces:
keithson777
/
warringtons-web
Running

App Files Community
keithson777 commited on
Commit
7c5cdf2
·
verified ·
1 Parent(s): 1334962

make the site fully responsive and mobile first - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +34 -28
index.html CHANGED
@@ -2,7 +2,7 @@
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>Innovation Germany | Tech & Startup Landscape</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -59,8 +59,8 @@
59
  <i class="fas fa-rocket text-2xl"></i>
60
  <h1 class="text-2xl font-bold">InnovationGermany</h1>
61
  </div>
62
- <nav class="hidden md:block">
63
- <ul class="flex space-x-8">
64
  <li><a href="#" class="hover:text-blue-200 transition">Home</a></li>
65
  <li><a href="#" class="hover:text-blue-200 transition">Startups</a></li>
66
  <li><a href="#" class="hover:text-blue-200 transition">Tech</a></li>
@@ -79,8 +79,8 @@
79
  <section class="innovation-pulse gradient-bg text-white py-20">
80
  <div class="container mx-auto px-4 relative z-10">
81
  <div class="max-w-3xl mx-auto text-center">
82
- <h1 class="text-4xl md:text-5xl font-bold mb-6 typewriter">Germany's Innovation Landscape</h1>
83
- <p class="text-xl mb-8">Exploring the cutting-edge technologies, startups, and research shaping Europe's largest economy</p>
84
  <div class="flex flex-col sm:flex-row justify-center gap-4">
85
  <button class="bg-white text-blue-800 px-6 py-3 rounded-lg font-semibold hover:bg-blue-100 transition">Latest Articles</button>
86
  <button class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-800 transition">Subscribe</button>
@@ -92,8 +92,8 @@
92
  <!-- Stats Section -->
93
  <section class="py-12 bg-white">
94
  <div class="container mx-auto px-4">
95
- <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
96
- <div class="p-6 border border-gray-200 rounded-lg">
97
  <div class="text-3xl font-bold text-blue-600 mb-2">2,500+</div>
98
  <div class="text-gray-600">Tech Startups</div>
99
  </div>
@@ -118,7 +118,7 @@
118
  <div class="container mx-auto px-4">
119
  <h2 class="text-3xl font-bold mb-12 text-center">Featured Articles</h2>
120
 
121
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
122
  <!-- Article 1 -->
123
  <article class="article-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
124
  <div class="h-48 bg-blue-100 flex items-center justify-center">
@@ -181,8 +181,8 @@
181
  <div class="container mx-auto px-4">
182
  <h2 class="text-3xl font-bold mb-12 text-center">Germany's Innovation Hubs</h2>
183
 
184
- <div class="grid md:grid-cols-3 gap-8">
185
- <div class="border border-gray-200 rounded-lg p-6 hover:border-blue-300 transition">
186
  <div class="flex items-center mb-4">
187
  <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
188
  <i class="fas fa-building text-blue-600"></i>
@@ -233,7 +233,7 @@
233
  <!-- Newsletter -->
234
  <section class="py-16 bg-gray-100">
235
  <div class="container mx-auto px-4 max-w-4xl">
236
- <div class="bg-white rounded-xl shadow-md p-8 md:p-12">
237
  <div class="text-center mb-8">
238
  <h2 class="text-3xl font-bold mb-2">Stay Updated on German Innovation</h2>
239
  <p class="text-gray-600">Weekly insights on startups, research breakthroughs, and tech policy in Germany</p>
@@ -264,7 +264,7 @@
264
  <!-- Footer -->
265
  <footer class="bg-gray-900 text-white py-12">
266
  <div class="container mx-auto px-4">
267
- <div class="grid md:grid-cols-4 gap-8">
268
  <div>
269
  <h3 class="text-xl font-bold mb-4 flex items-center">
270
  <i class="fas fa-rocket mr-2"></i> InnovationGermany
@@ -315,22 +315,28 @@
315
 
316
  <script>
317
  // Mobile menu toggle functionality
318
- document.querySelector('button.md\\:hidden').addEventListener('click', function() {
319
- const nav = document.querySelector('nav.md\\:block');
320
- if (nav.classList.contains('hidden')) {
321
- nav.classList.remove('hidden');
322
- nav.classList.add('block', 'absolute', 'top-16', 'right-4', 'bg-white', 'shadow-lg', 'rounded-lg', 'p-4', 'z-50');
323
- const ul = nav.querySelector('ul');
324
- ul.classList.remove('flex', 'space-x-8');
325
- ul.classList.add('space-y-4');
326
- } else {
327
- nav.classList.add('hidden');
328
- nav.classList.remove('block', 'absolute', 'top-16', 'right-4', 'bg-white', 'shadow-lg', 'rounded-lg', 'p-4', 'z-50');
329
- const ul = nav.querySelector('ul');
330
- ul.classList.add('flex', 'space-x-8');
331
- ul.classList.remove('space-y-4');
332
- }
333
- });
 
 
 
 
 
 
334
 
335
  // Smooth scroll for anchor links
336
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
  <title>Innovation Germany | Tech & Startup Landscape</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
59
  <i class="fas fa-rocket text-2xl"></i>
60
  <h1 class="text-2xl font-bold">InnovationGermany</h1>
61
  </div>
62
+ <nav class="hidden md:flex">
63
+ <ul class="flex flex-col md:flex-row gap-4 md:gap-8">
64
  <li><a href="#" class="hover:text-blue-200 transition">Home</a></li>
65
  <li><a href="#" class="hover:text-blue-200 transition">Startups</a></li>
66
  <li><a href="#" class="hover:text-blue-200 transition">Tech</a></li>
 
79
  <section class="innovation-pulse gradient-bg text-white py-20">
80
  <div class="container mx-auto px-4 relative z-10">
81
  <div class="max-w-3xl mx-auto text-center">
82
+ <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-6 typewriter">Germany's Innovation Landscape</h1>
83
+ <p class="text-lg sm:text-xl mb-8">Exploring the cutting-edge technologies, startups, and research shaping Europe's largest economy</p>
84
  <div class="flex flex-col sm:flex-row justify-center gap-4">
85
  <button class="bg-white text-blue-800 px-6 py-3 rounded-lg font-semibold hover:bg-blue-100 transition">Latest Articles</button>
86
  <button class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-800 transition">Subscribe</button>
 
92
  <!-- Stats Section -->
93
  <section class="py-12 bg-white">
94
  <div class="container mx-auto px-4">
95
+ <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 text-center">
96
+ <div class="p-4 sm:p-6 border border-gray-200 rounded-lg">
97
  <div class="text-3xl font-bold text-blue-600 mb-2">2,500+</div>
98
  <div class="text-gray-600">Tech Startups</div>
99
  </div>
 
118
  <div class="container mx-auto px-4">
119
  <h2 class="text-3xl font-bold mb-12 text-center">Featured Articles</h2>
120
 
121
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
122
  <!-- Article 1 -->
123
  <article class="article-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
124
  <div class="h-48 bg-blue-100 flex items-center justify-center">
 
181
  <div class="container mx-auto px-4">
182
  <h2 class="text-3xl font-bold mb-12 text-center">Germany's Innovation Hubs</h2>
183
 
184
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
185
+ <div class="border border-gray-200 rounded-lg p-4 sm:p-6 hover:border-blue-300 transition">
186
  <div class="flex items-center mb-4">
187
  <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
188
  <i class="fas fa-building text-blue-600"></i>
 
233
  <!-- Newsletter -->
234
  <section class="py-16 bg-gray-100">
235
  <div class="container mx-auto px-4 max-w-4xl">
236
+ <div class="bg-white rounded-xl shadow-md p-6 sm:p-8 md:p-12">
237
  <div class="text-center mb-8">
238
  <h2 class="text-3xl font-bold mb-2">Stay Updated on German Innovation</h2>
239
  <p class="text-gray-600">Weekly insights on startups, research breakthroughs, and tech policy in Germany</p>
 
264
  <!-- Footer -->
265
  <footer class="bg-gray-900 text-white py-12">
266
  <div class="container mx-auto px-4">
267
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8">
268
  <div>
269
  <h3 class="text-xl font-bold mb-4 flex items-center">
270
  <i class="fas fa-rocket mr-2"></i> InnovationGermany
 
315
 
316
  <script>
317
  // Mobile menu toggle functionality
318
+ const mobileMenuButton = document.querySelector('button.md\\:hidden');
319
+ if (mobileMenuButton) {
320
+ mobileMenuButton.addEventListener('click', function() {
321
+ const nav = document.querySelector('nav');
322
+ if (nav.classList.contains('hidden')) {
323
+ nav.classList.remove('hidden');
324
+ nav.classList.add('block', 'absolute', 'top-16', 'right-4', 'bg-white', 'shadow-lg', 'rounded-lg', 'p-4', 'z-50', 'w-64');
325
+ } else {
326
+ nav.classList.add('hidden');
327
+ nav.classList.remove('block', 'absolute', 'top-16', 'right-4', 'bg-white', 'shadow-lg', 'rounded-lg', 'p-4', 'z-50', 'w-64');
328
+ }
329
+ });
330
+
331
+ // Close menu when clicking outside
332
+ document.addEventListener('click', function(e) {
333
+ const nav = document.querySelector('nav');
334
+ if (!nav.contains(e.target) && e.target !== mobileMenuButton && !nav.classList.contains('hidden')) {
335
+ nav.classList.add('hidden');
336
+ nav.classList.remove('block', 'absolute', 'top-16', 'right-4', 'bg-white', 'shadow-lg', 'rounded-lg', 'p-4', 'z-50', 'w-64');
337
+ }
338
+ });
339
+ }
340
 
341
  // Smooth scroll for anchor links
342
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {