Witryna internetowa „Kronika XX wieku”

Zadanie egzaminacyjne: Witryna internetowa „Kronika XX wieku”

Wykonaj witrynę internetową przedstawiającą galerię najważniejszych wydarzeń historycznych XX wieku. Wykorzystaj do tego celu język HTML oraz CSS.

1. Struktura plików:

• Utwórz folder o nazwie galeria_historyczna.

• W folderze utwórz plik index.html oraz arkusz stylów styl.css.

• Przyjmij, że obrazy znajdują się w podfolderze img pod nazwami: 1914.jpg (I wojna), 1945.jpg (koniec II wojny), 1969.jpg (lądowanie na Księżycu), 1989.jpg (upadek muru Berlińskiego).

2. Założenia struktury HTML (plik index.html):

• Nagłówek: Zawierający tytuł stopnia pierwszego: „Najważniejsze Wydarzenia XX Wieku”.

• Menu nawigacyjne: Lista nienumerowana z odnośnikami (kotwicami) do poszczególnych sekcji galerii.

• Główny kontener galerii: Sekcja o klasie gallery, zawierająca cztery bloki (np. figure lub div) dla każdego wydarzenia.

• Element galerii: Każdy blok powinien zawierać:

  • Obraz o wysokości ustawionej na 200px.

  • Podpis (np. figcaption) z rokiem i krótką nazwą wydarzenia.

• Stopka: Zawierająca tekst: „Stronę wykonał: [Twój Numer PESEL]”.

3. Założenia stylizacji CSS (plik styl.css):

• Tło strony: Kolor jasnoszary (#f4f4f4), czcionka Arial lub sans-serif.

• Nagłówek: Tekst wyśrodkowany, kolor czcionki granatowy (#000080).

• Układ galerii: Wykorzystaj model Flexbox lub Grid, aby elementy galerii układały się obok siebie (w rzędzie), a w przypadku mniejszych rozdzielczości przechodziły do nowej linii.

• Styl obrazów:

  • Ramka o szerokości 2px, ciągła, kolor szary.

  • Zaokrąglenie rogów (border-radius) na poziomie 10px.

  • Efekt po najechaniu myszą (:hover): lekka zmiana skali (transform: scale) lub zmiana przezroczystości.

• Stopka: Tło ciemnoszare, tekst biały, margines wewnętrzny (padding) 20px, tekst wyśrodkowany.

Ściąga:

1. html

<section class=”gallery”>
<figure class=”event”>
<img src=”img/1969.jpg” alt=”Lądowanie na Księżycu”>
<figcaption>1969 – Pierwszy człowiek na Księżycu</figcaption>
</figure>
</section>

2. css

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}

.event img:hover {
transform: scale(1.05);
transition: 0.3s;
border-color: navy;
}