Strona docelowa
Stos technologiczny:
HTML5: Semantyczna struktura strony.
CSS3 (Vanilla CSS): Stylizacja, responsywne układanie (Media Queries), niestandardowe właściwości (CSS Variables) do zarządzania schematem kolorów i czcionkami.
JavaScript (ES6+): Logika interakcji (menu, zmiana nagłówka podczas przewijania, aktywne linki).
ScrollReveal: Biblioteka do tworzenia płynnych animacji pojawiania się elementów podczas przewijania.
Google Fonts (Poppins): Nowoczesna typografia.
Główne sekcje i funkcjonalność
Nagłówek i nawigacja:
Responsywne menu (Mobile First).
Efekt scroll-header: zmiana tła nagłówka podczas przewijania strony.
Aktywne linki: panel nawigacyjny podświetla odpowiednią sekcję w zależności od pozycji przewijania.
Sekcja główna (Hero):
Główne zdjęcie słuchawek z efektem pojawiania się.
Opis produktu i przycisk "Dodaj do torby" z ceną.
Użycie tekstu gradientowego dla nagłówków.
Sekcja sponsorów:
Logotypy partnerów lub marek umieszczone w responsywnej siatce.
Sekcja specyfikacji:
Szczegółowe informacje o parametrach technicznych (Bluetooth 5.2, Bateria 40h, Szybkie ładowanie, wsparcie Siri).
Wizualizacja specyfikacji za pomocą ikon SVG.
Sekcje etui i zniżek:
Blok o etui ochronnym.
Blok promocyjny z interaktywną animacją i przyciskiem "Kup teraz".
Sekcja produktów:
Karty produktów w różnych kolorach (Czarny, Czerwony, Srebrny, Zielony, Niebieski).
Każda karta zawiera zdjęcie, nazwę, cenę i przycisk zakupu.
Stopka:
Linki według kategorii (Produkty, Wsparcie).
Formularz subskrypcji na nowości.
Ikony mediów społecznościowych i prawa autorskie.
#Landing #HTML-developer
HTML5: Semantyczna struktura strony.
CSS3 (Vanilla CSS): Stylizacja, responsywne układanie (Media Queries), niestandardowe właściwości (CSS Variables) do zarządzania schematem kolorów i czcionkami.
JavaScript (ES6+): Logika interakcji (menu, zmiana nagłówka podczas przewijania, aktywne linki).
ScrollReveal: Biblioteka do tworzenia płynnych animacji pojawiania się elementów podczas przewijania.
Google Fonts (Poppins): Nowoczesna typografia.
Główne sekcje i funkcjonalność
Nagłówek i nawigacja:
Responsywne menu (Mobile First).
Efekt scroll-header: zmiana tła nagłówka podczas przewijania strony.
Aktywne linki: panel nawigacyjny podświetla odpowiednią sekcję w zależności od pozycji przewijania.
Sekcja główna (Hero):
Główne zdjęcie słuchawek z efektem pojawiania się.
Opis produktu i przycisk "Dodaj do torby" z ceną.
Użycie tekstu gradientowego dla nagłówków.
Sekcja sponsorów:
Logotypy partnerów lub marek umieszczone w responsywnej siatce.
Sekcja specyfikacji:
Szczegółowe informacje o parametrach technicznych (Bluetooth 5.2, Bateria 40h, Szybkie ładowanie, wsparcie Siri).
Wizualizacja specyfikacji za pomocą ikon SVG.
Sekcje etui i zniżek:
Blok o etui ochronnym.
Blok promocyjny z interaktywną animacją i przyciskiem "Kup teraz".
Sekcja produktów:
Karty produktów w różnych kolorach (Czarny, Czerwony, Srebrny, Zielony, Niebieski).
Każda karta zawiera zdjęcie, nazwę, cenę i przycisk zakupu.
Stopka:
Linki według kategorii (Produkty, Wsparcie).
Formularz subskrypcji na nowości.
Ikony mediów społecznościowych i prawa autorskie.
#Landing #HTML-developer