Media społecznościowe<style type="text/css">/* CSS - Nasza "farba i dekoracje" */
/* Główny kontener - dba o to, by cała sekcja miała maksymalną szerokość i była wyśrodkowana */
.social-section-wrapper {
max-width: 900px;
margin: 30px auto;
font-family: system-ui, -apple-system, sans-serif;
color: #333333;
}
/* Nowoczesny opis nad kafelkami */
.social-section-wrapper p {
font-size: 18px;
font-weight: 600;
text-align: center;
color: #002672; /* Oficjalny granat */
margin-bottom: 25px;
}
/* Inteligentny magazynier (Grid) - układa kafelki w kolumny */
.social-grid-container {
display: grid;
/* Automatyczne dopasowanie: minimalna szerokość kafelka to 160px.
Jeśli jest miejsce, układa je obok siebie, jeśli nie - zrzuca pod spód (RWD) */
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 15px; /* Idealny, 15-pikselowy odstęp między kafelkami */
}
/* Styl pojedynczego kafelka */
.social-card-item {
display: flex;
flex-direction: column; /* Układa ikonę nad tekstem */
align-items: center;
justify-content: center;
padding: 20px 10px;
background-color: #002672; /* Główny granat */
color: #ffffff !important; /* Wymuszony biały tekst (ważne dla WCAG!) */
text-decoration: none; /* Usuwa brzydkie podkreślenie linku */
border-radius: 8px; /* Delikatnie zaokrąglone rogi */
font-weight: bold;
font-size: 15px;
box-shadow: 0 4px 6px rgba(0, 24, 114, 0.1);
transition: all 0.3s ease; /* Płynne przejście animacji */
}
/* Styl ikony-emotki wewnątrz kafelka */
.social-card-item .card-emoji {
font-size: 28px;
margin-bottom: 8px;
}
/* MAGIA HOVERA - Co dzieje się po najechaniu myszką na kafelek */
.social-card-item:hover {
background-color: #f20000; /* Zmiana na czerwień miasta */
transform: translateY(-4px); /* Delikatne uniesienie kafelka w górę */
box-shadow: 0 6px 12px rgba(242, 0, 0, 0.25); /* Mocniejszy, czerwony cień */
}
</style>
<!-- HTML - Nasz "szkielet" strony -->
<div class="social-section-wrapper">
<p>Oficjalne media społecznościowe Miasta Chorzów</p>
<div class="social-grid-container"><!-- Kafelek: Facebook --><a class="social-card-item" href="https://www.facebook.com/umchorzow/" rel="noopener noreferrer" target="_blank"><span class="card-emoji">📘</span> Facebook </a> <!-- Kafelek: Instagram --> <a class="social-card-item" href="https://www.instagram.com/miastochorzow" rel="noopener noreferrer" target="_blank"> <span class="card-emoji">📸</span> Instagram </a> <!-- Kafelek: X (Twitter) --> <a class="social-card-item" href="https://x.com/UMChorzow" rel="noopener noreferrer" target="_blank"> <span class="card-emoji">✖️</span> X (Twitter) </a> <!-- Kafelek: YouTube --> <a class="social-card-item" href="https://www.youtube.com/@miastochorzow" rel="noopener noreferrer" target="_blank"> <span class="card-emoji">📺</span> YouTube </a> <!-- Kafelek: TikTok --> <a class="social-card-item" href="https://www.tiktok.com/@chorzow_official" rel="noopener noreferrer" target="_blank"> <span class="card-emoji">🎵</span> TikTok </a></div>
<p><p>
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="315" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/V1_mf-Acoak?si=IVG9DM9SfcyN3xg_" title="YouTube video player" width="560"></iframe></p>
</div>2026-06-15 21:46:502026-06-15 21:46:50