Szkielet HTML
W tym materiale stworzymy własną galerię zdjęć opartą na flexboxie, który poznaliśmy wcześniej. Podstawową zaletą będzie dynamiczne dostosowywanie się do rozmiaru okna przeglądarki. Poniższe punkty dotyczą szkieletu strony www więc zaczynamy jak zwykle na spokojnie 😉
- Uruchom codesandbox i stwórz nowy projekt.
- Dodaj następujący tytuł strony “Galeria Flexi”.
- W ciele dokumentu dodaj nagłówek h1. Umieść w nim następujący tytuł: “Galeria”.
- Pod nagłówkiem dodaj diva z klasą “flex-row“. W nim dodaj trzy div-y z identycznymi klasami: “element flex-1“.
- Pod zamknięciem diva “flex-row“, dodaj kolejnego diva z klasą: “inside-container“. W nim dodaj diva z klasą “flex-row“. W środku umieść dwa divy z identycznymi klasami: “element flex-1“.
Kolejne klasy. Element “inside-container”
Kolejnym etapem będzie nadanie nowych klas dla obrazków i utworzenie kolejnych elementów zagnieżdżonych. Będą wykorzystywały metodę “flex-direction” umożliwiającą wyświetlanie elementów kolumnowo, dzięki czemu stworzymy środkową część galerii.
- W divie o klasie “inside-container” stwórz trzy divy o klasach “flex-column flex-1“.
- W pierwszym i trzecim divie z klasą “flex-column” zagnieźdź po dwa divy o klasach “element flex-1“.
- W drugim divie z klasą “flex-column” utwórz trzy divy z klasą “element” (bez klasy “flex-1“), drugiemu z nich dodatkowo dodaj klasę “element-big“.
- Każdemu elementowi z klasami “element” dodaj odpowiednią klasę “img-x“, gdzie “x” to numer elementu (wg kolejności).
Stylowanie
W tym kroku będziemy ustalać wygląd wcześniej utworzonych kontenerów. Użyjemy w tym celu właściwości, które zapanują nad kierunkiem wyświetlania i zawijania elementów.
- W pliku style.css na samej górze dodaj dwanaście obrazków z internetu. W tym celu utwórz dwanaście reguł “img-X” gdzie “X” to kolejny numer. W regule dodaj właściwość “background-image: url(“link zdjęcia”);”.
- W kolejnej regule “element” nadaj 90px wysokości, marginesy o wielkości 5px, border-radius: 5px, background-position: center; oraz background-size: cover;.
- Stwórz selektor grupowy dla klas inside-container, flex-column oraz flex-row i nadaj im właściwości: display: flex; oraz flex-wrap: wrap;.
- Dla flex-column utwórz regułę zawierającą właściwość flex-direction: column;
- Utwórz selektor dla flex-1 i nadaj mu właściwość flex: 1;
Stylowanie – ciąg dalszy
Ostatnim etapem będzie stylowanie pozostałych elementów takich jak body, nagłówka, oraz ustawienie wysokości środkowego obrazka. Dodamy również efekt najechania kursorem na obrazek, tzn. stan hover.
- Dodaj regułę dla body. Ustaw właściwość z dowolnym kolorem tła.
- Utwórz regułę dla h1. Nadaj jej właściwość font-family: ‘Open Sans’, sans-serif; text-align: center, color: dowolny; oraz czcionkę na 40px.
- Stwórz regułę dla element-big i nadaj jej właściwość height: 180px;
- Utwórz regułę dla elementów o klasie element podczas najechania kursorem na element body i nadaj mu opacity: 0.3;
- Ostatnim krokiem będzie stworzenie selektora :hover dla elementów o klasie element będącymi potomkami elementu body i nadaj mi właściwość opacity: 1; i cursor: pointer;
Takim o to ćwiczeniem chciałbym zakończyć ten rozdział😉 Mam nadzieję że spodobało Wam się powyższe zadanie podsumowujące flexa w praktyce.
W środę przed wigilią opublikuję kolejny zakres materiału z Planu nauki Frontend Developera. Pierwszy materiał z nowego rozdziału opublikuję 30 grudnia📅😉
Życzę Wszystkim Wesołych Świąt🎅🎄☃❄
Zapraszam do subskrypcji 🔽 i polubienia mojego blogowo/usługowego ▶ fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA