20 – „Centrum Serwisowe”
Grafika (Praca z programem graficznym)
Wykorzystaj dostępny w systemie program graficzny (np. GIMP) i utwórz obraz według następujących wytycznych:
-
Wymiary: 800 pikseli szerokości na 200 pikseli wysokości.
-
Tło: Jednolite, w kolorze jasnoniebieskim (np.
#add8e6). -
Elementy graficzne: W lewej części obrazu umieść prosty kształt reprezentujący monitor (np. prostokąt z podstawką).
-
Napis: W centralnej i prawej części dodaj tekst: „Centrum Naprawy Laptopów”. Użyj czcionki bezszeryfowej, kolor tekstu: ciemnogranatowy (np.
#000080), rozmiar czytelny. -
Zapis: Zapisz gotowy obraz w formacie PNG pod nazwą
baner_serwisu.pngw folderze projektu.
Kodowanie (HTML i CSS)
Utwórz strukturę plików: folder projektu, w nim pliki index.html, styl.css oraz plik graficzny z poprzedniego etapu.
1. HTML (index.html)
-
Stwórz standardową strukturę dokumentu HTML5.
-
Wewnątrz sekcji
<body>utwórz kontener (np.<div>z klasąheader-container). -
Wewnątrz tego kontenera osadź obraz
baner_serwisu.png. Pamiętaj o atrybuciealtz opisem: „Baner nagłówka serwisu laptopów”. -
Poniżej obrazu dodaj nagłówek drugiego stopnia (
<h2>) z tekstem: „Zaufaj profesjonalistom”.
CSS (styl.css)
Skonfiguruj arkusz stylów, aby uzyskać następujący efekt:
-
Tło strony (
body): Jasnoszare (#f4f4f4). -
Kontener nagłówka: Wyśrodkowany na stronie (szerokość max 800px, marginesy automatyczne), z delikatnym cieniem (
box-shadow). -
Obraz: Musi być responsywny – dopasowywać się do szerokości kontenera, ale nie przekraczać swoich naturalnych wymiarów (zastosuj
max-width: 100%). -
Nagłówek
<h2>: Wyśrodkowany tekst, kolor granatowy, margines górny 15px.
