diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..d817545 --- /dev/null +++ b/src/index.html @@ -0,0 +1,48 @@ + + + + + + Coming Soon - Gallus Pub + + + + +
+
+ + +
+ +

Coming Soon

+ +
+ + + +
+ +
+

Öffnungszeiten

+

Montag - Freitag: 16:00 - 00:00 Uhr

+

Samstag - Sonntag: 14:00 - 02:00 Uhr

+
+ +
+

Aktuelle Events findest du auf unserem Social Media.

+
+
+ + + + diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..a9b239a --- /dev/null +++ b/src/script.js @@ -0,0 +1,37 @@ +// Wait for the DOM to be fully loaded +document.addEventListener('DOMContentLoaded', function() { + // Add a fade-in effect to the main elements + const elements = [ + document.querySelector('.logo'), + document.querySelector('.coming-soon'), + document.querySelector('.social-links'), + document.querySelector('.opening-hours'), + document.querySelector('.events-note') + ]; + + // Apply fade-in animation with delay for each element + elements.forEach((element, index) => { + if (element) { + element.style.opacity = '0'; + element.style.transition = 'opacity 1s ease-in-out'; + + // Stagger the animations + setTimeout(() => { + element.style.opacity = '1'; + }, 300 * index); + } + }); + + // Add a subtle hover effect to the logo + const logo = document.querySelector('.logo'); + if (logo) { + logo.addEventListener('mouseover', function() { + this.style.transform = 'scale(1.05)'; + this.style.transition = 'transform 0.3s ease'; + }); + + logo.addEventListener('mouseout', function() { + this.style.transform = 'scale(1)'; + }); + } +}); \ No newline at end of file diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..eedb4b2 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,131 @@ +/* Global styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background-color: #f5f5f5; + color: #333; + line-height: 1.6; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 40px 20px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +/* Logo styles */ +.logo-container { + margin-bottom: 30px; +} + +.logo { + font-size: 48px; + font-weight: bold; + color: #333; + padding: 20px; + border: 3px solid #333; + display: inline-block; +} + +.logo img { + max-width: 200px; + height: auto; + display: block; +} + +/* Coming soon text */ +.coming-soon { + font-size: 36px; + margin-bottom: 40px; + text-transform: uppercase; + letter-spacing: 4px; +} + +/* Social links */ +.social-links { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 20px; + margin-bottom: 40px; +} + +.social-link { + display: inline-flex; + align-items: center; + padding: 10px 20px; + background-color: #333; + color: white; + text-decoration: none; + border-radius: 30px; + transition: all 0.3s ease; +} + +.social-link i { + margin-right: 10px; + font-size: 18px; +} + +.social-link:hover { + background-color: #555; + transform: translateY(-3px); +} + +/* Opening hours */ +.opening-hours { + margin-bottom: 30px; + padding: 20px; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + width: 100%; + max-width: 500px; +} + +.opening-hours h2 { + margin-bottom: 15px; + font-size: 24px; +} + +.opening-hours p { + margin-bottom: 5px; +} + +/* Events note */ +.events-note { + font-style: italic; + margin-top: 20px; + padding: 10px; + background-color: #f0f0f0; + border-radius: 5px; +} + +/* Responsive adjustments */ +@media (max-width: 600px) { + .social-links { + flex-direction: column; + gap: 10px; + } + + .logo { + font-size: 36px; + } + + .coming-soon { + font-size: 28px; + } +}