Dofinansowane przez UE<style type="text/css">/* KONTENER GŁÓWNY */
.eu-projects-wrapper {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto 30px auto;
color: #333;
}
/* TYTUŁ W BARWACH UNIJNYCH */
.eu-title {
color: #003399; /* Unijny niebieski */
font-size: 1.8rem;
margin-bottom: 25px;
border-bottom: 3px solid #FFCC00; /* Unijny żółty */
padding-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
/* NOWOCZESNA LISTA - CSS GRID */
.eu-grid {
display: grid;
/* Magia RWD: Kafelki same ułożą się w 1 kolumnę na telefonie i w 2 na komputerze */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
padding: 0;
margin: 0;
list-style-type: none; /* Usuwamy standardowe kropki z listy */
}
/* STYL POJEDYNCZEGO KAFELKA (LINKU) */
.eu-card {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-left: 4px solid #003399;
padding: 16px 20px;
text-decoration: none; /* Usuwamy podkreślenie linku */
color: #333;
font-weight: bold;
border-radius: 6px;
transition: all 0.2s ease-in-out; /* Płynna animacja */
}
/* EFEKT NAJECHANIA MYSZKĄ (HOVER) */
.eu-card:hover {
background-color: #003399;
color: #ffffff;
border-left-color: #FFCC00;
box-shadow: 0 4px 12px rgba(0, 51, 153, 0.2);
}
/* Strzałka w kafelku generowana przez CSS */
.eu-card::after {
content: "→";
font-size: 1.2rem;
transition: transform 0.2s;
}
.eu-card:hover::after {
transform: translateX(5px); /* Strzałka przesuwa się lekko w prawo */
}
/* STYL DLA ZABLOKOWANEGO/ARCHIWALNEGO ELEMENTU BEZ LINKU */
.eu-card-disabled {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f1f1f1;
border: 1px solid #e9ecef;
border-left: 4px solid #b0b0b0; /* Szary, wygaszony kolor */
padding: 16px 20px;
color: #888;
font-weight: bold;
border-radius: 6px;
cursor: not-allowed;
}
.eu-card-disabled::after {
content: "🔒"; /* Znak kłódki sugerujący archiwum */
font-size: 1rem;
}
</style>
<div class="eu-projects-wrapper">
<h2 class="eu-title">🇪🇺 Projekty dofinansowane przez Unię Europejską</h2>
<ul class="eu-grid">
<li><a class="eu-card" href="https://mieszkancy.chorzow.eu/article/okres-programowania-2021-2027">Okres programowania 2021-2027 </a></li>
<li><a class="eu-card" href="https://mieszkancy.chorzow.eu/article/okres-programowania-2014-2020">Okres programowania 2014-2020 </a></li>
<li>
<div class="eu-card-disabled" title="Strona niedostępna / brak danych w systemie">Okres programowania 2007-2013</div>
</li>
<li><a class="eu-card" href="https://mieszkancy.chorzow.eu/article/okres-programowania-2004-2006">Okres programowania 2004-2006 </a></li>
</ul>
</div>2026-06-03 14:33:052026-06-03 14:33:05