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

0:00No dobrze, to przejdźmy sobie do zaimplementowania widoku na duże ekrany.

0:05Widzimy, że tutaj generalnie chodzi tylko o to,

0:07żeby zmienić sposób wyświetlania tych 3 elementów.

0:11No i tutaj też już nie możemy ograniczać szerokości tego napisu.

0:15Tylko musimy pozwolić mu, tak naprawdę rozszerzyć

0:17się maksymalnie na całą szerokość, jaka jest możliwa.

0:20Musimy tylko zadbać o to, żeby był

0:22ten napis tutaj wyśrodkowany i żeby te elementy też były wyśrodkowane.

0:26Przejdźmy do naszego kodu.

0:28I tutaj jest flex, który łapie nam

0:30wszystkie usługi, które przedstawiamy na naszej stronie.

0:36I tutaj na głównym wraperze musimy sobie ustawić na duże ekrany flex-row.

0:45Już to powinno zmienić sposób wyświetlania się naszych elementów.

0:48No jest ok.

0:49Natomiast no nie wyglądają te elementy dobrze.

0:52Dlatego teraz musimy zadbać o to, żeby

0:54odpowiednio się ten nasz element zwiększył.

0:57I tak zobaczmy sobie mamy.

1:02No tu wstawienie klasy max-width na none załatwiło nam sprawę.

1:07W tym momencie już nie ograniczymy tutaj

1:08wyświetlania się tych elementów i teraz możemy tutaj ten max-width none,

1:13musimy zamienić na wartość konkretną.

1:15W naszym przypadku niech będzie to 1280 pixeli.

1:18I w tym momencie już sekcje ustawione są dużo lepiej, natomiast mamy ciągle problem

1:23z ustawianiem się tych elementów w poszczególnych tutaj rzędach.

1:27Dlatego też przejdźmy sobie teraz do naszych rzędów.

1:29Mamy tutaj flex-column.

1:31Potrzebujemy przesunąć sobie te ikony tutaj na lewą stronę, czyli przejdziemy sobie do momentu,

1:38w którym określamy tutaj jak ma być wyświetlana ta ikonka.

1:42Tutaj mamy wraper, który odpowiada nam za wyświetlanie tej ikonki.

1:47Jako, że tutaj mamy items-center ustawione to możemy sobie na lg ustawić items-start,

1:55to już powinno przesunąć nam ikonkę tutaj w lewą stronę i to samo musimy

2:00sobie ustawić dla wszystkich elementów, które wykorzystujemy.

2:05Tu jest kolejny wraper na lg i kolejny wraper na lg flex-start już mamy

2:11usługi odpowiednio rozmieszczone.

2:14Sprawdźmy na nasz design jeszcze.

2:16Przydałoby się jeszcze odsunąć od siebie te ikony i od całej reszty, czyli na

2:20dużych ekranach możemy sobie złapać tutaj ten element, w którym

2:26mamy tą ikonkę, czyli wszystkie elementy gdzie shadow-zinc-400.

2:31Margin bottom, tak. Odsuwamy element od całej reszty. No 8 jest jednak za dużo.

2:36Wróćmy do 4. Myślę, że to będzie dużo lepsze tutaj rozwiązanie.

2:39No i tutaj jeszcze jest jedna rzecz, nad którą

2:42musimy zadbać, czyli to ograniczenie szerokości naszego napisu.

2:46Przejdźmy sobie teraz do Visual Studio Code.

2:49I tutaj jeżeli chodzi o max-width

2:53600 pixeli, to na dużych ekranach jednak max-width none

3:01i już w tym momencie ten napis powinien nam się tutaj rozciągnąć na całą dostępną szerokość.

3:06Czyli teraz jak wrócimy do wyświetlania tutaj w środku mamy tak jak chcieliśmy wcześniej no

3:10i na urządzeniach mobilnych też wszystko, tak naprawdę gra tak jak powinno.

3:17Dobrze, to tyle do sekcji usługi.

3:19Teraz kolejna sekcja, którą mamy w naszym designie, czyli sekcja opinii.

3:23Tutaj sprawa będzie dosyć prosta, bo mamy

3:26tylko jeden typ wyświetlania i na końcu przejdziemy sobie jeszcze do footer'a,

3:30do implementacji tej stopki dla naszej strony.