GENIUS
GENIUS — Strona docelowa kursu edukacyjnego
Strona docelowa według projektu z Figma z nowoczesnym designem, akcentami na CTA i wyraźną strukturą. Użyto HTML, CSS i JavaScript bez zewnętrznych frameworków.
Technologie
HTML5
CSS3
JavaScript (timer, scroll, logika zmiany cen)
Zadanie techniczne
Tworzymy wersję na PC 1:1 jak na projekcie, wersję mobilną można zrobić responsywnie samodzielnie, ale aby wyglądała świetnie. (dla wersji mobilnej jest osobno narysowany blok „Program kursu”).
Dwie przyciski „Zapisz się na kurs” w pierwszym bloku prowadzą płynnie scrollując do pakietów „Format uczestnictwa”, na przyciskach umieszczamy płynne animacje ze zmianą tła przycisku z fioletowego na biały.
Blok „Program kursu”, każdy moduł płynnie otwiera się jako rozwijany element z dołu, można go rozwinąć i otworzyć klikając na blok „Moduł…”. Każda lekcja ma swój osobny opis (nazwy lekcji i opisy można wziąć z projektu i dla każdego modułu zrobić takie same). W każdej lekcji jest przycisk „Zarezerwuj miejsce na kurs”, który prowadzi do bloku z pakietami „Format uczestnictwa”.
Blok „Wybierz swój format uczestnictwa” ma timer do następnego piątku do 23:59, każdy punkt w formatach uczestnictwa, przy którym jest ikona, ma swoją podpowiedź po najechaniu, na każdy punkt można ustawić taką samą podpowiedź, która jest na projekcie. Przy cenach w tym bloku należy umieścić skrypt, który razem z timerem w wyznaczonej dacie automatycznie zmieni ceny, można zmienione ceny ustawić na 1 tys. zł więcej, i tak 4 razy. To znaczy, jeśli pakiet kosztuje 10080, to następna cena 11080, następna 12080 itd.
Blok „Raty” ma pośrodku deadline „Oferta ważna do:”, tam należy ustawić skrypt, który bierze dzisiejszą datę i dodaje +2 dni do tej daty.
Status wykonania
Wersja PC 1:1 z projektem
Płynny scroll i animacje przycisków
Rozwijane moduły programu
Podpowiedzi po najechaniu
Timer do piątku
Automatyczna zmiana ceny (4 etapy)
Skrypt rat (dodaje 2 dni do bieżącej daty)
Projekt nie używa zewnętrznych bibliotek ani frameworków
Cały kod napisany ręcznie z naciskiem na czysty kod i funkcjonalność.
Strona docelowa według projektu z Figma z nowoczesnym designem, akcentami na CTA i wyraźną strukturą. Użyto HTML, CSS i JavaScript bez zewnętrznych frameworków.
Technologie
HTML5
CSS3
JavaScript (timer, scroll, logika zmiany cen)
Zadanie techniczne
Tworzymy wersję na PC 1:1 jak na projekcie, wersję mobilną można zrobić responsywnie samodzielnie, ale aby wyglądała świetnie. (dla wersji mobilnej jest osobno narysowany blok „Program kursu”).
Dwie przyciski „Zapisz się na kurs” w pierwszym bloku prowadzą płynnie scrollując do pakietów „Format uczestnictwa”, na przyciskach umieszczamy płynne animacje ze zmianą tła przycisku z fioletowego na biały.
Blok „Program kursu”, każdy moduł płynnie otwiera się jako rozwijany element z dołu, można go rozwinąć i otworzyć klikając na blok „Moduł…”. Każda lekcja ma swój osobny opis (nazwy lekcji i opisy można wziąć z projektu i dla każdego modułu zrobić takie same). W każdej lekcji jest przycisk „Zarezerwuj miejsce na kurs”, który prowadzi do bloku z pakietami „Format uczestnictwa”.
Blok „Wybierz swój format uczestnictwa” ma timer do następnego piątku do 23:59, każdy punkt w formatach uczestnictwa, przy którym jest ikona, ma swoją podpowiedź po najechaniu, na każdy punkt można ustawić taką samą podpowiedź, która jest na projekcie. Przy cenach w tym bloku należy umieścić skrypt, który razem z timerem w wyznaczonej dacie automatycznie zmieni ceny, można zmienione ceny ustawić na 1 tys. zł więcej, i tak 4 razy. To znaczy, jeśli pakiet kosztuje 10080, to następna cena 11080, następna 12080 itd.
Blok „Raty” ma pośrodku deadline „Oferta ważna do:”, tam należy ustawić skrypt, który bierze dzisiejszą datę i dodaje +2 dni do tej daty.
Status wykonania
Wersja PC 1:1 z projektem
Płynny scroll i animacje przycisków
Rozwijane moduły programu
Podpowiedzi po najechaniu
Timer do piątku
Automatyczna zmiana ceny (4 etapy)
Skrypt rat (dodaje 2 dni do bieżącej daty)
Projekt nie używa zewnętrznych bibliotek ani frameworków
Cały kod napisany ręcznie z naciskiem na czysty kod i funkcjonalność.
Ukraina 
Gotowy do podjęcia pracy