Bubble: Uzupełniamy treści i style

0:00Cześć! Jak widzisz, dzięki magii ekranu wszystkie

0:02treści w moim projekcie zostały już podmienione na właściwe.

0:06Dodatkowo dla wszystkich tych elementów zdefiniowałem właściwe style.

0:09Jeżeli jesteś ciekaw jak wyglądało to u mnie to proszę bardzo.

0:14Jak widzisz mam tutaj styl h3_Dark.

0:17W tym przypadku jest to paragraf 300 middle.

0:20Tutaj mam nagłówek czwartego typu,

0:23tutaj paragraf 200 middle, ale w wersji bold, ten styl miałem

0:27już zdefiniowany wcześniej, czyli paragraf 200 middle.

0:31I oczywiście zastosowałem to tutaj i tutaj, dla tych elementów nie nadawałem na razie

0:35styli, ponieważ zmienimy ich kolor i będziemy musieli zdefiniować je osobno.

0:41Dodatkowo chciałbym zwrócić jeszcze Twoją uwagę na jeden bardzo ważny fakt.

0:44Jeżeli będziesz kopiował tutaj grupy sobie i wstawiał czyli tą grupę pricing

0:48card-wrapper, to uważaj na to abyś zaznaczył prawidłowo.

0:52Ja w poprzedniej lekcji zaznaczyłem nię tą grupę co trzeba i wkleiłem.

0:55Tak więc końcowy układ musi wyglądać w ten sposób.

0:58Mamy grupę pricing-cards i wewnątrz niej trzy razy grupę pricing

1:02card-wrapper, a ta z kolei zawiera tutaj grupę pricing-card itd.

1:07Tak więc dam Ci teraz chwilę na to, abyś

1:09mógł sobie uzupełnić te treści, poustawiać style.

1:13Tak więc zapauzuj proszę video, zrób to co

1:15trzeba zrobić i zaraz będziemy kontynuować naszą pracę.

1:20Przystąpmy więc do dalszego działania.

1:22W pierwszej kolejności odpowiednio zdefiniujmy style dla naszego przycisku.

1:27Oczywiście chodzi mi tutaj o zakładkę conditional.

1:31Pozostawiamy ten warunek.

1:33Zależy nam na tym, aby ten przycisk

1:35zmieniał się, kiedy użytkownik najedzie na niego kursorem myszy.

1:38Natomiast w tym przypadku chcę zmienić background color na ten kolor

1:43ciemno różowy.

1:45A dodatkowo dodać jeszcze tutaj font color.

1:49I zmienić go na kolor biały.

1:53Wróćmy jeszcze do zakładki appearance

1:56i sprawdźmy, czy mamy tutaj poustalane tranzycje.

2:00Jak widzisz, na chwilę obecną jest ona ustawiona tylko dla koloru tła,

2:03musimy więc dodać ją jeszcze również do koloru czcionki.

2:07Wartość 250 milisekund.

2:12I teraz dopiero możemy sobie zdefiniować styl dla takiego przycisku.

2:26Tak on wygląda u mnie.

2:27Teraz mogę go nadać tutaj dla tych wszystkich

2:32przycisków.

2:33Ten oczywiście nie zmieniamy, ponieważ on się będzie troszkę różnił,

2:37głównie dlatego, że cała ta karta będzie miała po prostu ciemne tło.

2:41Natomiast do podglądu jak to wygląda na chwilę obecną.

2:48Jeżeli zjadę tutaj niżej.

2:50Jak widzisz, nasze przyciski zachowują się teraz właściwie.

2:56Wracamy do edytora.

2:58Przechodzimy do tej ostatniej karty.

3:00Musimy tutaj zaznaczyć pricing-card i dodać jej odpowiednie style.

3:06Przede wszystkim usuwamy ten styl.

3:10Background style ustalamy na jednolity kolor.

3:13Będzie to nasz kolor primary.

3:16Dodatkowo nadam tutaj jeszcze zaokrąglenia rogów.

3:20O wartości równej 16 pixseli.

3:25Teraz będziemy musieli tutaj odpowiednio dostosować treści w środku.

3:29Jak widzisz ten kolor czarny,

3:31te kolory, nasz middle się tu nie sprawdzają.

3:34A więc w tym przypadku pozmieniajmy to wszystko na kolor biały.

3:52Usuwamy ten styl.

3:53Oczywiście tutaj ustalamy kolor biały i to samo robimy na tych pozostałych tekstów.

4:01Natomiast w tym przypadku może zróbmy to

4:03troszkę szybciej, czyli cofnij tą operację i tutaj ustalmy nowy styl,

4:11będzie to

4:16paragraf

4:21200 white

4:25i w ten sposób teraz będziemy mogli szybko wybrać ten styl.

4:30I nadać go tutaj dla tych elementów.

4:45Gdzieś mi ten styl umknął, jest.

