19 – responsywna strona internetowa w html i css

Witryna „Eko-IT Solution”

Wykonaj responsywną stronę internetową prezentującą usługi firmy informatycznej zajmującej się odzyskiwaniem danych i ekologiczną utylizacją sprzętu.

1. Struktura plików i grafika

• Utwórz folder EKO_IT. Wewnątrz umieść pliki: index.html oraz styl.css.

• Przyjmij, że w folderze znajduje się obraz logo.png (możesz go zastąpić dowolnym symbolem tekstowym wewnątrz elementu <div>).

2. Wygląd strony (Układ)

Strona powinna składać się z następujących bloków:

1. Baner: na całą szerokość strony.

2. Panel lewy: menu nawigacyjne.

3. Panel prawy: treść główna (artykuł).

4. Stopka: informacje o autorze.

3. Opis struktury HTML

• Baner: nagłówek pierwszego stopnia o treści: „Serwis Eko-IT – Dbamy o Twoje dane i planetę”.

• Panel lewy (Nawigacja): lista nienumerowana z odsyłaczami:

  • Strona główna

  • Nasze usługi

  • Kontakt

• Panel prawy (Treść):

  • Nagłówek drugiego stopnia: „Odzyskiwanie danych”.

  • Akapit z dowolnym tekstem „Lorem Ipsum”.

  • Tabela o dwóch kolumnach: „Usługa” oraz „Cena”. Wpisz co najmniej 3 wiersze danych.

• Stopka: tekst: „Stronę przygotował: [Twój Numer PESEL]”.

4. Stylizacja CSS (plik styl.css)

Skonfiguruj arkusz stylów zgodnie z wytycznymi:

• Reset: marginesy i dopełnienia dla całej strony ustawione na 0.

• Baner: kolor tła #2e7d32, kolor czcionki biały, wysokość 100px, tekst wyśrodkowany w pionie i poziomie.

• Układ główny: wykorzystaj Flexbox, aby panel lewy i prawy znajdowały się obok siebie.

• Panel lewy: szerokość 25%, tło jasnoszare #f1f1f1, wysokość min. 400px.

• Panel prawy: szerokość 75%, padding 20px.

• Tabela: obramowanie o szerokości 1px, ciągłe, kolor czarny. Szerokość tabeli 100% obszaru roboczego panelu prawego. Wiersze parzyste powinny mieć tło #e8f5e9.

• Stopka: tło takie samo jak w banerze, tekst biały, wyrównanie do prawej strony.