Zbuduj własne portfolio z Tailwind CSS: Stopka

0:00Ostatnia sekcja, której poświęcimy swoją uwagę to jest sekcja.

0:03Tutaj jest stopka na naszej stronie, czyli pytanie:

0:06"Masz pomysł na projekt?". Nasz adres i poniżej linki do poszczególnych social

0:11mediów i na końcu prawa autorskie do strony.

0:16Przyjrzyjmy się temu, jak to wygląda.

0:17Generalnie rzecz biorąc na ekranie

0:19mobilnym jak widzisz nie mamy tego ozdobnika w postaci tej strzałki.

0:22Myślę, że to jest taka sama strzałka,

0:23którą mieliśmy tutaj po prawej stronie, dlatego.

0:26Ale możemy już przyjąć, że tutaj ten rząd będzie się składał z dwóch

0:30elementów na średnich ekranach i na dużych.

0:32Dlatego możemy już przyjąć taką strukturę.

0:35Tutaj warto byłoby pewnie zgrupować sobie

0:37te dwa elementy adres do jednej grupy i te linki do drugiej, bo

0:42z tego co widzimy tutaj, to przeskakuje po prostu na drugą stronę.

0:46Stylowanie tych poszczególnych elementów możemy dostosowywać do widoku, natomiast myślę,

0:51że warto, żeby te linki, te 6 linków social mediów było zgrupowane w jeden

0:55element i polityka prywatności i ta ulica Musza Olków

0:59w drugi element i tu na samym dole

1:01już mamy tak naprawdę tą politykę prywatności.

1:05Przejdźmy sobie do naszego kodu.

1:08I zaczniemy sobie implementować tę logikę.

1:10Otóż najpierw mamy jakiś duży napis.

1:14Możemy sobie zrobić span.

1:15Masz pomysł na projekt?

1:23Znak zapytania to jest jeden element.

1:26Pod spodem będziemy mieli kolejny element czyli też span.

1:30Natomiast widzimy, że tutaj będzie ta strzałka.

1:32Dlatego myślę, że możemy sobie od razu tutaj

1:34zacząć od wprapowania tego w div, bo będziemy musieli mieć dwa elementy.

1:39Jednym z nich będzie ten napis.

1:41Drugim elementem będzie strzałka.

1:43Możemy ją tutaj wrzucić nasze obrazki,

1:47arrow raigth.

1:48Skopiujemy sobie naszą strzałkę.

1:50Wrzucimy ją tutaj od razu

1:52i jeżeli chodzi o nasz p, tą strzałkę możemy sobie zminimalizować.

1:56Za chwilkę ją wystylizujemy, tak żeby ona nie pokazywała się na małych ekranach.

2:00Generalnie możemy to już teraz zrobić.

2:03Class mamy hidden.

2:06I na md zrobimy sobie block, żeby się strzałka już pokazywała.

2:12Czyli na małych ekranach na urządzeniach mobilnych nie powinno być widoczne.

2:16Jak teraz sobie przejdę no to widzisz, że tutaj jest widoczna ta

2:19strzałka, natomiast na urządzenie mobilne jak przełączę naszą stronę

2:23no to już strzałka nie powinna być widoczna i nie ma jej tutaj na dole.

2:27Dobrze, to mamy już za sobą.

2:30Kolejna rzecz, którą chcemy zrobić

2:32przejdźmy z powrotem tego naszego designu do edytora kodu.

2:35Tutaj ten tekst programistafrontend@gmail.com adres do

2:38współpracy. To wpiszemy sobie w tym miejscu.

2:47I spacja.

2:49Możemy sobie zrobić to w dwóch elementach p. Myślę, że tak

2:54będzie nam łatwiej to ostylować, bo

2:56widzimy, że za każdym razem jest to pod sobą.

2:59Czyli tu też kolejny element p i adres do współpracy.

