mirror of
https://github.com/Dvorinka/sportcreative.git
synced 2026-07-28 21:13:47 +00:00
seo
This commit is contained in:
Tomas Dvorak
@@ -566,13 +566,13 @@
|
||||
<!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<ion-icon name="logo-facebook" class="text-xl"></ion-icon>
|
||||
</a> -->
|
||||
<a href="https://www.instagram.com/sportcreative_cz/" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<a href="https://www.instagram.com/sportcreative_cz/" target="_blank" aria-label="Instagram" alt="Instagram" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<ion-icon name="logo-instagram" class="text-xl"></ion-icon>
|
||||
</a>
|
||||
<!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<ion-icon name="logo-twitter" class="text-xl"></ion-icon>
|
||||
</a> -->
|
||||
<a href="https://www.linkedin.com/company/sportcreative-eu" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<a href="https://www.linkedin.com/company/sportcreative-eu" target="_blank" aria-label="LinkedIn" alt="LinkedIn" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<ion-icon name="logo-linkedin" class="text-xl"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
+11
-11
@@ -950,7 +950,7 @@
|
||||
|
||||
<!-- Masita -->
|
||||
<div class="portfolio-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social">
|
||||
<img src="assets/images/masita.png" alt="Masita" class="w-full h-64 object-cover transition duration-300 transform group-hover:scale-105" />
|
||||
<img src="assets/images/masita.jpg" 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">
|
||||
<h3 class="text-white text-xl font-bold">Masita</h3>
|
||||
<p class="text-gray-200">Kompletní správa sociálních sítí</p>
|
||||
@@ -961,8 +961,8 @@
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<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-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social web sprava-webu foto video">
|
||||
<img src="assets/images/bizoni.jpg" 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">
|
||||
<h3 class="text-white text-xl font-bold">FC Bizoni UH</h3>
|
||||
<p class="text-gray-200">Kompletní digitální marketing</p>
|
||||
@@ -977,7 +977,7 @@
|
||||
|
||||
<!-- 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" />
|
||||
<img src="assets/images/krnov.jpg" 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>
|
||||
@@ -990,8 +990,8 @@
|
||||
</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-item group relative overflow-hidden rounded-lg shadow-md transition duration-300 hover:shadow-xl" data-categories="social">
|
||||
<img src="assets/images/penalty.jpg" 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>
|
||||
@@ -1003,7 +1003,7 @@
|
||||
|
||||
<!-- 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" />
|
||||
<img src="assets/images/zeus.jpg" 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>
|
||||
@@ -1016,7 +1016,7 @@
|
||||
|
||||
<!-- 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" />
|
||||
<img src="assets/images/revvi.jpg" 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>
|
||||
@@ -1030,7 +1030,7 @@
|
||||
|
||||
<!-- 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" />
|
||||
<img src="assets/images/skup.jpg" 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>
|
||||
@@ -1170,13 +1170,13 @@
|
||||
<!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<ion-icon name="logo-facebook" class="text-xl"></ion-icon>
|
||||
</a> -->
|
||||
<a href="https://www.instagram.com/sportcreative_cz/" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<a href="https://www.instagram.com/sportcreative_cz/" target="_blank" aria-label="Instagram" alt="Instagram" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<ion-icon name="logo-instagram" class="text-xl"></ion-icon>
|
||||
</a>
|
||||
<!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<ion-icon name="logo-twitter" class="text-xl"></ion-icon>
|
||||
</a> -->
|
||||
<a href="https://www.linkedin.com/company/sportcreative-eu" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<a href="https://www.linkedin.com/company/sportcreative-eu" target="_blank" aria-label="LinkedIn" alt="LinkedIn" class="text-gray-400 hover:text-white transition duration-150">
|
||||
<ion-icon name="logo-linkedin" class="text-xl"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -123,95 +123,92 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// Portfolio filtering functionality - only run if elements exist
|
||||
const filterButtons = document.querySelectorAll('.portfolio-filter-btn');
|
||||
const allPortfolioItems = document.querySelectorAll('.portfolio-item');
|
||||
let allPortfolioItems = Array.from(document.querySelectorAll('.portfolio-item'));
|
||||
|
||||
// Function to update portfolio items
|
||||
function updatePortfolioItems() {
|
||||
allPortfolioItems = Array.from(document.querySelectorAll('.portfolio-item'));
|
||||
}
|
||||
|
||||
// Only run portfolio filtering if we have both buttons and items
|
||||
if (filterButtons.length > 0 && allPortfolioItems.length > 0) {
|
||||
// Filter functionality
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// Remove active classes from all buttons
|
||||
filterButtons.forEach(btn => {
|
||||
btn.classList.remove('bg-sport-purple', 'bg-sport-orange', 'text-white');
|
||||
btn.classList.add('bg-white', 'text-gray-700');
|
||||
});
|
||||
|
||||
// Add appropriate active class based on button type
|
||||
if (this.getAttribute('data-filter') === 'all') {
|
||||
this.classList.remove('bg-white', 'text-gray-700');
|
||||
this.classList.add('bg-sport-purple', 'text-white');
|
||||
} else {
|
||||
this.classList.remove('bg-white', 'text-gray-700');
|
||||
this.classList.add('bg-sport-orange', '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 and set initial button colors
|
||||
filterButtons.forEach(btn => {
|
||||
if (btn.getAttribute('data-filter') === 'all') {
|
||||
btn.classList.remove('bg-white', 'text-gray-700');
|
||||
btn.classList.add('bg-sport-purple', 'text-white');
|
||||
} else {
|
||||
btn.classList.remove('bg-sport-orange', 'text-white');
|
||||
btn.classList.add('bg-white', 'text-gray-700');
|
||||
}
|
||||
});
|
||||
|
||||
// Show all items initially
|
||||
portfolioItems.forEach(item => {
|
||||
item.style.display = 'block';
|
||||
});
|
||||
|
||||
// Portfolio item hover effects - using CSS for hover instead
|
||||
// This ensures hover works regardless of filter state
|
||||
portfolioItems.forEach(item => {
|
||||
// Remove any existing mouseenter/mouseleave event listeners
|
||||
const newItem = item.cloneNode(true);
|
||||
item.parentNode.replaceChild(newItem, item);
|
||||
|
||||
// Add click handler for each portfolio item
|
||||
newItem.addEventListener('click', function(e) {
|
||||
// Add click handler for each portfolio item
|
||||
function setupPortfolioItemClick(item) {
|
||||
item.addEventListener('click', function(e) {
|
||||
// Prevent the click from bubbling up to parent elements
|
||||
e.stopPropagation();
|
||||
|
||||
// Toggle a class to handle the overlay visibility on click
|
||||
const overlay = this.querySelector('.portfolio-overlay');
|
||||
if (overlay) {
|
||||
overlay.classList.toggle('opacity-0');
|
||||
overlay.classList.toggle('opacity-100');
|
||||
const isOpening = overlay.classList.contains('opacity-0');
|
||||
|
||||
// Close other open overlays
|
||||
portfolioItems.forEach(otherItem => {
|
||||
if (otherItem !== this) {
|
||||
const otherOverlay = otherItem.querySelector('.portfolio-overlay');
|
||||
if (otherOverlay) {
|
||||
otherOverlay.classList.add('opacity-0');
|
||||
otherOverlay.classList.remove('opacity-100');
|
||||
}
|
||||
}
|
||||
// Close all overlays first
|
||||
document.querySelectorAll('.portfolio-overlay').forEach(ov => {
|
||||
ov.classList.add('opacity-0');
|
||||
ov.classList.remove('opacity-100');
|
||||
});
|
||||
|
||||
// Toggle the clicked one if it was closed
|
||||
if (isOpening) {
|
||||
overlay.classList.remove('opacity-0');
|
||||
overlay.classList.add('opacity-100');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Initialize portfolio items
|
||||
allPortfolioItems.forEach(item => {
|
||||
setupPortfolioItemClick(item);
|
||||
});
|
||||
|
||||
// Filter functionality
|
||||
function filterPortfolio(filterValue) {
|
||||
allPortfolioItems = Array.from(document.querySelectorAll('.portfolio-item'));
|
||||
|
||||
allPortfolioItems.forEach(item => {
|
||||
const categories = item.getAttribute('data-categories').split(' ');
|
||||
|
||||
if (filterValue === 'all' || categories.some(cat => cat === filterValue)) {
|
||||
item.style.display = 'block';
|
||||
item.classList.add('animate-fade-in');
|
||||
setTimeout(() => {
|
||||
item.classList.remove('animate-fade-in');
|
||||
}, 500);
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add click handlers to filter buttons
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// Update active button styles
|
||||
filterButtons.forEach(btn => {
|
||||
btn.classList.remove('bg-sport-purple', 'bg-sport-orange', 'text-white');
|
||||
btn.classList.add('bg-white', 'text-gray-700');
|
||||
});
|
||||
|
||||
if (this.getAttribute('data-filter') === 'all') {
|
||||
this.classList.add('bg-sport-purple', 'text-white');
|
||||
} else {
|
||||
this.classList.add('bg-sport-orange', 'text-white');
|
||||
}
|
||||
|
||||
// Apply the filter
|
||||
const filterValue = this.getAttribute('data-filter');
|
||||
filterPortfolio(filterValue);
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize with 'all' filter
|
||||
const allButton = document.querySelector('.portfolio-filter-btn[data-filter="all"]');
|
||||
if (allButton) {
|
||||
allButton.click();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user