Założyciel Sieci xZANDARMx Opublikowano 11 Stycznia Założyciel Sieci Udostępnij Opublikowano 11 Stycznia 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 ***********/ Odnośnik do komentarza https://psychofrags.pl/topic/610-kod-na-sponsor%C3%B3w-i-partner%C3%B3w/ Udostępnij na innych stronach Więcej opcji udostępniania...
Rekomendowane odpowiedzi