Zbuduj własne portfolio z Tailwind CSS: Stopka na tablety i desktopy

0:00Myślę, że kolejna rzecz, na której musimy

0:02skupić naszą uwagę to zbudowanie tego na ekrany większe w tym momencie.

0:08Na razie nie wygląda to tak jak ma wyglądać.

0:09Zobacz, że strzałka jest tutaj pod spodem.

0:13Musimy przejść i zająć się tutaj stylowaniem tego elementu.

0:16Tutaj mamy nasz adres i naszą politykę prywatności.

0:19Na razie sobie to zostawimy.

0:20Sprawdźmy sobie ten nasz

0:21div z naszą strzałką i generalnie rzecz biorąc na ekrany średnie.

0:26Musimy sobie tutaj ustawić flex.

0:29Zobacz już, że strzałka pojawiła się

0:30tutaj, natomiast adres do współpracy też jakby nie wygląda tak jak powinien wyglądać.

0:36No i teraz musimy sobie przemyśleć strategię,

0:39w jaki sposób oddzielimy te dwa, te dwie rzeczy tutaj od całej reszty.

0:45No bardzo prosto.

0:46Myślę, że możemy sobie owrapować te dwa elementy w div, czyli wrap with abbreviation

0:55div i to już powinno nam tak naprawdę zrobić w tym momencie robotę.

1:00Musimy przesunąć sobie tą strzałkę.

1:03I myślę, że warto jeszcze na md ustawić items center, żeby strzałka się troszeczkę tutaj przesunęła.

1:11I jeszcze sobie ustawimy gap na 4.

1:17Strzałka się tutaj przesunęła w prawą stronę.

1:19Sprawdźmy jak wygląda nasz design.

1:21Strzałka tutaj ma być równolegle prawdopodobnie z tym napisem tutaj.

1:26Także będziemy musieli sobie ją troszeczkę

1:28przesunąć do góry, żeby ją dobrze wypozycjonować tutaj z tym napisem.

1:34Przejdźmy do naszej strony internetowej.

1:36Mamy naszą strzałkę, która jest tutaj.

1:38Klasy są tutaj

1:40tej strzałki i transform, translate zrobimy na y.

1:47My potrzebujemy przesunąć ją oczywiście nie do przodu, tylko do tyłu.

1:52Sprawdzimy 40 pixeli jest to zdecydowanie za dużo.

1:55Spróbujemy sobie na 16.

1:58Myślę, że jest to jak najbardziej do zaakceptowania tutaj.

2:01Sprawdźmy jeszcze raz nasz design na Figmie jak to wygląda.

2:05No i tutaj poniżej musimy przesunąć jakby obok siebie

2:08teraz będą te dwa elementy.

2:10Te dwie grupy były pod sobą na ekranach

2:11mobilnych, a tutaj musimy je pokazać obok siebie.

2:14Czyli możemy przejść sobie do implementacji już

2:17tego drugiego elementu, gdzie mamy nasze grupy.

2:20I to jest tutaj mamy grupę numer 1 i grupę

2:23numer 2 i tutaj już na ekranach md możemy sobie ustawić na flex.

2:29Sprawdźmy, w jaki sposób to się będzie zachowywało.

2:31No już mamy grupy koło siebie.

2:34Teraz musimy zadbać o to, żeby odpowiednio je od siebie odsunąć.

2:38Te elementy, czyli na md justify-between.

2:43Myślę, że powinno nam też tutaj pomóc.

2:45I md width full. Odsunęliśmy od siebie te elementy.

2:50Teraz musimy zadbać o to, żeby te elementy

2:53tutaj między sobą też były odpowiednio przesunięte i odległość tutaj między tymi

2:57dwoma elementami też się odpowiednio powiększyła.

3:00Z tego względu, że widzimy, że tutaj jakby jest to przesunięte.

3:05Przejdźmy do naszej strony.

3:07Przejdźmy do implementacji i zobaczmy, w jaki sposób układamy na razie ten adres.

3:12Adres to jest narazie w porządku.

3:14Myślę, że więcej problemów tutaj

3:17sprawi nam ta część i tutaj musimy sobie przejść na ekrany na md i wprowadzić gap.

3:26Zacznijmy najpierw od gap'u 20 pixeli.

3:29Sprawdźmy w jaki sposób to wygląda.

3:30No już wygląda to dużo, dużo lepiej.

3:33Natomiast może zamiast gap-x zamiast gap sprawdzimy sobie space-x i tutaj

3:41zacznijmy od 20.

3:42No już widzę, że jest znaczna poprawa tego

3:45co tutaj mamy i myślę, że możemy sobie jeszcze space-y na md powiększyć.

3:53Czyli md-space-y.

3:58I to ustawimy sobie, nie wiem na,

3:59na razie spróbujemy

4:01mieliśmy 4 zróbmy na 8.

4:04No i wygląda to dużo lepiej, tak jak na naszym designie.

4:08Tak, że mamy już ekrany na tabletach.

4:12Sprawdźmy na figmie jak to wygląda.

4:13Myślę, że tutaj jeszcze ta odległość powinna być dużo, dużo większa.

4:16I tutaj pomiędzy tymi elementami też musimy zwiększyć odległość.

4:20Sprawdźmy na naszą stronę internetową jeszcze raz.

4:23No odległości są za małe, także tutaj te grupy z

4:28z tym tekstem, z adresem mamy tutaj czyli md

4:33padding na top ustalimy sobie na 20, żeby odsunąć to wszystko od siebie.

4:37Wygląda to dużo lepiej niż teraz.

4:39I padding na bottom.

4:42Też na 20, żeby odsunąć wszystko od siebie.

4:45Myślę, że wygląda to już dużo, dużo bardziej estetycznie.

4:49Sprawdźmy sobie naszą figmę.

4:52Myślę, że jak najbardziej możemy to

4:53zostawić tak jak jest i teraz zobaczmy jak to się zachowuje na dużym ekranie.

4:57Widzimy, że tutaj potrzebujemy wyraźnie

5:00wprowadzić jakieś ograniczenie, żeby te rzeczy się tam nie rozjeżdżały.

5:04Czyli wróćmy do naszego kodu i w momencie, w którym mamy footer,

5:09tutaj ten wraper na te teksty, które potrzebujemy, bo tylko to generalnie nam

5:14się tutaj nie zachowuje zbyt fajnie, to możemy sobie zrobić na max width

5:22na 7xl.

5:24Sprawdźmy w jaki sposób to nam się będzię zachowywało.

5:27No już dużo lepiej, tylko teraz będziemy

5:28potrzebowali wyśrodkować wszystko, co jest wewnątrz naszego footer'a.

5:33Możemy sobie owrapować tak naprawdę wszystko, co jest w naszym footerze, czyli wrap with

5:39abbreviation, div nadać mu klasę container i nadać mu klasę mx-auto.

5:47I już w tym momencie zobacz, że wszystko

5:49nam się fajnie wyśrodkuję, nawet na dużych ekranach.

5:52Natomiast jak przechodzimy na mniejsze ekrany.

5:53Też to wygląda w porządku.

5:55Jak przechodzimy na ekran mobilny.

5:58To też jak widzisz, że wszystko

5:59zachowaliśmy zgodnie z tym, co mieliśmy w naszym designie.

6:03Dobrze, myślę, że to tyle.

6:05Taką podstawową implementację mamy za sobą.

6:06Jeszcze za chwilkę krótkie podsumowanie.