4:48Tutaj, to samo możemy zrobić tutaj

4:51dla tej ikonki, nadajmy jej biały kolor.

4:58Chyba nawet mam tutaj, o nawet mam

5:00styl z białym kolorem, czyli wystarczy, że go tutaj tylko zastosuje.

5:07Na chwilę obecną może tego nie widać, bo znowu nam się wykrzaczył tutaj ten plugin

5:10w podglądzie, ale zaraz sprawdzimy to na naszej stronie czy wszystko jest ok.

5:25Wygląda to już dużo lepiej.

5:27Musimy jeszcze oczywiście zadbać o ten przycisk.

5:30Jak widzisz, tutaj nie pasuje on teraz kolorystycznie.

5:33Tak więc wracamy do edytora.

5:38I tutaj w zakładce canditional ja ustawię,

5:44zaraz, jak my to mamy tutaj zdefiniowane?

5:46Nie, wracamy najpierw tutaj, tu najpierw ustalamy styl

5:53na ten ciemny kolor, tu kolor czcionki to nasz kolor primary.

6:00I dopiero w zakładce conditional chcę zmienić kolor tła na kolor biały.

6:08Wróćmy do podglądu.

6:10Odświeżamy naszą stronę, zjedźmy na sam dół.

6:14Jak widzisz teraz wygląda to dokładnie tak jak powinno.

6:18Brakuje mi tutaj jeszcze badge'a i

6:19odpowiedniego wysunięcia tej karty tak aby była wyróżniona.

6:24Wracamy więc do edytora.

6:27Mogę sobie już skopiować ten tekst, wkleić go tutaj.

6:34Tym razem musi on być umieszczony jako pierwszy element.

6:40Tekst zmieniamy na most popular.

6:49I dajemy mu odpowiednie style.

6:53W tym przypadku rozmiar fonta to 12 pixeli.

6:57Kolor czcionki to nasz kolor primary.

7:02Kolor tła to będzie jednolity kolor.

7:05Tutaj będzie to CDF4FF, czyli taki niebieski kolor.

7:16Zaokrąglenia rogów to 24 pixele.

7:20Dodatkowo dodajemy jeszcze tutaj padding

7:248 pixeli od góry i dołu i 20 pixeli od lewej i prawej strony.

7:32Jeszcze tylko zadbajmy o to, aby ten

7:36tekst był tutaj

7:38odcięty odpowiednio, czyli fixed width to content i przesuńmy go

7:42do prawej strony, nadajmy tutaj margines 20 pixeli od dołu.

7:48Teraz już to wygląda prawie tak jak powinno.

7:52To co chcę zrobić to jeszcze dla wszystkich tych grup pricing-card-wrapper.

7:56Dodać margines na dole równe 50 pixeli.

8:11Natomiast całą tutaj tą kartę.

8:15Mogę ją nazwać pricing-card-pro.

8:19Żeby się nam to wyróżniało.

8:21Chcę ją tutaj przesunąć do góry, nadać jej ujemny margines równy -55 pixeli

8:27i dodatkowo dodać tutaj jeszcze odpowiedni shadow.

8:34Będzie to 0816

8:41I teraz tylko inny kolor.

8:44W naszym przypadku będzie to 5243C2, czyli taki mocno ciemno fioletowy kolor,

8:53przezroczystość 30%.

8:56Już zaczyna przypominać to nasz gotowy, wzorcowy projekt.

9:00Tutaj jest to wszystko za bardzo do siebie przesunięte.

9:03A więc dla grupy top, margines dolny ustalę tym razem na 120 pixeli

9:10i już osiągnęliśmy dokładnie taki efekt, jaki powinniśmy.

9:14Przejdźmy do podglądu.

9:20Jak widzisz, teraz wygląda to dokładnie tak jak powinno.

9:23Natomiast chciałbym jeszcze wrócić do

9:24edytora i zwrócić Twoją uwagę na jedną bardzo ważną rzecz.

9:29Jeżeli teraz przeszlibyśmy do podglądu naszej strony w trybie responsywnym.

9:35Wróćmy tutaj może do jakiejś większej szerokości.

9:38Ok. Teraz wszystko wygląda tak jak trzeba.

9:41Natomiast jeżeli będę tutaj zjeżdżał

9:45szerokością, tak jak widzisz teraz ta karta przeskoczyła nam tutaj na dół.

9:50Dodatkowo to białe tło rozciągnęło nam się tutaj na całą szerokość.

9:54To nie jest efekt, który chcemy osiągnąć.

9:56Dlatego też możemy tutaj wykorzystać zakładka conditional.

10:01Tylko tym razem w trochę innym stylu

10:03niż robiliśmy to do tej pory dla przycisków,

10:06ale tym zajmiemy się już w kolejnej lekcji, do której serdecznie Cię zapraszam.