Zbuduj własne portfolio z Tailwind CSS: Implementacja sekcji z projektami - 2

0:00Kolejną rzeczą, którą powinniśmy się zająć

0:02jest pojedynczy projekt, który pokazujemy tutaj na widoku mobilnym.

0:05Tych projektów mamy 3, są ustawione pod sobą.

0:08Zobacz, że później na widoku tabletów i mobilnym troszeczkę zmieniają się układy.

0:13Natomiast myślę, że jak rozpoczniemy sobie

0:15od zbudowania takiego jednego elementu i poszczególnych tych elementów składowych,

0:18myślę, że będziemy na dobrej drodze, żeby uzyskać też pojedyncze widoki.

0:23Czyli mamy nasz

0:25header i potrzebujemy teraz pojedynczego elementu z naszym projektem.

0:30I tutaj będzie div, który opakuje nasz image.

0:33Jeżeli chodzi o source

0:34to ja już sobie skopiowałem obrazki i w pierwszy projekt niech to będzie pocketsub.png

0:42możemy sobie zrobić tutaj alt pocketsub. Zapiszemy go sobie.

0:47Obrazek już powinien się wczytać na naszej stronie.

0:49Dodatkowo będziemy potrzebowali jakąś tutaj h1, h2, w naszym przypadku

0:56nazwę projektu i jakiś paragraf, który powie nam co to za projekt.

1:00Krótki opis, który chcemy też wyświetlić na naszej stronie.

1:03Zapiszemy sobie ten element.

1:05To jest jakby główny element naszego projektu.

1:07Jeszcze pod spodem tutaj pod tym p musimy zawrzeć tą ikonkę linku i link do naszego

1:13projektu, czyli tu też prawdopodobnie będziemy musieli svg plik opakować.

1:17Ja sobie tutaj zrobię notatkę svg i pod spodem niech to będzie link, który odnosi nas do

1:25packetsub.com. I to jest jakby pojedynczy element.

1:30Przejdźmy sobie do naszej strony.

1:31Zobaczmy czy już jakoś to wygląda.

1:33No tekstów na razie nie widzimy z tego

1:35względu, że nie mamy ich odpowiednio wystylizowanych.

1:37Czyli zajmijmy się może od stylizacji tych tekstów.

1:41Może najpierw zaczniemy od tego.

1:43Sprawdźmy, jaka to jest wielkość czcionki.

1:4416 Czyli mamy base semibold jeżeli chodzi

1:47o tą h2 czyli klasa font-semibold text-orange 600.

1:57I tutaj mamy odległość do góry jest 16 pixeli, czyli możemy zrobić na padding na

2:03top na 4 odsuniemy to i padding na bottom zrobimy sobie na 1.

2:11To pozwoli nam odsunąć od reszty tekstu ten tekst.

2:14Tutaj mamy 12 regular czyli class

2:19i text-xs to będzie coś odpowiedzialne za 12 pixeli.

2:24Widzimy, że w Tailwind'zie xs.

2:26Domyślnie ten font size jest 12 pixeli. Zapiszemy to sobie.

2:29Przejdźmy do naszej strony, zobaczmy.

2:31Tekstu jeszcze nie widzimy z tego względu, że musimy tutaj nadać kolor zinc

2:37niech to bedzie w naszym przypadku 400. No i mamy

2:39ta intuicyjna platforma zmienia sposób zarządzania cyklicznymi płatnościami.

2:45Jest jeden problem z tym obrazkiem.

2:47Musimy sobie zacząć go tutaj stylizować, czyli zróbmy sobie tutaj klasę i width full,

2:54relative.

2:59Overflow zrobimy na hidden.

3:01Na razie tak, przejdźmy do stylowania obrazka.

3:04Class absolute inset-0, żeby umieścił się

3:09w środku tego div'a. Width na full i h też na full. Aspect

3:17square to samo nadamy tutaj aspect square na nasz wrapper.

3:23No i już mamy nasz obrazek.

3:24Jeszcze przydałoby się to zaokrąglić

3:25bardziej, bo z tego co wiem to na designie mamy, no nie mamy tutaj

3:29w sumie, nie mamy żadnych zaokrągleń

