Ta strona wykorzystuje pliki cookie w celu prezentacji dopasowanych dla Ciebie treści. Możesz włączyć/wyłączyć obsługę plików cookies w swojej przeglądarce.

Dowiedz się więcej

Etap 4: Dokończenie reszty sekcji

Nasza strona obrasta w piórka! W ciągu trzech pierwszych części wyzwania stworzyliśmy trzy pełne sekcje. Przykładowe rozwiązanie:

Dzisiaj dodasz i ostylujesz resztę sekcji oraz stopkę. Wiesz już tyle o HTML i CSS, że powinno pójść bez problemu – do dzieła!

1. Fajny efekt niskim kosztem, czyli prosty efekt parallax

Efekt parallax na stronach internetowych zyskał w ostatnich latach wielką popularność. Mówiąc najprościej, efekt ten polega na tym, że elementy strony (np. tła) podczas scrollowania przesuwają się z różną szybkością, tworząc wrażenie głębi. W wyzwaniu dodamy podstawowy efekt parallax za pomocą tylko jednej linijki CSS. Na początku jednak stwórzmy nową sekcję na stronie.

Zadanie 1
  1. W HTML, w nowej linii, dodaj nową sekcję (<section>) o klasie statement.
  2. Wewnątrz tej sekcji utwórz <div> o klasie container.
  3. W tym divie utwórz znacznik <p> (bez żadnej klasy) i wpisz w nim jedno krótkie zdanie – cytat, motto, etc.
  4. Następnie w pliku CSS utwórz selektor dla naszej nowej sekcji: .statement. Nadaj temu selektorowi następujące style:
    • background-image: url('http://i66.tinypic.com/5a3oh.jpg');
    • background-repeat: no-repeat;
    • background-size: cover;
    • background-position: center center;
  5. Postępując tak samo jak w przypadku zdjęcia w sekcji “Splash”, znajdź nowy obrazek na stronie pexels.com i wstaw go jako background-image w selektorze .statement.
  6. Ostyluj treść tej sekcji: utwórz selektor .statement p. Nadaj mu .margin: 0;, a następnie samodzielnie zdefiniuj jego czcionkę, kolor, rozmiar, itp. Zdajemy się na Twoją kreatywność :) Porada: w tej sekcji dobrze wygląda tekst wyśrodkowany (text-align: center;).
  7. Czas na parallax! Wróć do selektora .statement i dodaj mu background-attachment: fixed;. Dzięki temu tło tej sekcji będzie nieruchome, podczas gdy reszta strony będzie się przesuwać.

2. Sekcja z cytatami

Dodamy teraz nieco więcej treści do naszej strony – będzie to kolekcja cytatów. W kolejnej części Wyzwania dodamy do niej animację.

Struktura sekcji z cytatami będzie bardzo podobna do struktury sekcji “Features” (pudełek z ikonkami).

Zadanie 2
  1. W HTML, w nowej linii, stwórz kolejną sekcję (<section>) o klasie quotes i identyfikatorze quotes.
  2. Wewnątrz tej sekcji utwórz <div> o klasie container.
  3. W tym divie utwórz nagłówek poziomu drugiego z klasą section-title. Wpisz w nim tytuł sekcji.
  4. Następnie pod nagłówkiem dodaj <div> o klasie quotes-wrapper.
  5. Wewnątrz diva quotes-wrapper utwórz <article> o klasie quote.
  6. Wewnątrz <article> wklej następujący kod:

    Jak widzisz, wewnątrz tagu <q> znajduje się treść cytatu, a wewnątrz tagu <footer> - jego autor.

  7. Stwórz kilka tagów <article> według wzoru powyżej, jeden pod drugim, podmieniając oczywiście treści cytatów i nazwiska autorów.
Zadanie 3

Dodajmy teraz kilka stylów do tej sekcji.

  1. Jeżeli chcesz zmienić tło całej sekcji, w CSS utwórz dla niej selektor i nadaj mu odpowiedni background-color. Może zdecydujesz się na nieco rozjaśniony $color-background (pamiętasz lighten)?
  2. Utwórz selektor .quotes-wrapper i nadaj mu margin: 72px 0 0 0;.
  3. Selektorowi .quote blockquote daj padding: 0 36px;, a selektorowi .quote footer - margin: 24px 0 0 0;.
  4. Jeżeli uważasz, że cytaty albo autorzy potrzebują zmiany koloru, czcionki lub innej właściwości, możesz zrobić to teraz :)

3. Galeria zdjęć

