#20. Strona ze zdjęciami🖼

Cześć. Podsumujemy naszą wiedzę z tematyki budowy layoutu. Poniżej dodaję ćwiczenie do rozwiązania. Powodzenia

Ćwiczenie

1. Stwórz nowy projekt w codesandbox.
2. Stworzymy podstawowy szkielet strony HTML. Dodaj diva z klasą “hero”. W nim umieść nagłówek h1 z treścią”Witam!”. Zamknij diva.
3. Kolejnego diva dodaj z klasą “container”. Zamknij diva.
4. Pod nim dodaj diva z klasą “footer”. W środku utwórz paragraf z tekstem “©2020 All Rights Reserved”. Mamy utworzony szkielet
5. Kolejnym krokiem będzie dodanie kilku elementów wewnątrz kontenera. Będzie to panel z ikonami społecznościowymi, główna treść strony oraz panel boczny.
6. Aby dodać blok z social media należy wewnątrz kontenera dodać diva z klasą “social-media”. W nim dodaj trzy elementy . Następnie do pierwszego dopisz klasy “fa fa-facebook”, do drugiego “fa fa-twitter” a do trzeciego “fa fa-google-plus”. 
7. Koniecznie należy dodać w strukturze pliku html linka do ikon społecznościowych (dodaj pod linkiem do pliku css):
8. Kolejnym krokiem do wykonania jest dodanie sidebara. Pod zamknięciem diva social-media dodaj diva z klasą “sidebar”. W środku dodaj nagłówek h2 z tekstem “Kategorie”. Następnie pod nim dodaj cztery elementy z pustym odnośnikiem i dowolnymi nazwami kategorii zdjęć. Możesz zamknąć diva sidebara.
9. Główną część strony podzielimy na wiersze i kolumny. Struktura układu będzie przypominała tabele. W każdej kolumnie umieścimy po jednym elemencie . Pod zamknięciem sidebara dodaj diva z klasą “main”. Następnie w środku diva dodaj nagłówek h2 z tekstem “Nasze zdjęcia”. 
10. Pod tytułem dodaj diva z klasą “row”. W wierszu dodaj trzy divy z klasą “col”. W każdym z nich dodaj zdjęcie z internetu za pomocą: . Pozamykaj wszystkie divy.

11. Teraz zajmiemy się stylowaniem naszych elementów. Na początek zaczniemy od nadania styli elementowi z klasą “hero”. Dodamy tło oraz ostylujemy tekst znajdujący się wewnątrz elementu. 

12. Dodaj clearfix do styli:
    .clearfix:before,
    .clearfix:after {
    content: ” “;
    clear: both;
    display: block;
    }

13. Ciało strony ostyluj następującymi właściwościami: color ciemno czerwony, font-family: ‘Source Sans Pro’, sans-serif; margines zerowy, box-sizing: border-box oraz padding zerowy.
14. Zabierzemy się za nasz obrazek powitalny. Utwórz regułę .hero z następującymi właściwościami: wysokość 350px, dodaj przykładowy obrazek z internetu oraz go rozszerz na cały ekran czyli background-size: cover;
15. Następnym element to ostylowania to nagłówek h1. Utwórz regułę dla selektora h1. Dodaj do niego następujące właściwości: padding górny na 100px, wyśrodkowanie tekstu, kolor tekstu na ciemną czerwień, rozmiar nagłówka na 40px, duże litery – text transform: uppercase oraz margines zerowy.
16. Zaczynamy tworzyć layout strony korzystając z CSS. Chcemy nadać odpowiednią szerokość elementom i ustawiać ich właściwość float, aby stworzyć zadany układ strony. Ostylujemy też zdjęcia w elemencie z klasą main. 
17. Utwórz regułę dla klasy “container”. Ustaw w niej maksymalną szerokość strony na 700px oraz szerokość na 80%. Dodaj margines zerowy góra/dół, lewo/prawo – auto, aby kontener zawsze był wyśrodkowany.
18. Utwórz selektor “.main, .sidebar i ustaw właściwość float: right; 
19. Dla selektora .main ustaw width: 80%, a dla .sidebar ustaw właściwość width: 20%. 
20. Aby utworzyć układ kolumnowy głównej części strony musisz dla selektora .col ustawić float: left oraz width: 25%;
21. Dla selektora obrazków w elemencie z klasą “main” ustaw szerokość na 100%.
22. W pliku index.html do elementu z klasą “container” oraz elementów z klasą “row” dodaj pomocniczą klasę “clearfix”.
23. Następnie zajmiemy się ikonami społecznościowymi. Dodaliśmy już w strukturze html odpowiednie znaczniki. Aby załadować odpowiednie ikonki należy dodać w pliku css następujące odwołanie (w pierwszej linii pliku): @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,700,900&subset=latin,latin-ext);
24. Dodaj nową regułę .social-media, ustaw w niej pozycję na fixed, wypozycjonuj go używając właściwości: top: calc(50vh – 65px), left: 10px; zmień szerokość elementu na 40px.
25. Utwórz kolejną regułę: “.social-media i”, ustaw szerokość i wysokość na 40px, rozmiar czcionki na 20px, dla ikon zmień zaokrąglanie rogów na 50% oraz margines dolny na 5px. Ustaw także cursor: pointer; tło na kolor szary, wysokość linii (line-height) na 40px oraz wyśrodkowanie tekstu.
26. Przejdźmy do stylowania stopki oraz paska bocznego. W panelu bocznym ustawimy wyświetlanie blokowe dla linków. Stopce nadamy kolor tła, ustawimy stałą wysokość elementu oraz wyśrodkujemy napis.
27. Stwórz nową regułę: .sidebar a, ustaw w niej wyświetlanie blokowe (display: block).
28. Na koniec zostało dodanie media queries, aby nasza strona była responsywna i dobrze wyglądała na urządzeniach mobilnych. Dla rozdzielczości poniżej 500px bloki będą wyświetlać się na całą szerokość ekranu, jeden pod drugim. Dodamy również odstępy od krawędzi strony.
29. Na końcu pliku css dodaj: @media (max-width: 500px) {} aby dodawać właściwości dla ekranów poniżej 500px. Między klamerkami dodaj selektor .container i dodaj w nim właściwość width: 100%; oraz padding: 0 60px; następnie dodaj kolejny selektor .main, .sidebar i uzupełnij go o właściwości float: none, width: 100%.