3:08Za chwilkę zajmiemy się stylizowaniem tego elementu.

3:11Kolejne elementy to będzie ta grupa tutaj z adresem z polityką prywatności.

3:15Czyli możemy sobie tego div'a tutaj zminimalizować.

3:17Mamy element pierwszy, czyli te pytania, element drugi w postaci tych dwóch tekstów

3:22i miejsca tutaj na tą ikonkę po prawej stronie.

3:26Element trzeci, czyli to też będzie grupa.

3:29I tutaj możemy sobie zrobić też paragraf.

3:35I tutaj będzie ulica

3:36Musza

3:386.

3:40I pod spodem kolejny paragraf to będzie 41-905 Olkusz.

3:48To jest jeden z elementów, który potrzebujemy.

3:52I też możemy.

3:53Wrap with abbreviation div.

3:58I kolejny element to też niech będzie div.

4:01Tutaj potrzebujemy tylko jednego p w postaci polityka

4:07prywatności.

4:10Oczywiście później przerobimy sobie to na jakieś linki, bo prawdopodobnie powinny to

4:14być jakieś linki do jakichś zewnętrznych stron.

4:16Natomiast na chwilę obecną, jako że

4:18budujemy, scaffoldujemy sobie tutaj ten układ, to zostawimy to tak jak jest.

4:23Dobrze myślę, że mamy tą drugą grupę.

4:25Trzecia grupa to są linki do social mediów i tu możemy sobie wykorzystać.

4:31Naszą listę możemy sobie zrobić li.

4:38Albo jako że mamy tutaj po trzy elementy, może ułatwimy sobie sprawę i zrobimy po

4:42prostu div, do którego wrzucimy trzy elementy.

4:50Też niech to będą na początku elementy.

4:53Po prostu p, trzy razy. tutaj niech będzie Linkedin.

4:58Drugim elementem będzie Twitter.

5:01I trzecim elementem będzie GitHub.

5:07Możemy owrapować te elementy też w div

5:12i skopiujemy taką samą strukturę poniżej w tej grupie.

5:16I tutaj tylko podmienimy linki to będzie Dribble.

5:22Drugim elementem, drugim linkiem będzie

5:24Discord i trzecim linkiem, który sobie zrobimy będzie YouTube.

5:32Tu jest nasza grupa, czyli tak mamy grupę z linkami.

5:35To jest to, co jest tutaj.

5:36Mamy grupę z adresem i z polityką prywatności.

5:40I teraz tą grupę z adresem, z polityką

5:42prywatności i grupę z linkami możemy znowu sobie owrapować tutaj w div.

5:48No i mamy już pełną strukturę myślę, która przyda nam się do stylowania.

5:51Ostatnia rzecz, którą musimy sobie zaimplementować tutaj na samym dole.

5:55Niech to będzie span.

5:56W naszym przypadku 2023.

5:59Daniel Noworyta.

6:00Oczywiście Ty do swojego portfolio możesz sobie tutaj wstawiać swoje dane.

6:05Teraz przejdźmy do stylowania na widok

6:07mobilnym i zaczniemy sobie od tego napisu i w ogóle od tła tego elementu.

6:12To jest zinc-950 czyli footer.

6:15Cały footer musi mieć tło na zinc-950 czyli class=bg-zinc-950.

6:25To już jest jedna rzecz, którą udało nam się zaimplementować.

6:28Dodatkowo możemy ustawić na padding na x na 4 domyślnie.

6:32Jako że to jest na widoku mobilnym, dobrze. To już sprawdźmy sobie jak to wygląda.

6:37Mamy ustawiony, no tekstu żadnego nie widzimy

6:40z tego względu, że musimy zmienić domyślne kolory.

6:42Domyślny kolorem tekstu na naszej stronie jest taki ciemny, dlatego też tutaj

6:46po prostu one na siebie wpadają i nic nie widzimy.

6:49Nie masz żadnego kontrastu pomiędzy nimi.

