TDvorak/SportCreative
1
0
Fork 0
mirror of https://github.com/Dvorinka/sportcreative.git synced 2026-06-03 19:32:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Tomas Dvorak
2025-06-15 23:36:31 +02:00
parent 4640ba82a2
commit 3882d01004
13 changed files with 469 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/bizoni.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 863 KiB

assets/images/krnov.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 956 KiB

assets/images/masita.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 746 KiB

assets/images/penalty.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 831 KiB

assets/images/revvi.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 KiB

assets/images/skup.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 726 KiB

assets/images/sportcreative.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 23 KiB

assets/images/winnersport.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 674 KiB

assets/images/zeus.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 353 KiB

index.html
+87 -74
View File
@@ -155,23 +155,23 @@
<!-- Mobile Menu Button --> <!-- Mobile Menu Button -->
<div class="md:hidden"> <div class="md:hidden">
<button type="button" class="text-gray-700 hover:text-sport-purple focus:outline-none p-2"> <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-6 w-6"></ion-icon> <ion-icon name="menu-outline" class="h-8 w-8 transition-transform duration-300"></ion-icon>
</button> </button>
</div> </div>
</div> </div>
<!-- Mobile Navigation (hidden by default) --> <!-- Mobile Navigation -->
<div class="mobile-menu hidden w-full absolute top-full left-0"> <div class="mobile-menu w-full absolute top-full left-0 bg-white shadow-lg">
<div class="pt-2 pb-4 space-y-1"> <nav class="px-2 pt-2 pb-4 space-y-1">
<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">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">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 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 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 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 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="#" 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 pl-3 pr-4 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple">Kontakt</a> <a href="kontakt.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">Kontakt</a>
</div> </nav>
<div class="pt-2 pb-3 px-4"> <div class="px-4 py-3 border-t border-gray-100">
<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"> <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 Nezávazná konzultace
</a> </a>
</div> </div>
@@ -393,35 +393,9 @@
<!-- Portfolio Grid --> <!-- Portfolio Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- SKUP Olomouc -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="video social">
<img src="https://www.claudeusercontent.com/api/placeholder/600/400" alt="SKUP Olomouc" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">SKUP Olomouc</h3>
<p class="text-gray-200">Komplexní správa sociálních sítí a tvorba videí</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Video</span>
<span class="bg-sport-orange bg-opacity-80 text-white text-xs px-2 py-1 rounded">Sociální sítě</span>
</div>
</div>
</div>
<!-- Zeusport -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="web social">
<img src="https://www.claudeusercontent.com/api/placeholder/600/400" alt="Zeusport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">Zeusport</h3>
<p class="text-gray-200">Webové stránky a sociální sítě</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Webdesign</span>
<span class="bg-sport-orange bg-opacity-80 text-white text-xs px-2 py-1 rounded">Sociální sítě</span>
</div>
</div>
</div>
<!-- Winnersport --> <!-- Winnersport -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social sprava-webu"> <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social sprava-webu">
<img src="https://www.claudeusercontent.com/api/placeholder/600/400" alt="Winnersport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" /> <img src="assets/images/winnersport.png" alt="Winnersport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6"> <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">Winnersport</h3> <h3 class="text-white text-xl font-bold">Winnersport</h3>
<p class="text-gray-200">Správa sociálních sítí a e-shopu</p> <p class="text-gray-200">Správa sociálních sítí a e-shopu</p>
@@ -434,7 +408,7 @@
<!-- Masita --> <!-- Masita -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social"> <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social">
<img src="https://www.claudeusercontent.com/api/placeholder/600/400" alt="Masita" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" /> <img src="assets/images/masita.png" alt="Masita" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6"> <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">Masita</h3> <h3 class="text-white text-xl font-bold">Masita</h3>
<p class="text-gray-200">Kompletní správa sociálních sítí</p> <p class="text-gray-200">Kompletní správa sociálních sítí</p>
@@ -444,36 +418,9 @@
</div> </div>
</div> </div>
<!-- Revvisport -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="web social">
<img src="https://www.claudeusercontent.com/api/placeholder/600/400" alt="Revvisport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">Revvisport</h3>
<p class="text-gray-200">Webové stránky a sociální sítě</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Webdesign</span>
<span class="bg-sport-orange bg-opacity-80 text-white text-xs px-2 py-1 rounded">Sociální sítě</span>
</div>
</div>
</div>
<!-- FK Kofola Krnov -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="sprava-webu social video">
<img src="https://www.claudeusercontent.com/api/placeholder/600/400" alt="FK Kofola Krnov" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">FK Kofola Krnov</h3>
<p class="text-gray-200">Komplexní digitální marketing</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Správa webu</span>
<span class="bg-sport-orange bg-opacity-80 text-white text-xs px-2 py-1 rounded">Sociální sítě</span>
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Video</span>
</div>
</div>
</div>
<!-- FC Bizoni UH --> <!-- FC Bizoni UH -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social web foto video"> <div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social web foto video">
<img src="https://www.claudeusercontent.com/api/placeholder/600/400" alt="FC Bizoni UH" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" /> <img src="assets/images/bizoni.png" alt="FC Bizoni UH" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6"> <div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">FC Bizoni UH</h3> <h3 class="text-white text-xl font-bold">FC Bizoni UH</h3>
<p class="text-gray-200">Kompletní digitální marketing</p> <p class="text-gray-200">Kompletní digitální marketing</p>
@@ -485,15 +432,81 @@
</div> </div>
</div> </div>
</div> </div>
<!-- FK Kofola Krnov -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="sprava-webu social video">
<img src="assets/images/krnov.png" alt="FK Kofola Krnov" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">FK Kofola Krnov</h3>
<p class="text-gray-200">Komplexní digitální marketing</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Správa webu</span>
<span class="bg-sport-orange bg-opacity-80 text-white text-xs px-2 py-1 rounded">Sociální sítě</span>
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Video</span>
</div>
</div>
</div>
<!-- Penalty -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social web foto video">
<img src="assets/images/penalty.png" alt="Penalty" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">Penalty</h3>
<p class="text-gray-200">Sociální sítě</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Sociální sítě</span>
</div>
</div>
</div>
<!-- Zeusport -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="web social">
<img src="assets/images/zeus.png" alt="Zeusport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">Zeusport</h3>
<p class="text-gray-200">Webové stránky a sociální sítě</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Webdesign</span>
<span class="bg-sport-orange bg-opacity-80 text-white text-xs px-2 py-1 rounded">Sociální sítě</span>
</div>
</div>
</div>
<!-- Revvisport -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="web social">
<img src="assets/images/revvi.png" alt="Revvisport" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">Revvisport</h3>
<p class="text-gray-200">Webové stránky a sociální sítě</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Webdesign</span>
<span class="bg-sport-orange bg-opacity-80 text-white text-xs px-2 py-1 rounded">Sociální sítě</span>
</div>
</div>
</div>
<!-- SKUP Olomouc -->
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="video social">
<img src="assets/images/skup.png" alt="SKUP Olomouc" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
<div class="portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 transition duration-300 flex flex-col justify-end p-6">
<h3 class="text-white text-xl font-bold">SKUP Olomouc</h3>
<p class="text-gray-200">Komplexní správa sociálních sítí a tvorba videí</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-sport-purple bg-opacity-80 text-white text-xs px-2 py-1 rounded">Video</span>
<span class="bg-sport-orange bg-opacity-80 text-white text-xs px-2 py-1 rounded">Sociální sítě</span>
</div>
</div>
</div>
</div> </div>
<!-- Show More Button --> <!-- Show More Button
<div class="mt-12 text-center"> <div class="mt-12 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-sport-purple text-base font-medium rounded-full text-sport-purple hover:bg-gray-50 transition duration-300"> <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-sport-purple text-base font-medium rounded-full text-sport-purple hover:bg-gray-50 transition duration-300">
Zobrazit další projekty Zobrazit další projekty
<ion-icon name="arrow-down-outline" class="ml-2"></ion-icon> <ion-icon name="arrow-down-outline" class="ml-2"></ion-icon>
</a> </a>
</div> </div> -->
</div> </div>
</section> </section>
<!-- Call to Action Section --> <!-- Call to Action Section -->
@@ -508,10 +521,10 @@
<a href="kontakt.html" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-full font-medium text-sport-purple bg-white hover:bg-gray-100 shadow-lg transition duration-300"> <a href="kontakt.html" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-full font-medium text-sport-purple bg-white hover:bg-gray-100 shadow-lg transition duration-300">
Nezávazná konzultace Nezávazná konzultace
</a> </a>
<a href="#portfolio" class="inline-flex items-center justify-center px-6 py-3 border border-white rounded-full font-medium text-white hover:bg-white/10 transition duration-300"> <!-- <a href="#portfolio" class="inline-flex items-center justify-center px-6 py-3 border border-white rounded-full font-medium text-white hover:bg-white/10 transition duration-300">
Naše portfolio Naše portfolio
<ion-icon name="arrow-forward-outline" class="ml-2"></ion-icon> <ion-icon name="arrow-forward-outline" class="ml-2"></ion-icon>
</a> </a> -->
</div> </div>
</div> </div>
</div> </div>
@@ -560,7 +573,7 @@
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a> <a href="#" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
</li> </li>
<li> <li>
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie</a> <a href="#" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
</li> </li>
<li> <li>
<a href="#" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a> <a href="#" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
kontakt.html
+157 -63
View File
@@ -67,23 +67,23 @@
<!-- Mobile Menu Button --> <!-- Mobile Menu Button -->
<div class="md:hidden"> <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"> <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-6 w-6 leading-none"></ion-icon> <ion-icon name="menu-outline" class="h-8 w-8 transition-transform duration-300"></ion-icon>
</button> </button>
</div> </div>
</div> </div>
<!-- Mobile Navigation (hidden by default) --> <!-- Mobile Navigation -->
<div class="mobile-menu hidden w-full absolute top-full left-0 bg-white shadow-md"> <div class="mobile-menu w-full absolute top-full left-0 bg-white shadow-lg">
<div class="pt-2 pb-4 space-y-1"> <nav class="px-2 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="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 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 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 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 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 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="#" 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 pl-3 pr-4 py-2 text-base font-medium text-sport-purple bg-gray-50">Kontakt</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>
</div> </nav>
<div class="pt-2 pb-3 px-4"> <div class="px-4 py-3 border-t border-gray-100">
<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"> <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 Nezávazná konzultace
</a> </a>
</div> </div>
@@ -232,53 +232,87 @@
<span class="text-sport-purple">Sport</span><span class="text-sport-orange">Creative</span> <span class="text-sport-purple">Sport</span><span class="text-sport-orange">Creative</span>
</div> </div>
<p class="text-gray-400 mb-4"> <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> </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> </div>
<!-- Column 2: Quick Links --> <!-- Column 2: Services -->
<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 -->
<div> <div>
<h3 class="text-lg font-semibold mb-4 text-white">Služby</h3> <h3 class="text-lg font-semibold mb-4 text-white">Služby</h3>
<ul class="space-y-2"> <ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Videoprodukce</a></li> <li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Fotografování</a></li> <a href="#" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Webové stránky</a></li> </li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Grafický design</a></li> <li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-200">Sociální sítě</a></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> </ul>
</div> </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> <div>
<h3 class="text-lg font-semibold mb-4 text-white">Kontakt</h3> <h3 class="text-lg font-semibold mb-4 text-white">Kontakt</h3>
<ul class="space-y-3"> <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"> <li class="flex items-center">
<ion-icon name="mail-outline" class="text-sport-orange text-xl mr-2"></ion-icon> <ion-icon name="call-outline" class="text-sport-orange text-xl mt-1 mr-2"></ion-icon>
<span class="text-gray-400 hover:text-white transition duration-200 cursor-pointer" onclick="copyEmailAndRedirect('info@sportcreative.eu')">info@sportcreative.eu</span> <div>
</li> <div class="text-gray-400">+420 775 247 633</div>
<li class="flex items-center"> <div class="text-gray-400">+420 778 701 838</div>
<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>
</div> </div>
</li> </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('info@sportcreative.eu')">info@sportcreative.eu</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> </ul>
</div> </div>
</div> </div>
@@ -287,20 +321,13 @@
<!-- Copyright --> <!-- Copyright -->
<div class="border-t border-gray-800 py-6"> <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"> <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">&copy; 2025 SportCreative. Všechna práva vyhrazena.</p> <p class="text-gray-400 text-sm mb-4 md:mb-0">
<div class="flex space-x-6 mt-4 md:mt-0"> &copy; 2025 SportCreative. Všechna práva vyhrazena.
<!-- <a href="#" class="text-gray-400 hover:text-white transition duration-200"> </p>
<span class="sr-only">Facebook</span> <div class="flex space-x-4 text-sm text-gray-400">
<ion-icon name="logo-facebook" class="h-5 w-5"></ion-icon> <a href="#" class="hover:text-white transition duration-150">Podmínky použití</a>
</a> --> <a href="#" class="hover:text-white transition duration-150">Ochrana soukromí</a>
<a href="https://www.instagram.com/sportcreative_cz/" target="_blank" class="text-gray-400 hover:text-white transition duration-200"> <a href="#" class="hover:text-white transition duration-150">Cookies</a>
<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>-->
</div> </div>
</div> </div>
</div> </div>
@@ -328,10 +355,77 @@
}); });
} }
// Mobile menu toggle // Mobile menu functionality
document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { const menuButton = document.querySelector('.mobile-menu-button');
document.getElementById('mobile-menu').classList.toggle('hidden'); 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 // Back to top button
const backToTopButton = document.getElementById('backToTop'); const backToTopButton = document.getElementById('backToTop');
script.js
+114 -95
View File
@@ -1,118 +1,137 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Mobile menu functionality // Mobile menu functionality
const menuButton = document.querySelector('.md\\:hidden button'); const menuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu'); const mobileMenu = document.querySelector('.mobile-menu');
const menuIcon = menuButton?.querySelector('ion-icon');
let isMenuOpen = false; let isMenuOpen = false;
if (menuButton && mobileMenu) { // Function to close the menu
// Initialize menu state function closeMenu() {
mobileMenu.classList.add('hidden'); isMenuOpen = false;
mobileMenu.classList.remove('block', 'slide-in', 'slide-out'); 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);
}
menuButton.addEventListener('click', function(e) { // Function to open the menu
e.stopPropagation(); function openMenu() {
isMenuOpen = !isMenuOpen; 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);
}
if (isMenuOpen) { // Handle clicks outside the menu
// Opening menu function handleClickOutside(e) {
mobileMenu.classList.remove('hidden', 'slide-out'); if (!menuButton.contains(e.target) && !mobileMenu.contains(e.target)) {
mobileMenu.classList.add('block', 'slide-in'); closeMenu();
// Add click outside listener
document.addEventListener('click', closeMenuOnClickOutside);
} else {
// Closing menu
mobileMenu.classList.remove('slide-in');
mobileMenu.classList.add('slide-out');
// Remove click outside listener
document.removeEventListener('click', closeMenuOnClickOutside);
// Hide after animation
setTimeout(() => {
if (!isMenuOpen) { // Check again in case state changed
mobileMenu.classList.add('hidden');
mobileMenu.classList.remove('block');
}
}, 300);
}
});
// Close menu when clicking outside
function closeMenuOnClickOutside(e) {
if (!mobileMenu.contains(e.target) && !menuButton.contains(e.target)) {
isMenuOpen = false;
mobileMenu.classList.remove('slide-in');
mobileMenu.classList.add('slide-out');
document.removeEventListener('click', closeMenuOnClickOutside);
// Hide after animation
setTimeout(() => {
mobileMenu.classList.add('hidden');
mobileMenu.classList.remove('block');
}, 300);
}
} }
} }
// Get all filter buttons and portfolio items // 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);
// Portfolio filtering functionality - only run if elements exist
const filterButtons = document.querySelectorAll('.portfolio-filter-btn'); const filterButtons = document.querySelectorAll('.portfolio-filter-btn');
const portfolioItems = document.querySelectorAll('.portfolio-item'); const portfolioItems = document.querySelectorAll('.portfolio-item');
// Add click event to each filter button // Only run portfolio filtering if we have both buttons and items
filterButtons.forEach(button => { if (filterButtons.length > 0 && portfolioItems.length > 0) {
button.addEventListener('click', function() { // Filter functionality
// Remove active class from all buttons filterButtons.forEach(button => {
filterButtons.forEach(btn => { button.addEventListener('click', function() {
btn.classList.remove('bg-sport-purple', 'text-white'); // Remove active class from all buttons
btn.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-100'); filterButtons.forEach(btn => btn.classList.remove('bg-sport-purple', 'text-white'));
// Add active class to clicked button
this.classList.add('bg-sport-purple', 'text-white');
const filterValue = this.getAttribute('data-filter');
// Filter portfolio items
portfolioItems.forEach(item => {
const categories = item.getAttribute('data-categories').split(' ');
if (filterValue === 'all' || categories.includes(filterValue)) {
item.style.display = 'block';
// Add animation class
item.classList.add('animate-fade-in');
setTimeout(() => {
item.classList.remove('animate-fade-in');
}, 500);
} else {
item.style.display = 'none';
}
});
});
});
// Initialize portfolio with "all" selected
const allFilterButton = document.querySelector('[data-filter="all"]');
if (allFilterButton) {
allFilterButton.click();
}
// Portfolio item hover effects
portfolioItems.forEach(item => {
item.addEventListener('mouseenter', function() {
const overlay = this.querySelector('.portfolio-overlay');
if (overlay) {
overlay.classList.remove('opacity-0');
overlay.classList.add('opacity-100');
}
}); });
// Add active class to clicked button item.addEventListener('mouseleave', function() {
this.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-100'); const overlay = this.querySelector('.portfolio-overlay');
this.classList.add('bg-sport-purple', 'text-white'); if (overlay) {
overlay.classList.remove('opacity-100');
// Get selected filter category overlay.classList.add('opacity-0');
const filterValue = this.getAttribute('data-filter');
// Show/hide portfolio items based on filter
portfolioItems.forEach(item => {
// If "all" is selected or item has the selected category
if (filterValue === 'all' || item.getAttribute('data-categories').includes(filterValue)) {
item.style.display = 'block';
// Add animation class
item.classList.add('animate-fade-in');
setTimeout(() => {
item.classList.remove('animate-fade-in');
}, 500);
} else {
item.style.display = 'none';
} }
}); });
}); });
});
// Initialize portfolio with "all" selected if filter buttons exist
const allFilterButton = document.querySelector('[data-filter="all"]');
if (allFilterButton) {
allFilterButton.click();
} }
// Additional functionality: Portfolio item hover effects
portfolioItems.forEach(item => {
item.addEventListener('mouseenter', function() {
const overlay = this.querySelector('.portfolio-overlay');
if (overlay) {
overlay.classList.remove('opacity-0');
overlay.classList.add('opacity-100');
}
});
item.addEventListener('mouseleave', function() {
const overlay = this.querySelector('.portfolio-overlay');
if (overlay) {
overlay.classList.remove('opacity-100');
overlay.classList.add('opacity-0');
}
});
});
// Enhanced button hover effects - limited to actual buttons // Enhanced button hover effects - limited to actual buttons
const buttons = document.querySelectorAll('button:not(.portfolio-filter-btn), .btn'); const buttons = document.querySelectorAll('button:not(.portfolio-filter-btn), .btn');
buttons.forEach(button => { buttons.forEach(button => {
style.css
+105 -1
View File
@@ -98,8 +98,112 @@ p {
} }
.navbar.scrolled { .navbar.scrolled {
padding: 1rem 0; padding: 1rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} }
/* Mobile Menu Styles */
.mobile-menu {
position: fixed;
top: 80px;
left: 0;
right: 0;
background: white;
padding: 1.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
z-index: 999;
max-height: calc(100vh - 80px);
overflow-y: auto;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mobile-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu li {
margin-bottom: 1rem;
opacity: 0;
transform: translateY(-10px);
animation: fadeInUp 0.3s ease-out forwards;
}
.mobile-menu li:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu li:nth-child(2) { animation-delay: 0.15s; }
.mobile-menu li:nth-child(3) { animation-delay: 0.2s; }
.mobile-menu li:nth-child(4) { animation-delay: 0.25s; }
.mobile-menu li:nth-child(5) { animation-delay: 0.3s; }
.mobile-menu a {
display: block;
padding: 0.75rem 1rem;
color: var(--dark);
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.2s ease;
}
.mobile-menu a:hover,
.mobile-menu a:focus {
background: var(--primary-light);
color: var(--primary);
}
.mobile-menu .btn-primary {
display: block;
text-align: center;
margin-top: 1rem;
background: var(--button-bg);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
}
.mobile-menu .btn-primary:hover {
background: var(--button-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hide mobile menu on larger screens */
@media (min-width: 768px) {
.mobile-menu {
display: none !important;
}
}
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;