Landing page / Kampanie wielokanałowe / HTML i CSS
Year
2026
Role
Frontend / HTML / CSS / Landing page
Tools
HTMLCSSWebPAnimacje CSS
Landing page AGD dla trzech sieci handlowych.
Dla Gorenje kodowałem landing page prezentujące całą ofertę AGD oraz kampanie promocyjne i konkursowe. Ten sam materiał powstawał w osobnych wersjach dla RTV EURO AGD, Media Markt i MaxElektro — każda sieć ma własne wytyczne, własny kontener i własne ograniczenia techniczne.
DesktopMobile
Jedna kampania, kilka sieci
Landing page ogólne AGD w wersjach dla różnych sieci handlowych, kampania konkursowa odkurzaczy serii NEO z formularzem zgłoszeniowym i strona z przełącznikiem wariantów kolorystycznych.
Każdy kanał ma własne zasady
RTV EURO AGD, Media Markt i MaxElektro różnią się wytycznymi co do szerokości, dozwolonych tagów i osadzania grafik. Dla klienta wszystkie wersje mają wyglądać tak samo.
Warianty zamiast kopii
Zamiast kodować każdą wersję od zera przygotowałem jedną bazę modułów i wyprowadziłem z niej warianty per sieć. Dołożenie kolejnego kanału to wariant, nie nowy projekt.
Przełącznik bez JavaScriptu
Zmianę wariantu black or white zrobiłem na samym CSS, żeby działała także tam, gdzie skrypty są ograniczone.
05. Live preview
Podgląd strony w dużym formacie
Kadry pokazują landing page ogólne AGD przygotowane dla różnych sieci handlowych, kampanię konkursową oraz przełącznik wariantów kolorystycznych zrobiony w czystym CSS.
Wersja online niedostępna publicznie
Gorenje
Powiększ ↗
Powiększ ↗Powiększ ↗Powiększ ↗
06. Project structure
Zakres
Kodowanie HTML i CSS
Landing page ogólne AGD
Warianty per sieć handlowa
Kampania konkursowa
Interakcje w czystym CSS
Wersje mobilne
Detale
RTV EURO AGD, Media Markt, MaxElektro
Przełącznik black or white
Konkurs serii NEO
Sekcja where to buy
Co z tego powstało
Marka mogła wejść z tą samą kampanią do kilku sieci handlowych bez kodowania każdej wersji od podstaw. Wspólna baza modułów sprawiła, że dołożenie kolejnego kanału było kwestią wariantu, a nie nowego projektu.
Powiększ ↗
Powiększ ↗
Powiększ ↗
Powiększ ↗