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

0:00Dobrze,

0:01zalążek naszej hero sekcji tutaj już mamy za sobą.

0:03Tak naprawdę teraz zajmijmy się tutaj tymi

0:06ikonkami, które widzimy po prawej stronie na widoku mobilnym.

0:09Czyli wróćmy sobie do naszego edytora kodu

0:11naszej przeglądarki i na pewno będziemy potrzebowali w coś

0:15złapać te ikony, żeby je odpowiednio tutaj wypozycjonować.

0:17Dlatego też potrzebujemy trochę tutaj div'a, dla którego też nadamy klasę absolute.

0:24Dodatkowo po klasie absolute,

0:28bottom 4 też będzie odsunięte o taką samą odległość jak ten element tutaj.

0:33Dodatkowo jeżeli chodzi o

0:36stronę prawą od prawej strony też chcemy odsunąć na 4 razy 4 do 16 w Tailwind'zie

0:41przypominam, że system mierzenia to jest

0:44cztero pixel'owy, czyli wartość right-1 to jest po prostu 4 piksele odległości.

0:50Jeżeli chodzi o right-4 to 4 razy 4 mamy 16

0:53pixeli odległości, no i tabulacją już mogę sobie tutaj zostawić ten element.

0:58Jeszcze co będę potrzebował tak naprawdę

1:00to ustawić mu flex'a żeby te wszystkie ikonki były pod sobą.

1:04Natomiast zanim to zrobimy skopiujmy sobie teraz ikonki.

1:08Ja sobie też je z boku przygotowałem.

1:11To są jakby proste svg,

1:13jeżeli sobie zapiszę, to zauważ, że tutaj już pokazała się ikonka Instagram'a.

1:18Dodatkowo mam kolejne ikonki, które będą

1:20tutaj nam potrzebne w tym projekcie także sobie teraz to skopiuję.

1:23Ty możesz sobie skopiować dokładnie te

1:25same pliki svg, tak naprawdę z plików źródłowego tego kursu widzisz, że

1:30pojawiły się wszystkie ikonki, które mam po prawej stronie tak samo jak tutaj.

1:34Natomiast nie są jeszcze odpowiednio wypozycjonowane.

1:37Tak, że teraz musimy sobie przejść znowu do naszego wrapper'a.

1:41Tutaj na te wszystkie ikony może sobie

1:43zminimalizujemy te pliki svg, żeby nam nie przeszkadzały tutaj.

1:47No i tutaj potrzebujemy ustawić na flex, flex column.

1:51Chcemy je ustawić pod sobą

1:53jakiś gap, prawdopodobnie też będzie nam tutaj potrzebny.

1:57Myślę, że tutaj odległość wielkości gap-4 będzie jak najbardziej w porządku.

2:04No i już w tym momencie nam się ta sekcja też tutaj pojawiła.

2:08Tak? Powinna się pojawić.

2:10Tak samo jest to odsunięte od dołu jak kulka.

2:13Także myślę, że tą część na widoku mobilnym mamy jak najbardziej za sobą.

2:17Sprawdźmy czy tutaj te ikonki one mają

2:2124 na 24 na Figmie, tutaj widzimy na dizajnie.

2:26Sprawdźmy sobie u nas ile taka ikonka ma

2:29też 24 na 24, także myślę, że to możemy sobie na chwilę obecną zostawić.

2:34Dobrze, mamy tę sekcję z ikonami.

2:35Jeszcze musimy sobie wrócić do naszego

2:37header'a, żeby zakończyć całą mobilną historię tutaj.

2:39No to musimy coś zrobić z tym napisem,

2:41żeby miał kolor pomarańczowy, żeby nie było tutaj odstępu.

2:44Tak, że odstęp załatwimy sobie bardzo

2:46prosto, bo tak naprawdę możemy sobie przysunąć do siebie te dwa elementy.

2:50Natomiast z tym kolorem sytuacja jest troszeczkę inna.

2:54Może najpierw zacznijmy od tego, że

2:57odpowiednio sobie wystylizujemy ten napis, czyli class

3:00i w tym momencie ustawimy sobie wielkość tekstu na

3:03troszeczkę większy jednak. 2xl zapisze to sobie.

3:09Dodatkowo potrzebujemy tutaj ustalić font na medium.

3:15Troszeczkę zmieniła się nam grubość tego fontu.

3:17I dodatkowo kolejna rzecz, która będzie nam potrzebna to text

3:22nie chcemy mieć biały, tylko chcemy to mieć ustawione na text zinc-50.

3:25Troszeczkę nam się ściemni tutaj odcień.

3:28I teraz żeby zrobić ten kawałek pomarańczowy możemy sobie tutaj owrapować to.

3:33Wrap with abbereviation span'em.

3:36Czyli jeszcze raz control shift P, otwarłem menu kontekstowe

3:40Visual Studio Code i tutaj wrap with abbereviation i

3:44mogę sobie wpisać span, żeby został ten element owrapowany w span.

3:49Dodatkowo mogłem sobie dodawać klasy, tak jak dodajemy w necie.

3:54Natomiast tutaj w tym momencie ja sobie

3:55skorzystam po prostu z normalnej klasy i tutaj nadamy sobie po prostu text orange.

4:03W naszym przypadku niech będzie to 600.

4:05Myślę, że to jest odpowiedni odcień.

4:07No i już się ten napis widzisz zmienił tak jak powinien być.

4:12Teraz kolejna rzecz, którą potrzebujemy

4:13tutaj za tą h1 no to, tą ikonkę menu, którą mamy po prawej stronie

4:18też będzie z kolei svg, które sobie też przygotowałem tutaj wcześniej no i wkleję.

4:25Mamy tutaj tą ikonkę menu, która jest po prawej stronie.

4:30Jeżeli chodzi o width i height to mamy

4:32ustalone z góry na svg, który jest jednej wielkości tak naprawdę na wszystkich ekranach.

4:37Później przejdziemy do, jakby responsywnego design'u

4:41to sobie odpowiednio ustalimy to, że ta ikonka będzie się przesuwała na środek

4:46takiego header'a, zauważ, że na mobilnej na tablety mamy tą ikonkę tutaj

4:50w tym miejscu. Natomiast chcemy, żeby ona

4:53się przesuwała na środek tutaj tego elementu.

4:58Dobrze myślę, że pierwszą, jakby widok hero dla urządzeń mobilnych mamy za sobą.

5:04Teraz przejdźmy do

5:06responsywnego wystylizowania tego tak, żebyśmy finalnie dostali

5:10przy zmianie różnych breakpoint'ów, żebyśmy dostali tutaj te widoki.

5:13Tutaj pojawia się dodatkowy element.

5:14Jak widzimy na widoku mobilnym tego elementu tutaj nie ma.

5:19I jeszcze jedna rzecz warta uwagi to myślę, że tutaj jest jakaś winieta

5:24dookoła tego zdjęcia, bo póki co jak spojrzymy na to zdjęcie, to ono nie jest

5:27jakoś tak zaciemnione po tej prawej lewej stronie.

5:29Natomiast tutaj widzimy, że wyraźnie, że tu jest jakaś winieta po

5:33prawej i lewej stronie, troszeczkę ciemniejsze to zdjęcie.

5:36Dlatego myślę, że też możemy

5:38za pomocą Tailwind'a stworzyć taką custom'ową winietę.

5:41Skorzystając z styli z gradientów.