Jak pamiętasz z przykładowych realizacji projektu z pierwszej części wyzwania, nasz szablon zawiera galerię zdjęć, gdzie przy najechaniu na fotografię pojawia się jej tytuł:

image

Stworzymy teraz właśnie taką galerię!

Zanim przejdziemy do pisania kodu, przygotuj sobie zdjęcia do galerii. Galeria będzie wyświetlać 4 fotografie w jednym rzędzie, więc będziesz potrzebować 4 lub 8 (lub 12, lub 16...) obrazków. Możesz pobrać odpowiednie zdjęcia z pexels.com (wybierz rozmiar "Small" - nie chcemy ładować dużych obrazków, aby nie spowalniać niepotrzebnie strony). Wrzuć zdjęcia na https://postimages.org/ i przygotuj sobie ich adresy.

Zdjęcia gotowe? Super! Czas na HTML.

Zadanie 4
  1. W pliku HTML stwórz kolejną sekcję o klasie gallery i identyfikatorze gallery.
  2. Wewnątrz utwórz nagłówek poziomu drugiego z klasą section-title. Wpisz w nim tytuł sekcji.
  3. Pod nagłówkiem dodaj <div> o klasie gallery-wrapper.
  4. Wewnątrz tego diva dodaj tag <figure> z klasą gallery-item. To będzie nasze pojedyncze zdjęcie z opisem.
  5. W środku <figure> wstaw:

    Za pomocą tagu <img> wstawiamy w HTML obrazek. Jego atrybut src musi zawierać adres, pod którym obrazek jest dostępny w internecie.

    W tagu <figcaption> mamy tytuł naszego zdjęcia.

  6. Stwórz w swojej galerii tyle tagów <figure> według powyższego schematu, ile chcesz (pamiętając, by ich liczba była wielokrotnością liczby 4). Użyj w nich przygotowanych zdjęć, a każdemu zdjęciu nadaj krótki tytuł.

Jak widzisz, w sekcji “Gallery” nie użyliśmy diva z klasą container – tak ma być, nie jest to błąd.

Zadanie 5

