Zbuduj własne portfolio z Tailwind CSS: Implementacja sekcji z usługami na telefony

0:00Kolejna sekcja, której musimy poświęcić naszą uwagę.

0:03To jest sekcja z usługami.

0:06Tutaj mamy usługi, jakie nasz kandydat na programistę chce oferować.

0:12I mamy web development, konsultacje, mentoring, kanał na YouTubie.

0:16Przejdźmy teraz do naszego edytora kodu i zacznijmy implementację.

0:19Zauważmy jeszcze tylko, że to jest tutaj wyświetlane jakby w widoku kolumnowym.

0:24Tutaj musimy tylko flex przestawić i też prawdopodobnie zmienić te pojedyncze

0:29elementy, żeby poprzesuwać te ikony na lewą stronę.

0:31Tutaj wszystko jest na środku bardziej, tutaj bardziej na widoku

0:35mobilne mamy na środku.

0:37Tutaj teksty już przechodzą nam na lewą

0:38stronę i tutaj jeszcze ikonka przeskakuje jeszcze bardziej na lewą stronę.

0:42Na dole mamy tekst, którego też wielkość odpowiednio sobie dostosujemy.

0:49Przejdźmy więc do edytora kodu.

0:52Musimy sobie zminimalizować to wszystko.

0:56Sobie zminimalizowałem cały plik,

0:57tak naprawdę. Mamy tutaj podding i mamy projects.

0:59I teraz tutaj poniżej projects.

1:01Kolejna sekcja to będą usługi, czyli services.

1:07I zaczniemy od zbudowania ogólnego, ogólnej struktury tutaj naszych usług.

1:13Pierwsza rzecz, którą potrzebujemy, która już nam się rzuca

1:15w oczy tak naprawdę, potrzebujemy takiego samego header'a, jaki mieliśmy tutaj.

1:21Zapiszemy to sobie i teraz tuaj zamiast wybrane projekty, będziemy mieli usługi.

1:27Czy widzisz? Kolejna rzecz jakbyśmy korzystali tutaj z framework'a to

1:31ten kawałek byłby prawdopodobnie jakimś komponentem, do którego tylko wstrzykiwali

1:36byśmy za pomocą props'ów odpowiednie zmienne, które chcielibyśmy tutaj zmieniać.

1:41I tutaj z moją pomocą Twój kod nabiera, kariera nabiorą tempa.

1:47Ten tekst też sobie tutaj wkleimy w to miejsce.

1:52Zapiszę to sobie. Sprawdźmy naszą stronę

1:54internetową no i już tutaj nam się coś pojawia.

1:56Oczywiście musimy zmienić teraz

1:59kolor tekstu, tutaj skasować ten tezt zinc i text

2:02zinc 300 tutaj jest za jasnym kolorem.

2:07My musimy tu wykorzystać może z tekstu numer 600.

2:10Mamy usługi i takie

2:12podstawowy wygląd jest już tak naprawdę za nami.

2:15Wróćmy sobie do widoku mobilnego.

2:16Może na początek, żebyśmy mogli dokładnie go odwzorować.

2:21Mamy tutaj nasze usługi, poniżej

2:23potrzebujemy

2:253 elementy, które będą odpowiadały za usługi, które nasz kandydat tutaj oferuje.

2:33Mamy taką ikonkę, która jest kółkiem i mamy jakiś taki efekt shadow.

2:37Dodatkowo w środku jest ikonka takiego globusa.

2:40Czyli na razie jakby

2:43zakodujemy to sobie jako

2:44prosty div tutaj w środku, czyli najpierw element, wrapujemy cały element div.

2:49Kolejny to jest ten div z ikonką.

2:51Gdzie tutaj sobie możemy na razie zakomentować icon.

2:57Poniżej tego div'a z ikonką będziemy mieli

2:59jakąś h2 też i możemy sobie wpisać web development.

3:05I poniżej h2 mamy jakiś paragraf.

