Jak Uzyskać taki kod na partnerów ? to proste !
KOD HTML
<div class="partners-widget">
<p class="partners-title">nasi partnerzy</p>
<div class="partners-container">
<!-- Partner 1 -->
<div class="partner-item">
<a href="https://seohost.pl/" target="_blank">
<img src="https://psychofrags.pl/uploads/monthly_2026_01/SeoHost.png.9dd00363a1cd4732136e15c124d1abfd.png" alt="Partner 1">
</a>
</div>
<!-- Partner 2 -->
<div class="partner-item">
<a href="https://cssetti.pl/download" target="_blank">
<img src="https://static.cssetti.pl/logo.png" alt="Partner 2">
</a>
</div>
<!-- Partner 3 -->
<div class="partner-item">
<a href="https://pukawka.pl/" target="_blank">
<img src="https://psychofrags.pl/uploads/set_resources_136/300x100.gif" alt="Partner 3">
</a>
</div>
</div>
</div>
KOD CSS
/************** Partnerzy ***********/
/* Reset i podstawowe style dla widgetu */
.partners-widget {
width: 300px; /* Stała szerokość panelu */
margin: 0 auto;
padding: 10px 0;
text-align: center;
background: transparent;
border: none;
}
/* Napis drobnymi literami na górze */
.partners-title {
font-family: sans-serif;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #888;
margin-bottom: 15px;
margin-top: 0;
}
/* Kontener na logotypy - wymuszony rozmiar 300x100 */
.partners-container {
position: relative;
width: 300px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
overflow: hidden;
}
/* Pojedyncze logo */
.partner-item {
position: absolute;
width: 300px;
height: 100px;
opacity: 0;
animation: fadeCycle 12s infinite;
display: flex;
justify-content: center;
align-items: center;
}
/* Opóźnienia dla logotypów */
.partner-item:nth-child(1) { animation-delay: 0s; }
.partner-item:nth-child(2) { animation-delay: 4s; }
.partner-item:nth-child(3) { animation-delay: 8s; }
/* Automatyczne dopasowanie grafiki do 300x100 */
.partner-item img {
width: 200px;
height: 100px;
object-fit: contain; /* Zachowuje proporcje logo, nie rozciąga go brzydko */
display: block;
transition: transform 0.3s ease;
}
.partner-item img:hover {
transform: scale(1.05);
}
/* Animacja płynnego pojawiania się i znikania */
@keyframes fadeCycle {
0% {
opacity: 0;
visibility: hidden;
}
5% {
opacity: 1;
visibility: visible;
}
28% {
opacity: 1;
visibility: visible;
}
33.33% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 0;
visibility: hidden;
}
}
/************** Partnerzy KONIEC ***********/