Galeria jest już na miejscu – dodajmy jej teraz trochę stylów. Tutaj sprawa będzie dość skomplikowana, bo nasza galeria to złożony element.

  1. Zacznijmy od selektora section.gallery: nadaj mu padding: 60px 0 0 0;.
  2. Czas na gallery-wrapper, czyli klasę, w której umieściliśmy wszystkie zdjęcia. Stwórz dla tej klasy selektor w CSS i nadaj mu:
    • display: flex;
    • flex-wrap: wrap;
    • margin: 72px 0 0 0;
  3. Pora na style pojedynczego zdjęcia. Przypomnij sobie, jaką klasę miały tagi <figure> w naszej galerii i stwórz odpowiedni selektor w CSS. Następnie ostyluj go w następujący sposób:
    • position: relative;
    • margin: 0;
    • flex: 0 0 25%;
    • max-width: 25%;
    • text-align: center;

    Jeżeli nie chcesz, aby tytuł zdjęcia był wyśrodkowany, zmień wartość text-align.

  4. Pod tymi stylami dodaj kolejny selektor: .gallery-item img i nadaj mu display: block;, width: 100%;, height: 100%; oraz object-fit: cover;. Magiczna właściwość object-fit: cover; sprawi, że obrazki, niezależnie od swojej wielkości, zawsze będą wypełniać swojego diva-rodzica i nie zdeformują się przy zmianie szerokości strony. Warto zapamiętać tę sztuczkę!
  5. Chcemy, aby po najechaniu kursorem myszy na zdjęcie (tzw. hover) pojawiła się na nim półprzezroczysta warstwa (z angielskiego overlay) oraz tytuł. Stworzymy je teraz – na razie będą widoczne przez cały czas, abyśmy widzieli, na czym pracujemy, a na końcu dodamy kod odpowiedzialny za pojawianie się tych elementów dopiero na :hover.

    Na początku stworzymy overlay za pomocą znanego nam już pseudoelementu :after. Wstaw w swoim CSS poniższy kod:

    Aby overlay się pojawił, musisz jeszcze samodzielnie dodać do niego:

    • width: 100%;
    • height: 100%;
    • background-color (jeżeli chcesz, by był czarny, użyj wartości #000000;)
    • opacity, czyli przezroczystość. opacity przyjmuje wartości od 0 do 1, sprawdź więc, co się stanie, gdy nadasz tej właściwości wartość np. 0.1 lub 0.7. O właściwości opacity możesz przeczytać tutaj: https://cssreference.io/property/opacity/.
  6. Czas na ostylowanie tytułu zdjęcia. Stwórz selektor .gallery-item figcaption i nadaj mu:
    • position: absolute;
    • display: block;
    • width: 100%;
    • top: 50%;
    • transform: translateY(-50%);

    Następnie, już samodzielnie, popracuj nad jego wyglądem: czcionką, kolorem, wielkością i innymi stylami, tak, aby pasował do reszty strony.

Kiedy zarówno overlay jak i tytuł wyglądają jak należy, zmień w obu tych elementach display: block; na display: none; a w nowej linii CSS dodaj:

Gotowe!

4. Sekcja “Contact”

Ostatnią sekcją naszej strony będzie “Contact”. Umieścimy tam ikonki z linkami do profilów w mediach społecznościowych. Do tego celu użyjemy taga <ul>, o którym więcej przeczytasz tutaj: https://htmlreference.io/element/ul/.

Zadanie 6

Najpierw zbudujmy znaną nam już strukturę strony:

  1. Sekcję z klasą contact i identyfikatorem contact,
  2. <div>z klasą container,
  3. nagłówek <h2> z klasą section-title, zawierający tytuł sekcji.

Następnie pod nagłówkiem:

  1. Stwórz tag <ul> z klasą social-links.
  2. Wewnątrz tego taga stwórz kilka tagów <li> o następującej strukturze, jeden pod drugim: <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>

Będą to linki do profilów w social media w postaci ikonek. Jak widzisz, używamy tutaj znów FontAwesome. Znajdź na stronie FontAwesome ikonki kilku serwisów społecznościowych i umieść je na swojej stronie w stworzonych przed chwilą tagach <li>. Zamiast znaczka # w tagach <a> możesz wpisać linki do swoich profilów w social media, ale nie jest to obowiązkowe ;)

HTML gotowy!

Zadanie 7

W ramach stylowania sprawimy, że linki będą poziomą listą ikon z obramowaniem.

  1. Stwórz selektor .contact i wyśrodkuj w nim tekst za pomocą właściwości text-align.
  2. Przypomnij sobie, jaką klasę ma nasza lista <ul> i stwórz dla niej selektor w CSS. Dodaj jej list-style-type: none; i padding: 0;
  3. Aby ostylować właściwe ikonki, potrzebne będą dwa selektory: .social-links li i .social-links li a. Selektorowi .social-links li nadaj display: inline-block; i border: 1px solid $color-main;. Selektorowi .social-links li a natomiast: display: block;, width: 100%;, height: 100%;.

Reszta jest Twoim zadaniem! Selektorowi .social-links li nadaj width i height, line-height (pamiętaj, aby jego wartość była równa wartości height), rozmiar czcionki, border-radius, margin-right, aby odsunąć ikonki od siebie... Do selektora .social-links li a natomiast możesz dodać właściwość color, aby zmodyfikować kolor samych ikonek. Zachęcamy do eksperymentów!

Dla chętnych: nadaj ikonkom inny wygląd przy najechaniu kursorem, używając selektorów .social-links li:hover i .social-links li a:hover.

5. Stopka strony

Wszystkie sekcje są już na miejscu, dodajmy więc teraz naszej stronie stopkę. W stopce zazwyczaj umieszcza się informacje o tym, kto jest autorem strony.

Zadanie 8
  1. Pod ostatnią sekcją w HTML stwórz element <footer> z klasą page-footer.
  2. Stwórz w nim <div> o klasie container.
  3. W tym divie stwórz dwa elementy <p>, jeden pod drugim. W pierwszym wstaw ©, wciśnij spację, a następnie wpisz swoje imię. W drugim elemencie <p> wklej: Made with ♥ by <a href="https://kodilla.com" target="_blank">Kodilla</a>
Zadanie 9

Dodajmy też do stopki trochę stylów:

  1. W pliku CSS stwórz selektor dla stopki (przypomnij sobie, jaką klasę nadaliśmy elementowi <footer>). Nadaj mu kolor tła, rozmiar czcionki, padding (np. padding: 12px 0;) i, jeżeli masz ochotę, dowolne inne style.
  2. W kolejnej linii CSS stwórz selektor .page-footer .container i nadaj mu display: flex; oraz justify-content: space-between;.
  3. Dodaj selektor .page-footer p z właściwością margin: 0;.
  4. Jeżeli masz ochotę, dodaj więcej stylów do stopki lub jej elementów, używając poznanych właściwości.

Nie zapomnij zapisać swojej pracy, klikając button Save w edytorze.

Powodzenia!