#12. Strona sklepu komputerowego

Ćwiczenie

1. Stwórz nowy projekt w codesandbox.
2. Wykonaj podstawowy szkielet strony (tytuł, link do stylów, itd…).
3. Między selektorami “body” dodaj div-a z klasą “header”. Kolejnego diva umieść z klasą “top”. Wewnątrz dodaj nagłówek “h1” z klasą “title”, np. “Sklep komputerowy”. Pod nim dodaj nagłówek “h2” z informacją “Witamy wszystkich serdecznie!”. Następnie dodaj przykładowy nagłówek.
4. Kolejno utwórz div-a z klasą “container”.
5. W środku dodaj nagłówek “h2” z zawartością: “Cennik”.
6. Dodaj całą strukturę tabeli, tzn. “table” ▶ “thead” ▶ “tr” ▶ “th” ▶ “tbody” ▶ “tr” ▶ “td”.
7. Następnie w nagłówku tabeli, między znacznikami “th” dodaj pozycje: “Nazwa produktu” oraz “Cena”.
8. Analogicznie dodaj w treści tabeli, tzn. “td” kilka pozycji sprzętu komputerowego oraz ich ceny.
9. Jeżeli nie stworzyłeś jeszcze pliku “style.css”, to zrób to teraz.
10. W pliku style.css dodaj wewnątrz selektora “body” deklarację: “font-family: ‘Lato’, sans-serif;”.
11. Utwórz do klasy “title” następujące deklarację styli: “font-family: ‘Raleway’, sans-serif;”, podkreślenie tekstu: “text-decoration: underline;” oraz spraw by czcionka została powiększona do 40px.
12. Na chwilę obecną nasza strona jest czarno biała. Pora na ożywienie, poprzez dodanie kolorów i grafiki, aby zachęcić do zainteresowania użytkowników naszą stroną. Tworzymy stronę sklepu komputerowego, więc ciekawym pomysłem będzie dodanie zdjęcia sprzętu komputerowego jako tło nagłówka.
13. Dodajmy do selektora body kolor tła: “background-color: lightblue;”
14. Następnie umieść przykładowe zdjęcie z internetu do klasy “header” właściwością “background: url(https://stacktips.pl/wp-content/uploads/2018/08/Sprz%C4%99t-komputerowy-%E2%80%93-w-sieci%C3%B3wkach-czy-przez-internet.jpg) 20% 60% no-repeat;” oraz wyśrodkujmy teskt: “text-align: center;”.
15. Pod dodanym obrazkiem dodaj właściwość, dzięki której nasze zdjęcie rozciągnie się na całą szerokość strony nie tracąc proporcji: “background-size: cover;”. Następnie dodaj: “padding: 100px 0;”, aby dodać “wolną” odległość od nagłówka.
16. Spraw, by tekst był bardziej czytelny. Dodaj półprzezroczyste tło i zmień jego kolor. Użyj selektora klasy “top” i wpisz w nim właściwość: “background-color: rgba(40, 160, 80, 0.8);”. Następnie dodaj padding o rozmiarze 10px.
17. Dodaj do klasy “container” tło w kolorze białym, padding na 50px oraz marginesy “50px auto”
18. Następnie spraw, aby szerokość kontenera klasy “container” wynosiła 80% pełnej szerokości strony. Maksymalną szerokość (max-width) ustaw na 700px.
19. Utwórz selektor wybierający jednocześnie wszystkie komórki nagłówka (table th) oraz ciała (table td) tabeli. Dodaj do niego deklarację obramowania: “border: 1px solid #00d382;”.
20. Aby zrobić przestrzeń w komórkach dodaj: “padding: 5px;”.
21. Stwórz selektor “th” i dodaj w nim deklarację “background: #00d382;”.
22. Spraw, aby po najechaniu kursorem na wiersz tabeli podświetlił się w kolorze. Należy dodać selektor z pseudoklasą “tr:hover” do którego dodaj deklarację “background: #00d382;”.
23. Dodaj ostatnie poprawki do strony – do selektora klasy “top” dopisz właściwość: “width: 80%; border-radius: 10px; oraz padding: 30px;“.
24. Stwórz selektor “table” i dopisz do niego właściwość: “width: 100%;”. Efektem będzie rozszerzona tabela na całą szerokość kontenera.
25. To na tyle😉 Dobrnąłeś do końca zadania👍💪 Zachęcam do dodawania dodatkowych zmian stworzonych przez Was stronach 😉