Tailwind CSS: Footer - część środkowa

0:00Zminimalizujemy tutaj

0:02ten pierwszy div i przejdziemy do drugiego wrappera, no i tutaj, co my tu mamy?

0:08Mamy głównie

0:10tak naprawdę napisy, które wyśrodkowane są na środku, tak że nie będziemy tutaj

0:14tworzyć żadnych specjalnie wrapperów na to, tylko spróbujemy ograć to tylko i

0:18wyłącznie za pomocą semantycznych znaczników h i p.

0:25Natomiast to muszą być linki.

0:26Dlatego myślę, że warto, żebyśmy od razu traktowali to jak linki.

0:32I tutaj w h3 pierwszy to mamy specialisations,

0:35ja sobie skopiuję ten tekst po prostu. Później pierwszy link

0:38tu mamy Graphic & Desing.

0:41Pokopiujemy tutaj te linki.

0:46Mamy 5 sztuk.

0:50Pozostaje nam skopiować tekst i wpisać w odpowiednie miejsce.

0:54No i widzisz, przypisałem sobie po prostu wszystkie wartości, które miałem tutaj.

0:57Teraz musimy sobie wszystkie te teksty wyśrodkować w tym samym wrapperze,

1:01czyli w tym elemencie, który opakowuje nam te wszystkie teksty.

1:07Możemy też sobie zrobić Flex-Items-Center,

1:11justify-center, już powinno nam się to ułożyć w środku.

1:18Przejdziemy tutaj do naszego kolejnego

1:20elementu na stronie to nie widać tego jeszcze dobrze.

1:25Natomiast musimy sobie na pewno dać tutaj

1:28flex-column, żeby te wszystkie napisy były pod sobą.

1:32Flex-col.

1:35I już mamy wszystko pod sobą.

1:37Nadamy jeszcze tekst o tej samej wartości, którą mieliśmy tutaj.

1:45No i już mamy nasze napisy widoczne.

1:47Teraz możemy skupić się na odpowiednim

1:51sprawieniu, żeby te przerwy między tymi napisami i style wyglądały poprawnie.

1:56Z tego co tu widać, to te pojedyncze linki nie wyglądają tak źle.

2:00Natomiast nagłówki musimy sobie poprawić. Sprawdźmy sobie wielkość nagłówka.

2:05To jest 24 piksele.

2:07Czyli teraz tak naprawdę możemy sobie

2:09złapać wszystkie te h3, zrobić class.

2:14No i, jak zapewne pamiętasz, text-lg

2:17to jest dokładnie tekst odpowiadający za 24 piksele.

2:22Jeszcze sprawdzimy dokładnie, a nie, xl, 2xl to jest 24 piksele.

2:30Font to będzie semi-bold, zapiszemy sobie.

2:35No i zobaczmy jak to teraz wygląda.

2:38Mamy już lepiej, teraz ten kolor trzeba zdecydowanie zmienić.

2:42Kolor nie jest taki jakbyśmy chcieli i kolory są FAFAFA, to jest zinc-50.

2:47Czyli tutaj przemieńmy sobie to na 50-tkę.

2:51Zapiszemy sobie.

2:54No i już mamy bliżej tego, co chcieliśmy uzyskać.

2:56Teraz te poszczególne linki są na pewno

2:59innym kolorem napisane, ale nie są tak wyraźne jak to wszystko.

3:02Także sprawdźmy sobie.

3:04E4E7E7.

3:05To jest prawdopodobnie zinc też

3:10ale pewnie wartość 100.

3:13E4E7E7 to jest dokładnie zinc-200.

3:16Czyli teraz wszystkie te linki,

3:18tak naprawdę jak byśmy budowali to w jakimś frameworku,

3:21moglibyśmy stworzyć sobie komponenty specjalnie przeznaczone do tego celu.

3:25Natomiast tutaj zrobimy sobie

3:29coś takiego, że ostylujemy sobie te

3:30wszystkie elementy, skorzystamy z multikursora i

3:37nadamy sobie tekst zinc-200. Zapiszemy.

3:42I przechodząc do naszej grafiki już mamy to bliżej tego, co byśmy chcieli uzyskać.

3:47I przejdźmy jeszcze do naszego designu.

3:50Sprawdźmy jaka jest dokładnie wielkość tego fonta, I to jest 16, czyli nie

3:54musimy nic zmieniać i odległości teraz tutaj pomiędzy,

3:59każdy z tych header'ów ma margin na top zauważ,

4:01o tej samej wielkości.

4:03Sprawdzimy sobie mniej więcej jaka to

4:05jest odległość tutaj i to jest około 40 pikseli.

4:09Czyli możemy sobie przejść teraz na h3 nasze, na klasy.

4:14Ja tutaj znowu skorzystamy z multikursora.

4:16Przytrzymując alt.

4:20I wpiszemy sobie margin top na 10. Zapiszemy i wróśmy do naszego designu.

4:28No i już jesteśmy praktycznie

4:31w tym miejscu, w którym chcieliśmy. Te nagłówki

4:33tutaj są za grube, dlatego możemy

4:35spokojnie sobie wrócić tutaj i ten semi-bold skasować.

4:42I już wygląda to już dużo lepiej.

4:44I sprawdźmy jeszcze, czy odległość między literami nie trzeba troszeczkę powiększyć.

4:50Nie, wszystko jest zrobione tak, jak powinno być.

4:55Czyli mamy już kolejne, jakby kolejną część tej sekcji.

4:59Tutaj widać, że jest jakby padding zrobiony tutaj na dole i pod spodem

5:06będziemy mieli zupełnie osobny element w tym footerze,

5:09który będzie miał też inne tło, dużo ciemniejsze niż cała reszta.

5:13Dlatego tutaj jest 40 pikseli.

5:15Możemy sobie teraz na ten globalny padding, w tym naszym divie,

5:19czyli to co mamy tutaj możemy sobie zrobić paddin- bottom.

5:24Ustawić go na razie na 10 tak żeby przesunąć całość.