Tailwind CSS: Footer i budowa ostatniego elementu

0:00I teraz ten trzeci div, który będziemy

0:02mieli tutaj. Od razu ustalmy sobie tło, żeby to widzieć.

0:06To jest tło 1818B i to jest prawdopodobnie

0:09ten najciemniejszy zinc który mamy. Czyli weźmy sobie klasa,

0:15bg-zinc-900.

0:20Napiszmy sobie tutaj tylko te dwa napisy, żebyśmy wiedzieli, że cokolwiek to jest.

0:24Pierwszy to będzie The Eduweb Times.

0:25Możemy to H1.

0:30To jest tytuł naszej strony.

0:32Z tego samego korzystaliśmy u góry. I tutaj będzie kolejny napis,

0:35tu już może być p.

0:37Ja sobie skopiuję tutaj tą wartość tego designu.

0:43Zapiszmy sobie to i przejdźmy do naszego, do naszej implementacji, do naszej strony.

0:49Mamy już kolejny element.

0:50Jak widać tekst, no nie widać tego tekstu w ogóle.

0:53Sprawdźmy sobie kolor.

0:54Prawdopodobnie będzie to,

0:57tutaj mamy FAFA, a tutaj mamy A1A1,

1:00czyli w pierwszym przypadku The Eduweb Times to będzie 50'ka, a A1A1 to będzie 400.

1:08Przejdźmy sobie tutaj.

1:11Class=text-zinc-50 w tym przypadku, natomiast tutaj mamy 4'setkę.

1:18Tak? Tekst zinc-400.

1:23Zapiszmy sobie to.

1:26I już mamy elementy widoczne.

1:28Teraz ostylujemy dokładnie ten wrapper, czyli

1:31Flex-Items-Center, justify-Center na starcie.

1:39Oczywiście Flex-Column też by się tutaj

1:41przydał, bo chcemy żeby te elementy były pod sobą, flex-col.

1:46I teraz potrzebujemy odpowiednich odległości.

1:51Przejdźmy sobie tutaj na ten nasz design.

1:54Zmierzmy co miał na myśli nasz designer.

1:58W tym przypadku mamy około,

2:0420 pikseli i na dole

2:08troszkę większa wartość.

2:10Tu mam 24.

2:13Zróbmy sobie więc padding top,

2:17padding top na 5.

2:19Padding bottom na 6.

2:21Zapiszemy sobie. No i już te napisy od siebie, jeszcze sprawdźmy o ile są odsunięte.

2:29Dokładnie wymierzyć tę odległość, to jest około 24 pikseli też.

2:34Czyli możemy sobie tutaj na tą h1 nadać padding bottom na 6, 6x4=24.

2:44Już przechodząc teraz do naszej strony widzimy, że wygląda to dużo lepiej.

2:49Jedna rzecz, której potrzebujemy na pewno to zmienić czcionkę i to będzie

2:53analogicznie do tego, co mamy tutaj w naszym headerze.

2:55Czyli możemy się cofnąć, sprawdzić

2:57jakie my tutaj klasy używaliśmy do tego napisu i to jest font chomsky tracking-wider,

3:03możemy sobie skorzystać dokładnie z tych klas, bo to jest dokładnie ten sam widok,

3:07wygląd, który mamy, który powinniśmy mieć tutaj, teraz na naszą H1

3:11nadajemy sobie odpowiednią klasę, już mamy odpowiedni odpowiedni font zaaplikowany.

3:17Na pewno trzeba powiększyć ten napis na dole.

3:20Zobaczmy jaka to jest wielkość nadana.

3:23Tutaj mamy 24 piksele, czyli to będzie 2xl.

3:27Text-2xl,

3:2924 piksele. Zapiszemy sobie. No i już mamy odwzorowany

3:37tak naprawdę praktycznie cały wygląd oprócz tego co widzę tutaj.

3:40Brakuje nam tutaj tego paddingu na bottom.

3:44Sprawdźmy gdzie on się tak naprawdę podział.

3:49Tu mamy nasz flex.

3:54I w tym momencie mamy wszystkie nasze napisy.

3:57Nie mamy tutaj paddingu na bottom nadanego.

4:01A potrzebujemy.

4:03Sprawdźmy, czy tutaj te odległości też tutaj są troszeczkę za duże.

4:08Ja sobie teraz prześledzę,

4:13tu jest pierwszy, padding bottom na 10, jest ok.

4:16Teraz tutaj.

4:22Ten margin top 10

4:25jest troszeczkę niefortunny.

4:34I tutaj ostatni wrapper.

4:35Tutaj możemy sobie spokojnie nadać margin top 10.

4:41Zobaczymy jak to będzie.

4:43Przesuniemy to wszystko

4:45troszkę w dół. Wygląda to już dużo lepiej, natomiast tutaj ta odległość jest za duża.

4:49Sprawdźmy co tu się dzieje.

4:52Ach, mamy nadany padding bottom z tego elementu i jeszcze dodatkowo mamy

4:58tutaj z tego elementu, dlatego ten padding, bottom możemy sobie spokojnie ściągnąć.

5:03Wróćmy do tego elementu.

5:05Wyłączymy sobie padding bottom.

5:06No i już mamy naszą stopkę tak jak powinno być i tutaj jeszcze

5:10potrzebujemy sobie ją odsunąć od całej reszty naszej strony.

5:14Tak jak tutaj w tym designie też. jak sobie zobaczysz

5:17jest tutaj odległość, to będzie pewnie około 40 pikseli.

5:21Tak, dokładnie 40 pikseli.

5:23Czyli przejdźmy sobie tutaj na nasz footer i zrobimy mu margin top na 10.

5:29Zapisujemy stan. No i już tak naprawdę mamy odwzorowany cały design mobilny.

5:36Teraz przejdziemy sobie do implementowania

5:39styli responsywnych, czyli przejdziemy do implementowania całego wyglądu na tablety.

5:45Bo mamy tutaj design gotowy również na, na

5:49urządzenia, nie tylko na urządzenia mobilne, ale mamy też

5:52jak nasza strona powinna wyglądać na tabletach i jak nasza strona powinna

5:56wyglądać na desktopie, czyli na tych największych ekranach.

6:00Teraz pokażę Ci jak możesz przy pomocy

6:02utility classes stosować sobie style responsywne.