Przygotuj dokumenty cw601.html oraz cw601.css zgodnie z wytycznymi poniżej.
Tło całej strony: #fff2e6
Tytuł strony: TAJNE 2020
Nagłówek pierwszego poziomu o treści: Imię, Nazwisko, Klasa/Grupa. Tekst wyśrodkowany
Ponizej...
BANER (w górnej części strony)
Wymiary: 1920x365 pikseli / tło przeźroczyste
Obraz animowany z formacie GIF (program GIMP)
Na obrazie pojawiające się kolejno elementy graficzne (minimum 5 z czego conajmniej 3 różne) oraz napis (literki)
Animacja zapętlona w nieskończoność
Kliknięcie na banerze przenosi nas na stronę główną projektu (do pliku cw601.html)
Obraz dostosowujący rozmiar do szerokości okna
Blok lewy (menu):
Wysokość: 350 pikseli / szerokość: 30%
Lista wypunktowana z elementami: Obraz 1, Obraz 2, Obraz 3
Każdy element listy jest odnośnikiem do strony: obraz1.html, obraz2.html, obraz3.html
Usuwamy widoczność znaczników listy
Formatowanie odnośników:
szerokość: 250 pikseli / wysokość 40 pikseli
Kolor tła zielony
Kolor liter złoty
Tekst wyśrodkowany
Po najechaniu kursorem myszy na obszar odnośnika pojawia się dodatkowo obramowanie linią ciągłą w kolorze czerwonym o szerokości 2 piksele
Blok prawy
Wysokość: 350 pikseli / szerokość: 70%
Po załadowaniu strony głównej widoczny wyśrodkowany tekst: TAJNE OBRAZKI
Powyższy napis o wysokości 150 pikseli z efektem cieniowania
Po wybraniu pliku obraz1.html:
Pojawia się okno dialogowe z napisem: Podaj tajne hasło
Jeżeli zostanie podane prawidłowe hasło (hasło: abc) to wyświetlony zostanie obraz anim1.gif, w przeciwnym wypadku widoczny jest jedynie napis (nagłowek poziomu drugiego) o treści: Podałeś będne hasło.
anim1.gif (GIMP)
Wymiary 400x400 pikseli
Tło przeźroczyste
Animowany czarny tekst: BRAWO
Na koniec zmienia się kolor tekstu na czerwony
Animacja zapętlona w nieskończoność
Po wybraniu pliku obraz2.html:
Widoczne dwa pola formularza opisane jako Podaj A i Podaj B
Poniżej przycisk Sprawdź
Klikniecie przycisku sprawdza czy suma liczb jest podzielna przez 3.
Jeżeli warunek jest spełniony to poniżej wyświetlony zostaje obraz anim2.gif sformatowany CSSem tak, że ma kształt okręgu
Jeżeli warunek nie jest spełniony to poniżej wyświetlony zostaje obraz anim2.gif w domyślnym kształcie.
anim2.gif (GIMP)
Wymiary 250x250 pikseli
Zmieniający się kolor wypełnienia: zielony, czerwony, niebieski.
Animacja zapętlona w nieskończoność
Po wybraniu pliku obraz3.html:
Widoczne dwa przyciski opsane jako: Pokaż i Ukryj
Po kliknięciu przycisku Pokaż zostaje wyświetlony obraz anim3.gif
Po kliknięciu przycisku Ukryj zostaje ukryty obraz anim3.gif
anim3.gif (GIMP)
Wymiary 300x300 pikseli
Obraz podzielony na cztery części (szachownica - 4 kwadraty) wypełniające się 4 różnymi kolorami
Animacja zapętlona w nieskończoność
STOPKA
Nagłówek poziomu trzeciego o treści: Lekcja 60-62 / 2020. Tekst wyśrodkowany.
Wysokość nagłówka: 60 pikseli. Tekst wyśrodkowany w pionie.