3:10Do którego przekopiujemy sobie tekst z naszego designu.

3:14Zapiszemy to sobie wszystko. Już tutaj nam się coś pojawiło.

3:18Wystylizujemy sobie najpierw może tą ikonkę.

3:20Ja sobie już skopiowałem tutaj ikonki do folderu mojego.

3:24Wszystkie te ikonki znajdziesz, jakby

3:26w materiałach dodatkowych do tego warsztatu.

3:29I nas interesuje ikonka związana z web dev.

3:35Czyli to jest to.

3:36Ja sobie skopiuje po prostu wartość svg i wkleimy sobie to już tutaj.

3:42I nasz div teraz sobie będziemy musieli

3:43odpowiednio wystylizować, bo jak sobie zapiszemy to

3:46zobacz, że mamy tutaj jeszcze nic nie widać.

3:49Najpierw zróbmy sobie tutaj wyświetlanie na flex, items-center i flex-column.

3:58Żeby to wszystko było pod sobą. Mamy już tutaj na środku tą naszą ikonkę, natomiast

4:02jeszcze nie widzimy tego fajnego efektu, który daje nam ten cień. Tak, że

4:05Przejdźmy teraz do wykorzystywania utility classes, tak żeby skorzystać tutaj

4:10z tego dobrodziejstwa. I najpierw zrobimy sobie shadow-lg na ten element.

4:15Na razie nie widzimy nic.

4:17Taki malutki shadow.

4:19Zróbmy sobie może xl.

4:22Będzie bardziej widoczny.

4:25Kolor możemy nadać.

4:28Zinc-950.

4:31Zobacz, że jest ten shadow dużo bardziej widoczny teraz.

4:34Prawdopodobnie nie będziemy potrzebowali aż takiego wyraźnego tego cienia.

4:38Tak, że na 600 wystarczy.

4:40Musimy sobie zaokrąglić ten element, czyli rounded full.

4:43To musi być kółko,

4:44koniec końców. No i padding ustawmy sobie na początek na 4.

4:49No już wygląda to dużo lepiej.

4:51Tak jak podobnie to co mamy w designie.

4:53Myślę, że na chwilę obecną możemy sobie

4:55zostawić to jak to tutaj wygląda, czyli zminimalizujemy sobie ten div.

4:59Jeżeli chodzi o tą h2 sprawdźmy sobie jaka

5:01jest wielkość tu ekranach mobilnych 24 semibold i ten pomarańczowy kolor, który

5:06używamy w naszym projekcie. Czyli klasa text

5:11to będzie xl.

5:142xl przepraszam.

5:16Text-orange-600.

5:19I font-semibold.

5:21Zapisujemy to sobie. Sprawdźmy.

5:24No już web development wygląda dużo lepiej.

5:26Tutaj ten cień jest jeszcze troszkę jak dla mnie za wyraźny.

5:29Czyli możemy sobie tutaj przejść i zmienić kolor na może z zinc-400, no wygląda dużo

5:35lepiej, web development mamy już tutaj ostylowanie.

5:39Teraz jeżeli chodzi o

5:41ten paragraf sprawdźmy sobie wielkość tej czcionki jest 16 regular, czyli mamy text bases

5:49ustawiony też na 16, czyli nie musimy tutaj nic zmieniać.

5:53Kolejna rzecz, którą musimy zrobić, to

5:54oczywiście musimy jakoś wyśrodkować ten element, nadać mu padding'i.

5:58I jak to zrobić?

6:01Otóż, najpierw oddzielimy od siebie wszystkie te elementy.

6:06Czyli zaczniemy od gap

6:08ustawmy najpierw na 4, żeby odsunąć od siebie te elementy.

6:11Jest jak najbardziej ok.

6:13Teraz jeżeli chodzi o to p na widoku mobilnym sprawdźmy sobie czy to ma jakąś.

