mirror of
https://github.com/Dvorinka/sportcreative.git
synced 2026-07-29 13:23:48 +00:00
test
This commit is contained in:
Tomas Dvorak
+157
-63
@@ -67,23 +67,23 @@
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="md:hidden">
|
||||
<button type="button" aria-controls="mobile-menu" class="text-gray-700 hover:text-sport-purple focus:outline-none p-2 flex items-center justify-center">
|
||||
<ion-icon name="menu-outline" class="h-6 w-6 leading-none"></ion-icon>
|
||||
<button type="button" class="mobile-menu-button text-gray-700 hover:text-sport-purple focus:outline-none p-2" aria-label="Menu" aria-expanded="false">
|
||||
<ion-icon name="menu-outline" class="h-8 w-8 transition-transform duration-300"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation (hidden by default) -->
|
||||
<div class="mobile-menu hidden w-full absolute top-full left-0 bg-white shadow-md">
|
||||
<div class="pt-2 pb-4 space-y-1">
|
||||
<a href="index.html" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple">Domů</a>
|
||||
<a href="#" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple">Služby</a>
|
||||
<a href="#" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple">Portfolio</a>
|
||||
<a href="#" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple">O nás</a>
|
||||
<a href="kontakt.html" class="block pl-3 pr-4 py-2 text-base font-medium text-sport-purple bg-gray-50">Kontakt</a>
|
||||
</div>
|
||||
<div class="pt-2 pb-3 px-4">
|
||||
<a href="kontakt.html" class="block w-full text-center px-4 py-2 border border-transparent rounded-full shadow-sm text-base font-medium text-white bg-sport-purple hover:bg-sport-orange transition-all duration-300">
|
||||
<!-- Mobile Navigation -->
|
||||
<div class="mobile-menu w-full absolute top-full left-0 bg-white shadow-lg">
|
||||
<nav class="px-2 pt-2 pb-4 space-y-1">
|
||||
<a href="index.html" class="block px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple rounded-lg transition-colors duration-200">Domů</a>
|
||||
<a href="#" class="block px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple rounded-lg transition-colors duration-200">Služby</a>
|
||||
<a href="#" class="block px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple rounded-lg transition-colors duration-200">Portfolio</a>
|
||||
<a href="#" class="block px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple rounded-lg transition-colors duration-200">O nás</a>
|
||||
<a href="kontakt.html" class="block px-4 py-3 text-base font-medium text-sport-purple bg-gray-50 rounded-lg transition-colors duration-200">Kontakt</a>
|
||||
</nav>
|
||||
<div class="px-4 py-3 border-t border-gray-100">
|
||||
<a href="kontakt.html" class="block w-full text-center px-6 py-3 border border-transparent rounded-full text-base font-medium text-white bg-sport-purple hover:bg-sport-orange transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5">
|
||||
Nezávazná konzultace
|
||||
</a>
|
||||
</div>
|
||||
@@ -232,53 +232,87 @@
|
||||
<span class="text-sport-purple">Sport</span><span class="text-sport-orange">Creative</span>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-4">
|
||||
Pomáháme sportovním organizacím růst v digitálním světě pomocí profesionálního obsahu, kreativních strategií a působivé prezentace.
|
||||
Digitální marketingová agentura specializovaná na sportovní týmy a organizace. Tvoříme obsah, který inspiruje a spojuje fanoušky.
|
||||
</p>
|
||||
<div class="flex space-x-4">
|
||||
<a href="https://www.instagram.com/sportcreative_cz/" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<ion-icon name="logo-instagram" class="text-xl"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 2: Quick Links -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-white">Rychlé odkazy</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="index.html" class="text-gray-400 hover:text-white transition duration-200">Domů</a></li>
|
||||
<li><a href="#" class="text-white hover:text-orange-400 transition duration-200">Služby</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Portfolio</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">O nás</a></li>
|
||||
<li><a href="kontakt.html" class="text-white hover:text-orange-400 transition duration-200">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: Services -->
|
||||
<!-- Column 2: Services -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-white">Služby</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Videoprodukce</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Fotografování</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Webové stránky</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Grafický design</a></li>
|
||||
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Sociální sítě</a></li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Sociální sítě</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Grafický Design</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 4: Contact -->
|
||||
<!-- Column 3: Quick Links -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-white">Rychlé odkazy</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Domů</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">O nás</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Portfolio</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Kariéra</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Kontakt</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 4: Contact Info -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-white">Kontakt</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<ion-icon name="time-outline" class="text-sport-orange text-xl mr-2"></ion-icon>
|
||||
<span class="text-gray-400">Po-Ne: 8:00 - 20:00</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<ion-icon name="mail-outline" class="text-sport-orange text-xl mr-2"></ion-icon>
|
||||
<span class="text-gray-400 hover:text-white transition duration-200 cursor-pointer" onclick="copyEmailAndRedirect('[email protected]')">[email protected]</span>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<ion-icon name="call-outline" class="text-sport-orange text-xl mr-2"></ion-icon>
|
||||
<div class="space-y-1">
|
||||
<div><a href="tel:+420775247633" class="text-gray-400 hover:text-white transition duration-200">+420 775 247 633</a></div>
|
||||
<div><a href="tel:+420778701838" class="text-gray-400 hover:text-white transition duration-200">+420 778 701 838</a></div>
|
||||
<ion-icon name="call-outline" class="text-sport-orange text-xl mt-1 mr-2"></ion-icon>
|
||||
<div>
|
||||
<div class="text-gray-400">+420 775 247 633</div>
|
||||
<div class="text-gray-400">+420 778 701 838</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<ion-icon name="mail-outline" class="text-sport-orange text-xl mr-2 mt-1"></ion-icon>
|
||||
<div>
|
||||
<div class="text-gray-400 cursor-pointer hover:text-white transition-colors" onclick="copyEmailAndRedirect('[email protected]')">[email protected]</div>
|
||||
<div class="text-sm text-sport-orange">Odpovídáme do 24 hodin</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<ion-icon name="time-outline" class="text-sport-orange text-xl mt-1 mr-2"></ion-icon>
|
||||
<span class="text-gray-400">Po-Ne: 8:00 - 20:00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -287,20 +321,13 @@
|
||||
<!-- Copyright -->
|
||||
<div class="border-t border-gray-800 py-6">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center">
|
||||
<p class="text-gray-400 text-sm">© 2025 SportCreative. Všechna práva vyhrazena.</p>
|
||||
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||
<!-- <a href="#" class="text-gray-400 hover:text-white transition duration-200">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<ion-icon name="logo-facebook" class="h-5 w-5"></ion-icon>
|
||||
</a> -->
|
||||
<a href="https://www.instagram.com/sportcreative_cz/" target="_blank" class="text-gray-400 hover:text-white transition duration-200">
|
||||
<span class="sr-only">Instagram</span>
|
||||
<ion-icon name="logo-instagram" class="h-5 w-5"></ion-icon>
|
||||
</a>
|
||||
<!-- <a href="#" class="text-gray-400 hover:text-white transition duration-200">
|
||||
<span class="sr-only">YouTube</span>
|
||||
<ion-icon name="logo-youtube" class="h-5 w-5"></ion-icon>
|
||||
</a>-->
|
||||
<p class="text-gray-400 text-sm mb-4 md:mb-0">
|
||||
© 2025 SportCreative. Všechna práva vyhrazena.
|
||||
</p>
|
||||
<div class="flex space-x-4 text-sm text-gray-400">
|
||||
<a href="#" class="hover:text-white transition duration-150">Podmínky použití</a>
|
||||
<a href="#" class="hover:text-white transition duration-150">Ochrana soukromí</a>
|
||||
<a href="#" class="hover:text-white transition duration-150">Cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -328,10 +355,77 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile menu toggle
|
||||
document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
|
||||
document.getElementById('mobile-menu').classList.toggle('hidden');
|
||||
});
|
||||
// Mobile menu functionality
|
||||
const menuButton = document.querySelector('.mobile-menu-button');
|
||||
const mobileMenu = document.querySelector('.mobile-menu');
|
||||
const menuIcon = menuButton?.querySelector('ion-icon');
|
||||
let isMenuOpen = false;
|
||||
|
||||
// Function to close the menu
|
||||
function closeMenu() {
|
||||
isMenuOpen = false;
|
||||
if (mobileMenu) {
|
||||
mobileMenu.classList.remove('active');
|
||||
mobileMenu.style.opacity = '0';
|
||||
mobileMenu.style.visibility = 'hidden';
|
||||
}
|
||||
if (menuIcon) {
|
||||
menuIcon.setAttribute('name', 'menu-outline');
|
||||
}
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
}
|
||||
|
||||
// Function to open the menu
|
||||
function openMenu() {
|
||||
isMenuOpen = true;
|
||||
if (mobileMenu) {
|
||||
mobileMenu.classList.add('active');
|
||||
mobileMenu.style.opacity = '1';
|
||||
mobileMenu.style.visibility = 'visible';
|
||||
}
|
||||
if (menuIcon) {
|
||||
menuIcon.setAttribute('name', 'close-outline');
|
||||
}
|
||||
setTimeout(() => {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
}, 10);
|
||||
}
|
||||
|
||||
// Handle clicks outside the menu
|
||||
function handleClickOutside(e) {
|
||||
if (!menuButton.contains(e.target) && !mobileMenu.contains(e.target)) {
|
||||
closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle menu on button click
|
||||
if (menuButton && mobileMenu) {
|
||||
menuButton.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
if (isMenuOpen) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking on menu links
|
||||
const menuLinks = mobileMenu.querySelectorAll('a');
|
||||
menuLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
closeMenu();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Close menu when window is resized to desktop
|
||||
function handleResize() {
|
||||
if (window.innerWidth >= 768) {
|
||||
closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// Back to top button
|
||||
const backToTopButton = document.getElementById('backToTop');
|
||||
|
||||
Reference in New Issue
Block a user