Bubble: Dodajemy sekcję Top

0:01Witam Cię w kolejnej lekcji, której tym razem zajmiemy się stworzeniem tej sekcji

0:06top, czyli zawierającej tutaj nagłówek, tekst, przycisk oraz obrazek.

0:11A więc nie przedłużajmy i przystąpmy do działania.

0:15W tym celu tutaj wewnątrz grupy wrapper utworzymy kolejną grupę.

0:20Ale zanim to zrobimy, może zmieńmy nazwę

0:22tej grupy D zawierającej tutaj naszą nawigację, na grupę nav-links,

0:31Ok. Skoro to mamy gotowe, to dodajmy kolejną

0:34grupę, która będzie zawierała właśnie całą tę sekcję top.

0:38Wybieram tutaj group, dodaję wewnątrz wrapper.

0:43Nazwijmy ją top i zastanówmy się jak ją tutaj teraz poustawiać.

0:50A więc jak widzisz, znów tutaj będziemy mieć layout typu column.

0:54Ponieważ nagłówek znajduje się nad tekstem, a poniżej mamy

0:59tutaj przycisk i obrazek, a więc ustawiamy tutaj column, ja zgodnie z moim layout'em

1:07tym razem nie będę ustawiał tutaj żadnej minimalnej szerokości, a to dlatego, że

1:11jak pamiętasz grupa wrapper może się skurczyć

1:15minimalnie do 320 pixeli, więc tutaj nie musimy tej wartości już ustawiać.

1:19Natomiast chcę, aby ta grupa top rozciągała się na 640 pixeli.

1:26Czyli jak widzisz znowu ma tutaj zastosowanie ten mnożnik 320 razy

1:30jakaś określona wartość w tym przypadku razy 2.

1:33OK.

1:33Otrzymujemy więc taką grupę wycentrujmy ją sobie wewnątrz elementu rodzica.

1:39Dodajmy jej jeszcze tutaj margines od góry.

1:44Ja jeszcze dodatkowo dodam margines na dole

1:47i to co możemy teraz zrobić, ponieważ nasza grupa tutaj ta wrapper

1:52będzie zawierała tylko i wyłącznie header oraz tutaj tą sekcja top.

1:57Tutaj do tej sekcji stworzymy osobną grupę.

2:01Potem wyjaśnię Ci dlaczego, to mogę ustawić tutaj dla właśnie grupy wrapper

2:07minimalną wysokość na 0.

2:08W ten sposób dostosuje się ona do tego,

2:11co znajduje się w środku, czyli do wysokości

2:13gdzie jakie się tutaj znajdują.

2:15W pierwszej kolejności musimy tutaj dodać nagłówek.

2:20Wystarczy, że skopiuję sobie

2:22ten tekst, albo nawet nie, bo tutaj mamy o ile dobrze pamiętam to ustawione tranzycje.

2:28Tak, zgadza się, więc dużo łatwiej będzie po prostu zrobić to od podstaw.

2:31Wybieram tutaj tekst, wstawiam go tutaj i nadaje mu odpowiednie style.

2:38W moim przypadku te style to font nunito sans.

2:46Tutaj wybieramy nonito suns o wartości 700.

2:49Rozmiar font'a to 56 pixeli.

2:54Kolor tekstu będzie dokładnie taki sam jak

2:56tutaj, więc mogę sobie skopiować tą wartość.

3:03Dodatkowo chcę jeszcze zadbać, aby ten tekst był wyśrodkowany.

3:09I teraz skopiujmy sobie wartość tutaj tego tekstu.

3:12Czyli zaznaczamy i kopiujemy to i wklejamy w to miejsce.

3:26Dodatkowo usuńmy tutaj fixed-width, tak aby

3:30ten tekst rozciągał się na całą zawartość kontenera rodzica.

3:35Pozbywamy się minimalnej wartości, a dodatkowo dodajemy mu jeszcze tutaj margines

3:39z każdej strony ustawiony na wartość 20 pixeli.

3:44Skoro to mamy zrobione, to możemy teraz dodać ten tekst poniżej.

