Steampunk Emporium — adaptacyjna strona docelowa z koszykiem
Projektowanie stron internetowych 590 PLN
Zadanie:
Stworzyć nowoczesny landing w stylu steampunk do sprzedaży produktów/atrybutów: responsywność na wszystkie urządzenia, SEO-optymalizacja, katalog z wariantami produktów, koszyk i składanie zamówienia w Telegramie z autouzupełnianiem.
Co zostało zrobione (w rzeczywistości realizacji w tym projekcie):
Pełna szata graficzna HTML/CSS/JS bez zewnętrznych bibliotek (vanilla JS).
Steampunkowa stylizacja: paleta mosiądzu/patyny, tekstury/cienie, elementy dekoracyjne.
BLOK HERO z animowanymi zębatkami (SVG):
Zęby (geometria zębów, oś centralna), opcjonalne gradienty i obrót w CSS.
Katalog z demo-nazwami: karty z obrazkiem, ceną, etykietą, selektorami opcji (kolor/rozmiar/materiał) i licznikiem ilości.
Koszyk (drawer): dodawanie/usuwanie produktów, zmiana ilości, podsumowanie; stan przechowywany w localStorage; licznik w nagłówku.
Składanie zamówienia w Telegramie: przycisk formuje zorganizowany tekst zamówienia (pozycje, warianty, ilość, suma) i otwiera czat t.me/ z wcześniej wypełnioną wiadomością.
SEO i semantyka:
meta-tagi (title, description, Open Graph, Twitter Card);
JSON-LD dla WebSite/Organization;
mikroformatowanie Product/Offer w kartach;
poprawne nagłówki/nawigacja; canonical.
Wydajność i UX:
responsywna siatka (mobile-first), lazy-loading obrazów;
atrybuty ARIA, klasa visually-hidden;
formatowanie waluty Intl.NumberFormat('pl-PL', 'PLN');
przyklejony nagłówek, płynne hovery, cienie, kompaktowy JS.
Technologie: HTML5, CSS3 (Flex/Grid), JavaScript (ES6), SVG, Schema.org (JSON-LD), Open Graph.
Wynik dla biznesu:
Lekki i szybki landing z wygodnym katalogowym UX i minimalnym tarciem przy zamówieniu: klient formuje koszyk i jednym kliknięciem wysyła zamówienie w Telegramie. Projekt podkreśla tematykę steampunk, a podstawa SEO jest gotowa do indeksacji.
*Ta praca jest dostępna do zakupu, a także możliwe jest indywidualne zamówienie dostosowane do Twoich potrzeb i w Twoim stylu.
Stworzyć nowoczesny landing w stylu steampunk do sprzedaży produktów/atrybutów: responsywność na wszystkie urządzenia, SEO-optymalizacja, katalog z wariantami produktów, koszyk i składanie zamówienia w Telegramie z autouzupełnianiem.
Co zostało zrobione (w rzeczywistości realizacji w tym projekcie):
Pełna szata graficzna HTML/CSS/JS bez zewnętrznych bibliotek (vanilla JS).
Steampunkowa stylizacja: paleta mosiądzu/patyny, tekstury/cienie, elementy dekoracyjne.
BLOK HERO z animowanymi zębatkami (SVG):
Zęby (geometria zębów, oś centralna), opcjonalne gradienty i obrót w CSS.
Katalog z demo-nazwami: karty z obrazkiem, ceną, etykietą, selektorami opcji (kolor/rozmiar/materiał) i licznikiem ilości.
Koszyk (drawer): dodawanie/usuwanie produktów, zmiana ilości, podsumowanie; stan przechowywany w localStorage; licznik w nagłówku.
Składanie zamówienia w Telegramie: przycisk formuje zorganizowany tekst zamówienia (pozycje, warianty, ilość, suma) i otwiera czat t.me/ z wcześniej wypełnioną wiadomością.
SEO i semantyka:
meta-tagi (title, description, Open Graph, Twitter Card);
JSON-LD dla WebSite/Organization;
mikroformatowanie Product/Offer w kartach;
poprawne nagłówki/nawigacja; canonical.
Wydajność i UX:
responsywna siatka (mobile-first), lazy-loading obrazów;
atrybuty ARIA, klasa visually-hidden;
formatowanie waluty Intl.NumberFormat('pl-PL', 'PLN');
przyklejony nagłówek, płynne hovery, cienie, kompaktowy JS.
Technologie: HTML5, CSS3 (Flex/Grid), JavaScript (ES6), SVG, Schema.org (JSON-LD), Open Graph.
Wynik dla biznesu:
Lekki i szybki landing z wygodnym katalogowym UX i minimalnym tarciem przy zamówieniu: klient formuje koszyk i jednym kliknięciem wysyła zamówienie w Telegramie. Projekt podkreśla tematykę steampunk, a podstawa SEO jest gotowa do indeksacji.
*Ta praca jest dostępna do zakupu, a także możliwe jest indywidualne zamówienie dostosowane do Twoich potrzeb i w Twoim stylu.