6:19Ok, musimy nadać padding na nasz wrapper,

6:21czyli przejdźmy sobie tutaj do głównego wrapera naszej sekcji i klasa px ustawimy sobie na 4.

6:29Już to powinno nam przesunąć odpowiednio ten napis do środka.

6:33Myślę, że pierwszy element mamy już za sobą.

6:35Teraz możemy powielić te elementy, skopiować sobie poniżej.

6:39To będzie element numer 2.

6:42Już sobie zamienimy treść.

6:43Zobaczmy tutaj na naszym designie.

6:44Druga treść to jest konsultacje i mentoring.

6:48Skopiujemy sobie ten tekst tutaj do naszego pliku.

6:52To już nie jest web development, ale konsultacje i mentoring.

6:55I jeżeli chodzi o tekst opisu, to będzie coś takiego.

7:02I kolejny element, 4 już na naszej liście.

7:08Tutaj jeszcze musimy podmienić sobie naszą ikonkę, czyli tam plik svg.

7:12W tym przypadku będziemy potrzebowali work, czyli backpack.

7:20I svg wkleimy sobie tutaj w inne.

7:22Sprawdźmy naszą stronę.

7:24Już mamy nasz backpack tutaj konsultacje i

7:26mentoring jest jak najbardziej w porządku.

7:28I kolejna rzecz, którą potrzebujemy, to potrzebujemy uaktualnić sobię

7:33ten ostatni element.

7:35Czyli ten, który mamy tutaj.

7:37Sprawdźmy na nasz design kanał na YouTubie.

7:43I opis.

7:48I dodatkowo oczywiście.

7:52Video svg zamiast naszego backpack'a, który wkleiliśmy wcześniej.

8:00I już mamy kanał na YouTube'ie konsultacje i mentoring i web development.

8:06Jeszcze musimy sobie zmienić troszkę te teksty.

8:08Teksty powinny mieć padding,

8:09czyli wszystkie te paragrafy, które mamy z tej strony.

8:14Tutaj jest jeszcze jeden.

8:16Możemy też nadać klasę i px, ustawimy na 4 i wyśrodkować, tak?

8:23Text-center.

8:25Już jest to tak jak powinno być i teraz odsuniemy od siebie wszystkie te elementy.

8:28Czyli możemy sobie zminimalizować element

8:30ostatni, element przedostatni i pierwszy element.

8:34Jako że nie mamy tutaj żadnego wrapera

8:37pomiędzy nimi, co generalnie prawdopodobnie przyda nam się w

8:41przyszłości, czyli myślę, że nie będzie tutaj złym posunięciem,

8:43jak sobie to owrapujemy.

8:47Kolejny wraper i ten wraper tutaj

8:49nadamy mu odpowiednią klasę.

8:53Gap na 4.

8:57Flex.

8:59I flex- column.

9:01I już odsuneliśmy od siebie te wszystkie elementy.

9:03Myślę, że ten gap jeszcze możemy

9:05spokojnie powiększyć na 8 i całość od topu tutaj odbić,

9:10albo możemy też zrobić coś takiego.

9:13Mamy tutaj margin bottom na 12.

9:16Potrzebujemy przesunąć sobie ten element.

9:22Tutaj od góry.

9:23Czyli możemy zrobić coś takiego.

9:27Padding top na 4 przesunęło nam się w dół.

9:31Sprawdźmy jeszcze czy tutaj jest podobnie.

9:34Jednak jest troszkę większy ten padding na top.

9:36Zróbmy go na 8 pixeli 8 razy 4.

9:40Przepraszam. I margin bottom też domyślnie sobie

9:46ustawimy na 8 tutaj w tym komponencie, bo chcemy najbardziej przesunąć te ikonki.

9:50Myślę, że to już wygląda jak najbardziej w porządku.

9:53Sprawdźmy teraz.

9:55Przejdźmy teraz sobie do widoku na tablety z tą sekcja.