3:50W tym celu zaznaczę ten tekst, skopiuję i wkleję.

3:54Wstawię mu tylko margines 20 pixeli od góry i przejdę do zakładki appearance.

4:01I tutaj pozmieniam te wartości.

4:03W tym przypadku będziemy mieć tutaj font nunito sans regular.

4:12Rozmiar font'a to 20 pixeli.

4:17Line spacing ustawimy tutaj jeszcze na półtora.

4:20Tu możemy go zmniejszyć 1.4 tak jak

4:23widzisz zdecydowanie za dużo, ja ustawię tutaj wartość powiedzmy

4:301.2, dzięki czemu ten tekst dobrze wygląda.

4:34Wróćmy tutaj do tego tekstu.

4:37Jedyne, co musimy tutaj jeszcze zmienić,

4:39to przede wszystkim sam ten tekst oraz kolor tego fontu.

4:43Ja w tym przypadku wykorzystam

4:46tutaj ten kolor, mogę go skopiować i wkleić.

4:52No i pozostaje nam oczywiście jeszcze

4:55przekopiować sobie sam ten tekst i odpowiednio go tutaj zmienić.

5:04Jak widzisz mamy nagłówek i tekst już gotowy.

5:07Aby dodać przycisk

5:09wystarczy, że zaznaczę ten element, skopiuję i dodam go tutaj do grupy top.

5:17Oczywiście musimy się pozbyć tego marginesu.

5:22Dodatkowo chcemy taki element wyśrodkować i odsunąć go tutaj od góry o 30 pixeli.

5:31Pozostaje nam jeszcze tylko zmiana tutaj tego tekstu.

5:46Skoro to już jest gotowe, to dodajmy jeszcze tutaj obrazek.

5:51Wybieram.

5:52Tutaj oczywiście image.

5:54Wstawiam go znów do grupy top w tym przypadku

5:58ten obrazek znów będę chciała wycentrować.

6:03I odsunąć go od góry o 30 pixeli,

6:08a dodatkowo nadać mu jeszcze marginesy z lewej i z prawej strony ustawione na 20 pixeli.

6:15To samo dodajmy jeszcze tutaj.

6:17Do samego tego tekstu a nie, nie musimy, ponieważ

6:19skopiowaliśmy nasz nagłówek, to te marginesy zostały tutaj również skopiowane.

6:24Pozostaje nam tutaj tylko wgrać oczywiście właściwy obrazek.

6:37I dodatkowo oczywiście ustalić mu tutaj odpowiednie wymiary.

6:40W moim przypadku chcę oznaczyć tą wartość

6:43i powiedzieć, że mój obrazek maksymalnie może się skurczyć do 240 pixeli, a

6:48maksymalnie rozciągnąć na wartość 640 pixeli.

6:53I dodatkowo chcę jeszcze tutaj zachować

6:55aspect ratio, dzięki czemu jak widzisz wszystko tutaj się dobrze prezentuje.

7:00Jeżeli chciałbyś odwzorować wygląd mojej strony, czyli dokładnie to co buduję tutaj

7:05w ramach kursu, to niestety nie mogę tutaj udostępnić Ci tych obrazków, ale ponieważ są

7:10one darmowe, pokażę Ci gdzie można je znaleźć.

7:14Przechodzimy tutaj na stronę pixeltrue,

7:17widoczną tutaj w pasku adresu przeglądarki.

7:21Jest tu cała masa różnych ciekawych ilustracji.

7:24Ja pokażę Ci pack, z którego korzystałem.

7:26Jest to właśnie ten pack

7:28jest darmowy, możesz go sobie pobrać.

7:29Jedyne co zrobiłem to wykorzystałem tutaj narzędzie o nazwie Figma

7:33po to, aby odpowiednio tylko dostosować kolory tła i kolorystykę tych obrazków,

7:37tak aby pasowała mi tutaj do kolorystyki całej mojej strony.

7:41A więc sekcja top jest już gotowa.

7:44Możemy przystąpić do budowy kolejnej

7:46sekcji, ale do tego przejdziemy w lekcji następnej.