Tailwind CSS: Sekcja partnerów Eduweb

0:00Zaczniemy sobie teraz implementować tę sekcję z partnerami eduweb.

0:05Nie jest to jakaś bardzo skomplikowana sekcja.

0:08Skorzystamy tutaj też z grida, żeby przećwiczyć te Utility Classes na Grida.

0:12Mamy tutaj trzy kolumny.

0:14Tak że weźmy sobie sekcję.

0:18No i stwórzmy sobie najpierw ten pierwszy element.

0:20Może po prostu użyjemy obrazka?

0:23Ja tutaj już sobie dołączyłem obrazki

0:25odpowiednich partnerów eduweb, żeby móc z nich skorzystać.

0:32Ty te obrazki znajdziesz w materiałach dodatkowych w swoim kursie.

0:34Tak że znajdziemy, ja tutaj się już odwołam do obrazka.

0:39Mianowicie easycart i w tym momencie pojawiło nam się i easycart jedno logo.

0:46Potrzebujemy jeszcze na pewno eduweb partners, czyli pod tą sekcją zróbmy sobie div.

0:53Te wszystkie obrazki wylądują nam w tym divie, a my

0:57tutaj zrobimy sobie standardową h3 i eduweb partners. Zapiszemy sobie ten plik.

1:05Mamy już naszą h3.

1:07Możemy sobie style skopiować dokładnie z tego co robiliśmy wcześniej, czyli cały

1:11ten class możemy sobie skopiować i wkleić naszą h3.

1:16Będzie to wyglądało standardowo, podobnie do tego co mieliśmy

1:20wyżej na eduweb partners. I musimy też na sekcji nadać odpowiedni

1:25margin i padding, tak jak to wszystkie sekcje powyżej mają.

1:29Zróbmy to teraz.

1:31Dzięki temu odsuniemy sobie te eduweb partners.

1:34Możemy margin top troszeczkę zmniejszyć,

1:36bo jednak odległość jest tutaj w tym przypadku za duża.

1:39Zrobimy sobie dwójkę.

1:42I już mamy to przesunięte.

1:44Teraz wróćmy do naszych elementów.

1:45Wkleimy tutaj kolejne elementy, kolejne loga.

1:49Ja skorzystam po prostu z magii kina i pokopiuje to wszystko i wkleję odpowiednie linki.

1:54Udało mi się już skopiować wszystkie linki i wrzucić tutaj wszystkie nasze obrazki.

1:58I mamy teraz 6 obrazków pod sobą.

2:00Musimy sobie to ustawić w trzech rzędach.

2:03Czyli spróbujmy sobie od ustawienia grida.

2:08I zróbmy grid-col-3.

2:12Mamy 3 kolumny.

2:14Musimy sobie teraz całe to wszystko wyśrodkować.

2:18I co nam w tym pomoże to odpowiednio

2:19ostylowanie tych obrazków, żeby miały podobne wymiary.

2:23Przejdźmy teraz do naszego designu.

2:25Sprawdźmy ile tutaj mają te obrazki.

2:27W większości to jest 80 na 80.

2:29Możemy sobie najpierw ustalić taką wysokość i szerokość.

2:32Przejdźmy do naszych obrazków.

2:35Zróbmy sobie,

2:36skorzystajmy z multikursora

2:39I nadajemy klasy.

2:42I tutaj poszukajmy sobie 80 pikseli.

2:46I tu mamy width 20.

2:48Tak samo zrobiliśmy height 20.

2:50Zapiszemy to sobie. Jeszcze zrobimy sobie

2:52object-cover no i sprawdźmy teraz jak wygląda nasza strona.

2:59Już trochę lepiej wyglądają te wszystkie loga.

3:01Natomiast mamy projekty z logo make, czyli możemy sobie tutaj

3:06sprawdzić jak będzie wyglądało opcja contain w naszym przypadku.

3:14Już teraz nie ucina nam żadnych obrazków, tak że możemy teraz lepiej tym sterować.

3:20Tutaj możemy skorzystać z place-content-center,

3:23co pozwoli nam wyśrodkować. I place-items-center.

3:30Mamy items-center, mamy place-items-center, save.

3:34I już mamy wyśrodkowane rzeczy. Jeszcze sobie nadamy gap wielkości 3,

3:41w naszym przypadku, żeby odsunąć od siebie

3:42te loga. Sprawdźmy sobie jak to wygląda tutaj w oryginalnym designie.

3:46No, jest troszeczkę większy ten gap.

3:48Przejdźmy sobie tutaj.

3:50Zróbmy sobie ten gap na wielkość 6.

3:53Zobaczymy jak to wygląda.

3:56No i jeszcze troszeczkę za mało. 8.

4:00No już to wygląda troszeczkę lepiej.

4:02Sprawdźmy nasz design.

4:06Ciężko będzie zmierzyć odległości, bo te obrazki też nie są takie same.

4:10Natomiast możemy sobie przyjąć, że.

4:15Tu jest 49, czyli wszystko powyżej 44 jest do zaakceptowania dla nas.

4:21Sprawdźmy sobie ile to wynosi ta odległość na chwilę obecną.

4:26Jest troszeczkę za mała, bo mam powiększenie na 200%.

4:28Czyli zróbmy sobie gap, zróbmy sobie gap na Y,

4:36myślę, że tutaj gap=y-10 będzie odpowiednią wartością.

4:41Już mamy kolejną sekcję.

4:42Jeszcze oczywiście jedna rzecz,

4:44jak widzimy w designie, to wszystkie te obrazki generalnie są bez kolorów.

4:49Czyli znowu musimy sobie skorzystać z Grayscale

4:54i na wszystkie obrazki po prostu wziąć multikursor i wrzucić tutaj Grayscale.

4:58I zapisujemy to sobie.

5:01Mamy wszystkie obrazki poszarzone.

5:03I możemy przejść do ostatniego punktu naszego mobilnego designu, czyli stopki.