Kod na Sponsorów i Partnerów

[xZANDARMx]

Jak Uzyskać taki kod na partnerów ? to proste !
 

Spoiler

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 ***********/