6:50Dlatego przejdźmy do tego pierwszego tekstu.

6:53Mianowicie masz pomysł na projekt, ja sobie

6:55to zminimalizuje tutaj, żebyśmy tylko widzieli poszczególne wartości.

6:59Jak wielkie są te czcionki.

7:01To nam się przyda tutaj w stylizowaniu.

7:03I teraz tak masz pomysł na projekt?

7:05Mamy 24 pixele, regular czyli span class

7:10text i szukamy wartości na xl powinno być 20, czyli 2xl to jest 24 pixele.

7:15Zobacz InteliSense nam bardzo fajnie tutaj podpowiada. Mamy 24 pixele regular.

7:22Reszta może zostać tak jest. Dobrze.

7:24Teraz kolejna rzecz, którą musimy wystylizować to te dwa napisy.

7:27I tutaj mamy, też Tailwind CSS

7:29przychodzi nam z pomocą.

7:30Myślę, że style będą tak naprawdę podobne.

7:33Tych dwóch napisów mamy 24 pixele regular, z tym, że mamy tutaj kolor pomarańczowy i

7:39napis ma być podkreślony, tak? Czyli class=text

7:45może najpierw zaczniemy od orange-600.

7:48Underline

7:52i text- 2xl to jest 24 pixele.

7:56Zapiszę to sobie, sprawdźmy naszą stronę jak już wygląda.

7:58No już mamy ten napis.

8:00Wygląda dużo, dużo lepiej.

8:02Sprawdźmy sobie ten svg, który tutaj mamy i mamy klasę hidden.

8:07Jako, że mamy tutaj już jesteśmy na rozdzielczości md,

8:11to sobie zmniejszymy troszeczkę nasz ekran do tego, żeby to była wielkość

8:16na telefony komórkowe i sobie ten edytor kodu już możemy myślę rozszerzyć.

8:22Sprawdźcie kolejną rzecz.

8:23Tutaj ulica Musza Olkusz.

8:25Mamy font 16 regular roboto, czyli nie musimy nic ustawiać domyślnie.

8:29To jest taki font, tylko musimy zmienić kolor tych wszystkich napisów.

8:34Czyli wejdźmy sobie do

8:37tego div'a, który tutaj wszystko wrapuje i możemy zaznaczyć tutaj tekst.

8:41Jako, że tekst jest inherited to powinniśmy móc napisać zinc tutaj 400 i w tym momencie

8:47wszystkie teksty powinny nam się odpowiednio tutaj wystylizować.

8:52Przynajmniej nadaliśmy im kolor i dodatkowo font jest regular.

8:56Wszystko jest w porządku.

8:58Myślę, że teraz możemy przejść do tych

9:00poszczególnych grup i zacząć je stylizować.

9:02Zobaczmy jak to teraz na chwilę obecną wygląda.

9:04No nie ma tutaj żadnych przerw.

9:06Tutaj jeszcze ten tekst.

9:07Potrzebujemy nadać mu kolor, czyli text-zinc-50,

9:13główny tekst na naszej stopce i zmierzmy sobie odległości najpierw.

9:19najpierw ustalimy sobie może globalnie na naszą stopkę.

9:22Padding na top i padding na bottom.

9:24Zaczniemy od padding'u, na bottom to jest

9:26zawsze łatwiej tutaj zmierzyć, bo on się nie zmienia przez cały czas.

9:30Czyli tutaj mamy ok.

9:3235 powiedziałbym około 40 pixeli, czyli

9:36footer padding na bottom 10 i już powinno nam to odsunąć wszystko od dołu.

9:42Mamy teraz ten Daniel Noworyta 2023.

9:46Też sobie możemy tutaj od razu zrobić

9:48color=text-zinc i analogicznie do tego 400.

9:53Zapisujemy sobie, mamy naszą stopkę.

