make main a version off dev
9
public/favicon.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
BIN
public/images/Background.png
Normal file
|
After Width: | Height: | Size: 506 KiB |
BIN
public/images/Logo.png
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
public/images/Welcome.png
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
public/images/crepes_sucette.jpg
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
public/images/karaoke.jpg
Normal file
|
After Width: | Height: | Size: 94 KiB |
BIN
public/images/kevin_mcflannigan.jpeg
Normal file
|
After Width: | Height: | Size: 384 KiB |
BIN
public/images/pub_quiz.jpg
Normal file
|
After Width: | Height: | Size: 49 KiB |
BIN
public/pdf/Menu.pdf
Normal file
@ -1,47 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Coming Soon - Gallus Pub</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo-container">
|
||||
<img src="public/Logo.png" alt="Gallus Pub Logo">
|
||||
</div>
|
||||
|
||||
<h1 class="coming-soon">Coming Soon</h1>
|
||||
|
||||
<div class="social-links">
|
||||
<a href="https://www.instagram.com/galluspubsanktgallen/" target="_blank" class="social-link">
|
||||
<i class="fab fa-instagram"></i> Instagram
|
||||
</a>
|
||||
<a href="mailto:info@gallus-pub.ch" class="social-link">
|
||||
<i class="far fa-envelope"></i> Email
|
||||
</a>
|
||||
<a href="https://wa.me/+41772322770" target="_blank" class="social-link">
|
||||
<i class="fab fa-whatsapp"></i> WhatsApp Business
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="opening-hours">
|
||||
<h2>Öffnungszeiten</h2>
|
||||
<p>Mittwoch: 19:00 - 24:00</p>
|
||||
<p>Donnerstag: 19:00 - 24:00</p>
|
||||
<p>Freitag: 19:00 - 01:00</p>
|
||||
<p>Samstag: 19:00 - 01:00</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="events-note">
|
||||
<p>Aktuelle Events findest du</p>
|
||||
<p>auf unserem Social Media.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,37 +0,0 @@
|
||||
// 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)';
|
||||
});
|
||||
}
|
||||
});
|
||||
149
src/styles.css
@ -1,149 +0,0 @@
|
||||
/* Global styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #213b28;
|
||||
color: #ceb39b;
|
||||
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;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.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: #2F2F2F;
|
||||
color: #fff;
|
||||
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;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||