Tailwind CSS: Sekcja reklamy - stylowanie wrappera i klasa uppercase

0:00Ustawienia odpowiedniego tych wszystkich elementów.

0:03Czyli wiemy na pewno, że,

0:06że będziemy potrzebować jednego,

0:09jednej części. To po lewej stronie ma być obrazek.

0:11Po prawej stronie ma być cała ta reszta.

0:13Dlatego najpierw zajmijmy się może tym.

0:15Tu mamy prawą stronę.

0:16To jest ten div.

0:18Lewa strona to jest ten div.

0:19Czyli tutaj na wrappera musimy ustawić klasę.

0:22Zapewne się domyślasz będzie to flex. I już

0:26jak sobie to zamienimy to już odpowiednio

0:28nam się tutaj zaczyna to wszystko wyświetlać.

0:31Teraz przejdźmy do tego elementu, w którym powiemy,

0:36najpierw ustawimy sobie te wszystkie

0:37gwiazdki koło siebie, czyli musimy otworzyć sobie tego diva.

0:40Mamy tutaj wszystkie gwiazdki, czyli w tym momencie tutaj class też flex.

0:46Mamy gwiazdki już ustawione koło siebie.

0:48Teraz już możemy zająć się powolutku,

0:52stylowaniem tego wszystkiego, rozmieszczeniem miejsca.

0:54Jak to wszystko ma wyglądać?

0:56Wróćmy teraz do naszego,

0:57do naszego designu i włączmy sobie na chwilkę podgląd naszego grida.

1:04Co designer miał na myśli przekazując nam te informacje?

1:07Czyli jesteśmy w stanie coś wyczytać.

1:09Widzimy tutaj, że ten obrazek defacto jak się przyjrzymy całej jego powierzchni to

1:14zajmuje dokładnie połówkę całej dostępnej powierzchni.

1:18No i ten tekst. Cała ta reszta to też jest połówka.

1:20Czyli możemy zacząć implementowanie właśnie takiego rozwiązania.

1:24Czyli możemy powiedzieć, że ten div tutaj ma mieć width 1/2.

1:33I to samo możemy sobie zrobić z tym divem, który jest

1:38tutaj i który oplata nasze wszystkie elementy z gwiazdkami, z tekstem włącznie.

1:42Czyli to jest ten element.

1:44Tutaj zrobimy width 1/2. Zapiszemy to sobie

1:50jeszcze te elementy nam się tutaj nie rozkładają tak, jak powinny,

1:53bo nie, nie nadaliśmy odpowiedniego width temu elementowi, czyli width.

1:59I już po zapisaniu, po odświeżeniu strony powinniśmy mieć coś takiego.

2:02Oczywiście trzeba teraz postarać się o to, żeby to wszystko odpowiednio poukładać.

2:06Natomiast najpierw chciałbym, żebyśmy zwrócili uwagę na te tła, które mamy.

2:11Wyłączymy sobie już podgląd tego grida tutaj.

2:13Przejdźmy sobie tutaj.

2:14I mamy tło.

2:16Jedno tło ma kolor E4.

2:19Ten kwadrat ma dokładnie na sobie,

2:21sprawdzimy kolor e4e47.

2:23To jest z palety zinc i to będzie kolor e446 zinc-200.

2:30Czyli musimy wziąć ten pierwszy wrapper,

2:33który nam oplata całe wszystkie te elementy.

2:36I musimy nadać mu klasę.

2:39Bg-zinc to było 200. Zapiszmy to sobie.

2:45Zobaczmy jakie, no mamy zmiany już 1.

2:48Teraz musimy złapać sobie ten drugi

2:50element i on też będzie miał jakieś kolor, jakieś tło.

2:54Z tego co tutaj widać na designie to będzie to 71717A.

3:01I to jest dokładnie farba zinc 500.

3:04Czyli możemy sobie skopiować tą klasę

3:07i temu elementowi wewnętrznemu zamienić po prostu tutaj z 200 na 500.

3:12Tak odróżnimy te dwa elementy,

3:15które powinny owrapowywać właśnie tą reklamę tutaj.

3:19Wróćmy do naszej strony.

3:21Na razie tego nie widać, bo ten drugi element po prostu zajmuje całe miejsce.

3:25Natomiast jeżeli sobie tutaj teraz nadamy padding na y wielkości 4.

3:32no to już mamy odróżnienie pomiędzy tymi dwoma elementami.

3:36Jest jednak jeden problem, który się tutaj pojawił.

3:38Otóż w naszym designie

3:40mamy ten napis i mamy tutaj ten napis i on ma czcionkę Crimson Text, także musimy go

3:46dołączyć ponad tym divem, który oplata nam te wszystkie rzeczy.

3:50Zróbmy sobie na razie ten napis tutaj.

3:53Stworzymy normalny p i tutaj wpiszemy advertisement.

3:58Zapiszmy sobie to. No i wróćmy.

4:01Widzimy, że na razie nie układa nam się to wszystko tak, jak byśmy chcieli.

4:05Możemy sobie zrobić tutaj kontener

4:07z flex'em albo możemy sobie po prostu wyśrodkować ten tekst.

4:11Myślę, że lepszym rozwiązaniem będzie

4:12wystylowanie tylko i wyłącznie tego tekstu.

4:14Tak że zajmijmy się najpierw tutaj tą opcją.

4:19Class=Text-center.

4:22Jak widzisz zostanie aplikowana klasa text align center.

4:25Czyli już w tym momencie powinniśmy wyśrodkować sobie ten napis.

4:29I jako że mamy już padding z góry nadany zdejmiemy sobie na razie padding

4:33z góry zostawimy padding bottom na tym samym wrapperze.

4:37Widzisz, mamy advertisment i teraz możemy sobie tutaj ładnie postylować stylami tego

4:41napisu, żeby uzyskać fajny efekt tak jak jest na designie,

4:47żeby mieć równe odległości pomiędzy top i bottom tego napisu.

4:51I jeszcze musimy zwrócić uwagę na to, bo to jest jakby uppercase'm pisany napis,

4:55dlatego wróćmy do naszego napisu tutaj

4:57advertisement i zastanówmy się co można zrobić.

5:01I kolejny raz Tailwind przychodzi nam z pomocą, ma

5:04klasę uppercase, który nadaje text transform uppercase.

5:08Zapewne znasz już z CSS, że można bardzo

5:10łatwo zmienić rodzaj wyświetlanego tekstu, niezależnie jak to jest tutaj napisane.

5:14No i potrzebujemy padding top ustawić.

5:17Spróbujmy od dwójki, jest to za dużo.

5:20Myślę, że jedynka jest tutaj dobrą wartością.

5:23Jeszcze musimy sprawdzić kolory, bo ten napis jest wyraźnie,

5:26on nie jest taki ciemny jak cała reszta i z tego co tutaj widać jest 52525B.

5:31Wróćmy do naszej palety kolorów i 52525B to jest zinc-600.

5:36Zróbmy sobie tutaj tekst,

5:38zapisz sobie tę wartość i już po refresh nasz tekst powinien mieć tutaj.

5:44Oczywiście musimy sobie,

5:47to nie aplikować tutaj, ale na tekst już mamy wartość taką, jaką chcieliśmy mieć.

5:53Mamy tekst zinc-600 i przejdźmy teraz do stylowania tych elementów.