3:31większych, czyli możemy sobie to zostawić bez zaokrągleń, bez zaokrąglania,

3:36przepraszam. Mamy ten pierwszy element za sobą.

3:39Jeszcze tutaj nam brakuje pod spodem tej ikonki.

3:43Czyli ja sobie teraz ją wyeksportuje z Figmy i po chwili tutaj po wyeksportowania z pliku z

3:48Figmy wkleimy sobie tą ikonkę tutaj już powinniśmy ją mieć też w naszym projekcie,

3:54mamy. Natomiast jeszcze tekstu nie widać z tego

3:56względu, że tekst nie ma odpowiedniego koloru, czyli class text-zinc 50

4:04w naszym przypadku już widzimy to no i msimy ostylować odpowiednio wrapper na tę

4:09ikonkę, którą mamy tutaj w postaci tego pliku, tego kodu svg i blokowego linku A,

4:15czyli to jest element liniowy, to mamy ikonkę.

4:19Myślę, że tutaj możemy zadziałać sobie flex gap

4:24na 4 i już mamy wystylizowany ten element tutaj.

4:28Możemy sobie wyśrodkować to wszystko, czyli justify-center.

4:33I potrzebujemy jeszcze py ustawić na 4,

4:36żeby odsunąć ten element od całej reszty tego projektu.

4:39Dobrze.

4:39Mamy pierwszy projekt, teraz myślę, że możemy zająć się skopiowaniem reszty

4:45projektów tak żeby odzwierciedlić dokładnie ten widok.

4:49Ja sobie to zrobię tutaj już poza ekranem.

4:51Tobie też polecam po prostu skopiować ten pierwszy komponent pod sobą i pozamieniać

4:56odpowiednio dane. Po odpowiednim skopiowaniu tych elementów u Ciebie

4:59powinny pojawić się tutaj 3 elementy.

5:01Tak jak u mnie mamy bliźniaczo podobne komponenty tutaj w tym przypadku tylko w

5:06pierwszym mamy ten link do strony pocketsub, natomiast w każdym kolejnym nie mamy.

5:11Musimy sobie jeszcze tutaj je od siebie odsunąć.

5:13Także teraz, w tym momencie możemy

5:14wykorzystać sobie tylko i wyłącznie poodsuwać te elementy od siebie na takiej zasadzie, że

5:19jak mamy drugi element tutaj, to nadamy mu po prostu klasę padding bottom na 4.

5:25W tym momencie odsunie nam to od tego opisu.

5:28I tutaj ten element też zostawimy sobie na razie tak jak jest.

5:31Potrzebujemy jeszcze tutaj

5:33dodać kolejny element, bo mamy w designie zobacz więcej link z tą strzałeczką,

5:39która jest po prawej stronie, czyli ten element tutaj

5:42potrzebujemy sobie dodać na koniec, czyli span zobacz więcej i poniżej tego span'u,

5:49ja teraz wkleję sobie ten arrow w postaci

5:53pliku svg. Już po wklejeniu sobie zapisaniu tego.

5:57Musimy sobie teraz tylko ustawić te elementy koło siebie.

5:59Czyli flex gap ustawimy sobie na 6.

6:05Items center.

6:07Justify też na center, żeby wyśrodkować ten napis z tą strzałką.

6:11Przejdźmy do naszej strony internetowej.

6:12Zobaczmy jak to teraz wygląda.

6:15Mamy napis, który jest jeszcze niewidoczny

6:17z tego względu, że musimy sobie włączyć tutaj text-zinc-50 i font-semibold.

6:27Sprawdźmy samibold czy bold mamy tutaj?

6:30Jest to bold.

6:31Zmienimy sobie tutaj na bold, no i już.

6:36Jeszcze teraz odsuniemy sobie ten element, czyli nadamy mu padding na y na 4.

6:41Odsunie on od topu i od dołu naszej sekcji.

6:44Czyli już mamy mobilny widok naszej sekcji z wybranymi projektami.

6:48Tutaj też myślę warto byłoby odsunąć ten pierwszy element, czyli class

6:54padding top na 4, żeby zwiększyć tą odległość tutaj od tego napisu.

6:59Tak, to tyle.

7:00Teraz przejdziemy sobie do stylowania responsywnego tej sekcji.