Struktura strony HTML

Nadszedł czas na ćwiczenie, podsumowujące kilka poprzednich materiałów. Będzie to prosta strona internetowa. Zaczynajmy‼😉

1. Uruchom nowy projekt w codesandbox.
2. Stwórz podstawowy szkielet strony www (deklarację). Nie zapomnij dodać linka do pliku style.css.
3. W ciele dokumentu dodaj nawigacje z trzema odnośnikami – O mnie (#about), Oferta (#offer) i Kontakt (#contact). W nawiasie podaje prawidłową kolejność znaczników (nav -> ul -> li -> a).
4. Pod nawigacją dodaj sekcję (section) z klasą “container” oraz identyfikatorem “about”. W środku umieść nagłówek h1 z treścią “O mnie”. Pod nim dodaj paragraf z przykładowym tekstem.
5. Pod zamknięciem powyższej sekcji utwórz kolejną sekcję. Również dodaj do niej klasę “container”. Tym razem identyfikator będzie inny – “offer”. W środku umieść nagłówek h1 z treścią “Oferta”. Pod nagłówkiem dodaj tabele (table), nagłówek (thead), wiersz (tr) oraz cztery komórki nagłówka (th) z przykładowymi zawartościami. Pod zamknięciem nagłówka dodaj ciało tabeli (tbody), wiersz (tr) oraz cztery komórki tabeli (td) z przykładowymi zawartościami. Wiersze tabeli możesz skopiować kilkukrotnie, aby stworzyła się struktura tabelki z prawdziwego zdarzenia. Na koniec pozamykaj wszystkie znaczniki (tbody -> table -> section).
6. Pod zamknięciem powyższej sekcji utwórz kolejną sekcję. Również dodaj do niej klasę “container”. Tym razem identyfikator będzie inny – “contact”. W środku umieść nagłówek h1 z treścią “Kontakt”. Następnie dodaj 2 paragrafy z przykładowymi danymi. Na koniec zamknij znacznikiem sekcji.
7. Utwórz plik CSS – style.css
8. Dodaj import do czcionki Open Sans: @import url(https://fonts.googleapis.com/css?family=Open+Sans);
9. Utwórz regułę odnoszącą się do ciała dokumentu (body). W środku dodaj następujące właściwości: margines zerowy, przykładowy kolor tła oraz odniesienie się do czcionki zaimportowanej wcześniej (font-family: ‘Open Sans’, sans-serif;).
10. Dodaj kolejną regułę – .container i nadaj jej następujące właściwości: maksymalną szerokość kontenera na 700px oraz minimalną na 400px, szerokość na 80% oraz margines góra/dół 20px a boki na auto, biały kolor tła, padding na 15px, zaokrąglenie ramki na 5px oraz cień jedno-pikselowy w kolorze czarnym.