9:57Może rzeczywiście żeby wyróżnić tą stopkę na tle tych linków wszystkich, które mamy

10:01tutaj, no to tutaj zastosujemy jednak ten główny kolor zinc-50.

10:05I przejdźmy teraz do pudding'u na top.

10:08Jak zobaczymy sobie nasz design to tutaj padding na top.

10:13Mamy w postaci około 80 pixeli, czyli 20.

10:17Przejdźmy sobie do naszego footer'a pt.

10:2120 zapisujemy i odsunęliśmy sobie

10:25teraz masz pomysł na projekt na dół.

10:27Teraz kolejna rzecz, którą musi od siebie

10:29odsunąć to na pewno tutaj ten napis programistafrontend@gmail.com

10:32musimy odsunąć od tego napisu.

10:34Masz pomysł na projekt?

10:36Sprawdźmy sobie teraz tą odległość.

10:37Być może będziemy w stanie ją zmierzyć.

10:39To jest 28 pixeli, czyli ten div tutaj, który nam wrapuję.

10:45Masz pomysł na projekt? I tą strzałeczkę

10:49możemy sobie zrobić klasa margin-top na

10:54ustawmy sobie na razie na 8. Sprawdźmy jak to będzie,

10:59no już fajnie

11:00odsunęło nam się tutaj i teraz zajmijmy się stylizowaniem tych elementów.

11:04Otóż na pewno poszczególne grupy linków

11:07musimy ustawić koło siebie, czyli grid-cols

11:13na 3.

11:15Sprawdźmy, jak już te linki się tutaj nam ustawią.

11:17Oczywiście nie girt, tylko grid.

11:21Zapisujemy sobie, no już linki mamy ustawione dużo ładniej.

11:24Sprawdźmy nasz design.

11:26Musimy teraz odsunąć od siebie te dwa

11:28elementy, czyli tutaj class name możemy zrobić space y.

11:36Czyli odsuniemy od siebie dwa div'y, które są na powiedzmy 4

11:43pixele.

11:44No już odsunęliśmy od siebie te dwa elementy.

11:46Wygląda to podobnie tak jak w naszym designe.

11:48No i całość to tutaj też te dwa elementy musimy od siebie odsunąć.

11:52Czyli tutaj też możemy sobie robić klasę

11:54space-y-4 też udało nam się odsunąć,

12:00natomiast chcemy tę klasę nie zrobić na ten element, tylko chcemy ją zrobić tutaj,

12:05na ten główny element, który odsunie nam politykę prywatności i całą tą resztę.

12:10Dodatkowo potrzebujemy odsunąć tą politykę prywatności od tego adresu tutaj e-mail.

12:15Mianowicie to jest też 24 pixele, czyli tutaj ten element padding top na 6.

12:23Zapisujemy to sobie, sprawdźmy naszą, no już udsunęliśmy sobie

12:27fajnie, tak jak to jest na tym designie.

12:29Jeszcze widzę, że te teksty są jednak troszeczkę jaśniejsze.

12:32Czyli przejdźmy sobie może na zinc-300.

12:34Myślę, że to wygląda dużo lepiej.

12:36I teraz też potrzebujemy o tę samą

12:38odległość przesunąć całą naszą grupę tutaj.

12:41Czyli padding top-6 możemy sobie nadać

12:45tutaj też na ten element, odsuwamy całą

12:48grupę naszych linków i końcowy tekst ma być center.

12:54I możemy sobie ustawić od razu padding y na 4 w naszym przypadku żeby odsunąć 2023.

13:03Po zamianie tutaj span'a na p czyli na emmet liniowy

13:06możemy tutaj już to wyśrodkować sobie i z tym py zostawiłbym tylko p-top, bo już py mamy ustawione

13:13przez cały nasz wraper. No mamy jakby mobilny widok naszej stopki.

13:19Teraz przejdźmy do widoku na tablety i na ekrany desktopowe.