Strony WWW bez Kodowania: Pozostałe Sekcje

0:00Witaj w kolejnej lekcji, gdzie zajmiemy się drugą sekcją.

0:02Ta sekcja wygląda w ten sposób, ona się jeszcze jakoś dodatkowo animuje.

0:05Nie sądzę, żebyśmy to akurat mogli w Carrds zrobić, ale poza tym jest jednym wielkim linkiem.

0:10No i cóż, można by było tak po prostu

0:12dodać kolejną sekcję, czyli wybieramy Container.

0:15Ten kontener się nam dodał w złym miejscu,

0:18więc powinniśmy go przerzucić w to odpowiednie miejsce.

0:21To jest na szczęście bardzo łatwe.

0:22Pierwszy problem, który musimy rozwiązać,

0:24to jest jakiś nadprogramowy marginesy, który się tu pojawia.

0:27Zobaczmy na naszym kontenerze jak wyglądają marginesy, czyli przejdziemy w

0:31sekcję stylowania i one w Cardds są ustawione ogólnie na auto.

0:35Aczkolwiek żeby się upewnić, że nie ma tutaj żadnego marginesu, możemy je

0:38pozmieniać na zero i tak samo w tej kolejnej sekcji i

0:41po prostu marginesy pozmieniałem na zero i teraz rzeczywiście już ich nie ma.

0:45Następnie do takiej sekcji możemy wrzucić

0:48przycisk, czyli wybieram Button oraz będzie tutaj potrzebny

0:52text na pewno jakiś i chyba jeszcze jeden text zduplikuję go,

0:56ponieważ mamy text na górze i na dole, a w środku ogólnie to będzie przyciskiem.

0:59Czyli tak możemy przerzucić text na górę,

1:02a chodzi mi konkretnie żeby był nad przyciskiem w ten sposób.

1:06OK, mam te texty wrzucone.

1:08Dodatkowo musimy przestylować Button jeśli chodzi o Background.

1:12No właśnie chcielibyśmy mieć dokładnie

1:13takie tło tutaj w sumie to tło się zmienia, nie sądzę, że to odwzorowuje, więc

1:17zostawię zielone tło i ten kolor zielony, taki morski wybiorę tutaj od razu

1:23też dla przycisku jako kolor tła, czyli zrobię po

1:25prostu taki sam kolor tła tutaj, jak również na całym kontenerze.

1:31Czyli przejdźmy na cały kontener i Background Image zmienimy na

1:35Beckground Color, a następnie tutaj wklejamy tą wartość szesnastkową.

1:39No i teraz kolor przycisku jest taki sam jak kolor tła.

1:41Jeśli chodzi o text, który się na nim

1:43znajduje, to zrobimy tak Label będzie białe i font jest zdecydowanie większy.

1:51W związku z tym Lato, ale Size powiększymy i jeszcze zmienimy napis.

1:56Tutaj powinien się znaleźć napis Take the Tour i dodatkowo jest to przycisk, który ma taką

2:02ikonkę z prawej strony i moglibyśmy to zrobić, bo możemy to

2:06zrobić w ten sposób, że przejdziemy do stylów, a następnie Appearance

2:09zmienimy z Label Only na Icon + Label, czyli możemy z lewej strony umieścić ikonkę.

2:14W naszym przypadku chcemy umieścić ikonkę z prawej strony, czyli Label + Icon.

2:20I teraz jeśli wrócimy do ustawień

2:21przycisku i rozwiniemy sobie go to będziemy mieli coś takiego jak Icon.

2:25W tym przypadku jest to Check.

2:26My będziemy chcieli zmienić to na jakąś strzałkę np.

2:29tutaj mamy Right Arrow, aczkolwiek tych strzałek, tych stylów, strzałek jest też

2:34wiele różnych, więc zamiast Right Arrow możemy wybrać sobie Chevron albo np.

2:38jakąś wersję lite tej strzałki albo jeszcze cokolwiek innego.

2:42Wybierzmy może właśnie na razie Right Chevron

2:44i co prawda nie jest to identyczne, ale

2:48być może nawet i identyczna ikonka by się tutaj znalazła, ponieważ mamy tu ogromną

2:52bibliotekę symboli, z których możemy wybierać.

2:55Ja w zasadzie chciałem tylko

2:56zasygnalizować, że się da i jeszcze dla Apperance Container'a będziemy chcieli zmienić jego

3:01wysokość tak, żeby dostosować ją mniej więcej do tego, co mamy tutaj.

3:05No i co prawda tego efektu hover wydaje mi się, że łatwo bym nie mógł odwzorować po

3:10prostu wybierając ustawienia, które mamy w Cardds, ale mógłbym bardzo łatwo to zrobić

3:16w stylach, dodając tutaj styl na hover jako pseudo klasę do tego elementu.

3:22Tak jak powiedziałem, nie chcę wchodzić tutaj mocno w CSS'a.

3:25Jeszcze nie jest ten etap, więc na razie nie będę tego robił.

3:27Ale da się.

3:29Następna rzecz, którą chcemy zrobić to

3:30jest kolejna sekcja i no znów możemy sobie zaznaczyć jakiś tekst w tej sekcji.

3:35Zobacz, że teraz to jest naprawdę już

3:36bardzo proste, bo możemy zacząć sobie powielać sekcje, które już mamy

3:40przykładowo tą a następnie jako Background ustawimy teraz Image.

3:44Tam jest wgrany obrazek, który możemy sobie od razu załadować.

3:48Wydaje mi się, że to jest ten OK i powiększmy sobie to, ten zakres.

3:55Więc jako tło możemy mieć właśnie ten obraz.

3:58Jego pozycja będzie na Center Tail, czyli

4:00powielanie możemy właśnie włączyć w obie strony.

4:03Wtedy taka bitmap, która występuje w tle będzie powielana.

4:08Możemy też wybrać rozciągnięcie, jakieś

4:10różne opcje tła, które można tutaj dostosować.

4:13No i potrzebujemy wkleić tu odpowiedni kawałek tekstu, zmienić jego styl.

4:18Teraz ten tekst rozlewa się na całą szerokość, więc moglibyśmy ewentualnie

4:22przejść do właściwości i zmienić to na kolumny.

4:25I przykładowo znowu dodać tutaj.

4:27To jest taka moja stała sztuczka w zasadzie, że dodaję sobie kolumnę i

4:31przerzucam elementy do tej środkowej kolumny.

4:33Tutaj nie wiem, czy nawet te elementy będą nam potrzebne.

4:35I wtedy środkową kolumnę ustawiam na szerokość taką jaką chcę.

4:38Nawet jeżeli chcę ustawić to na 70%, to jest to wtedy proste.

4:42Możemy to zrobić.

4:43Jeśli chodzi o właściwości tego tekstu.

4:46No to znów zmieńmy je.

4:47Kolor po prostu zmienimy.

4:49A no właśnie widzisz teraz, że ja modyfikuje ten Paragraph, więc chcę to cofnąć

4:55i zamiast tego nie będę korzystał z Paragraph.

4:57Więc chcę sobie wybrać opcję None.

5:00Zresztą może pewnie,

5:01może i z tego zrobię jakiś kolejny text, kolejny styl textu,

5:04ale na razie nie chcę, więc wybieram kolor szary.

5:07Jeśli chodzi o Drop Shadow to ten efekt zmienimy na np.

5:12tutaj jest właśnie taki biały shadow pod spodem

5:14więc zmieniliśmy to na biały i jest ok, tylko jeszcze powiększmy

5:17trochę, wielkość trochę powiększymy i zmienimy font na Weight Light.

5:22Zdaje się, że to jest w ogóle chyba ten font,

5:25dokładnie, może troszeczkę jeszcze

5:27ciemniejszy, ale to nie jest aż tak istotne.

5:30Kolejny kawałek textu.

5:31W nim znajdują się linki, a także część tekstu jest pogrubiona.

5:34Zobacz, że mamy tu różne style w obrębie

5:36tego jednego kawałka jednego pola tekstowego.

5:39Jeśli chodzi o Button, mogę go usunąć.

5:40Jeśli chodzi o ten tekst, też go wyrzucimy,

5:44czyli ikonka kosza.

5:45A to sobie powielimy duplicate.

5:48I teraz jako text wstawimy tekst, który tam był.

5:52I dzięki tej specyficznej konstrukcji Markdown-like.

5:55Możemy tutaj osiągnąć różne style textu wewnątrz jednego pola tekstowego.

5:59Czyli stawiam dwie gwiazdki, żeby coś pogrubić,w ten kawałek pogrubimy.

6:03Jest ok, a tu Abute.me chcielibyśmy zrobić to linkiem i zobacz,

6:07że linki możemy robić w ten sposób, że robimy link text w nawiasach klamrowych

6:12tak jak tutaj, a w nawiasach zwykłych robimy https i np.

6:18dadajmy about i jest to zrobione jako link.

6:22Jeżeli chcielibyśmy sformatować to jakimiś np.

6:25innym kolorem, bo chyba tam taki inny

6:26kolor też się pojawił, to też możemy skorzystać np.

6:29z jakiegoś Color Out czy Color Name.

6:31Generalnie te opcje można tutaj dostosować.

6:34Wybieram polecenie Done zatwierdzam i mamy teraz do zrobienia:

6:37See what else people are saying aboute Slack.

6:39Tu niestety chyba tego serduszka w tle nie uda mi się zrobić.

6:42Przynajmniej no nie widzę,

6:43nie mam w głowie jakiegoś prostego sposobu,

6:45chociaż pewnie, pewnie by jakoś się dało, chociażby przyciskiem, który ma stan hover

6:49zrobiony i ma przezroczyste tło, więc moglibyśmy to tak zrobić.

6:52Aczkolwiek ja chciałbym Ci pokazać

6:54jeszcze jeden kolejny element, bo z przyciskami już pracowaliśmy, a jeszcze

6:58nie używaliśmy linków, więc zaznaczam element poprzedzający.

7:02Zanim chcę właśnie wstawić link.

7:04Korzystam z tego linku i linki możemy definiować bardzo podobnie

7:08jak przyciski Label tego linku ustalamy sobie jakoś

7:12i zobacz, że on ma jakiś charakterystyczny styl, który oczywiście możemy dostosować.

7:17W tym momencie nie mamy jakiegoś

7:18predefiniowanego stylu, aczkolwiek stąd możemy wybrać Plain albo Underline.

7:22Jeśli wybierzemy Plain będziemy mogli zmienić Link Color na kolor czerwony.

7:27Font mamy Lato, Size zdaje się, że jest

7:29trochę większy, ale Weight jest trochę mniejsze.

7:32No i jedyna rzecz, która tutaj jeszcze

7:35jest, to część tego tekstu jest podkreślona.

7:37Weight jest chyba jeszcze mniejszy.

7:40OK, people are saying jest podkreślone

7:43w tym przypadku podkreśla się to wszystko dopiero po najechaniu.

7:46No i znów jest to jedno z ograniczeń, które, które mamy, na które napotkamy.

7:50I tutaj mogę ewentualnie spróbować np.

7:54zastosować podkreślenie z pomocą mark down'a

7:57wewnątrz tego label'a, ale

7:59no nie one niestety nie zadziała.

8:01W związku z tym możemy to robić w

8:03przypadku tekstu i moglibyśmy tak podkreślić, ale nie

8:06zadziała w przypadku linku akurat tutaj, więc URL moglibyśmy zmienić.

8:11Jedna fajna sztuczka jeżeli do URL dodamy na końcu małpka

8:15blank, to zostanie to taki link otwarty w nowej zakładce przeglądarki.

8:20Jeżeli tego nie dodamy to zostanie otwarte zamiast naszej strony.

8:24Można więc powiedzieć, że tę sekcję mamy zrobioną.

8:26Teraz zobaczmy na tą sekcję Slack work with,

8:28to jest w zasadzie to samo co mieliśmy tutaj, więc spróbujmy po prostu powielić

8:32sobie tą sekcję, sklonować ją i umieścić poniżej, pod spodem.

8:38Teraz jeśli chodzi o jej Background Color

8:40to zmienimy ten Background Color na kolor jasnoniebieski.

8:45I ten sam kolor.

8:46Fajnie by było użyć na przycisku,

8:48czyli zaznaczam sobie Button i w stylach tego przycisku wybieram jako

8:53Background właśnie taki kolor ciemnoniebieski.

8:56No trzeba by było jeszcze tutaj zmienić trochę wysokość tego kontenera.

9:01On jest niższy w ten sposób i zobaczmy, skopiujmy teksty.

9:09Też możemy łatwo to przenieść już do tych gotowych stylów textu, które mamy.

9:15No i See full lists feature and integrations.

9:18Tego nie potrzebujemy, to możemy usunąć, a tutaj zmienimy na przycisku tekst.

9:24W ten sposób dla niego jeszcze musimy zarządzić stylami.

9:27I tutaj akurat ten styl wydaje mi się, że mniej więcej tak to powinno być.

9:32No nie staram się być jakoś przesadnie dokładny,

9:34ale wydaje mi się, że to wszystko co możemy z Carrds wycisnąć.

9:36I teraz mamy jeszcze kolejną sekcję z tym samym formularzem.

9:40W związku z tym można by było powielić tą naszą główną sekcję.

9:44W ten sposób.

9:45Teraz przenieśmy ją po jednej sekcji w dół.

9:49Tak będzie najprościej.

9:51I jeszcze jedną. OK.

9:54I spróbujmy to zrobić, czyli zmienimy Background na None.

9:59Po prostu chcemy białe tło.

10:01Tego elementu nie potrzebujemy, ale w

10:03sumie zamiast niego wstawimy jakiś obrazek, czyli wybierzemy Image

10:06ten element usunę za pomocą ikonki kosza i w obrazek wstawimy logo,

10:11kolejne logo Slacka.

10:13Wydaje mi się, że to jest to.

10:14Wybieram polecenie Open. Tak jest.

10:16Powiększmy ten zakres. I zaakceptujemy.

10:20I teraz trzeba by było jeszcze w ustawieniach zmienić

10:23szerokość tak mniej więcej, żeby to wyglądało jak na naszej stronie.

10:27Kolejne, kolejne zmiany tekstu w sumie już bardzo proste.

10:31Pamiętajmy, żeby zmienić Paragraph na po prostu None.

10:35I teraz możemy te zmiany wprowadzić.

10:37Ja naprawdę już nie będę tutaj się starał

10:39być jakoś przesadnie dokładny, jeśli chodzi o tę zmianę.

10:43Efekt Drop Shadow chciałbym usunąć.

10:45Czyli wystarczy zmazać kolor textu i od razu ten Drop Shadow został usunięty.

10:51No i możemy przekleić tutaj text, który się tu znajduje.

10:54Poniżej mamy dokładnie taki sam formularz,

10:56więc już tego nie musimy absolutnie dostosowywać i zmieniać.

11:00Jest ok. I teraz do zrobienia pozostał nam footer.

11:02Ja może go sobie skopiuję? Jakoś super wiernie nie będę go odtwarzał,

11:05aczkolwiek chcę pokazać Ci jak można taki footer fajnie przygotować w Carrds.

11:09Czyli usunąłem tamtą sekcję

11:11i zamiast tego robić w tej samej sekcji ja zaznaczę ją, a następnie wybiorę ikonkę

11:15plusa i dodam tutaj coś takiego jak Control,

11:18ale omawialiśmy Section Break, czyli tą jak gdyby nową stronę taką jak Thank you section,

11:23która się będzie pojawiać po wypełnieniu formularza.

11:26Omawialiśmy Scroll Point, czyli oznaczenie

11:28tego miejsca, do którego ewentualnie chcemy się skierować na tym single page

11:31bez jakiegoś przycisku, linku czy czegokolwiek innego.

11:33A mamy tutaj jeszcze coś takiego jak Header Marker i Footer Marker.

11:37Jeżeli użyjemy dowolnego z markerów, w tym

11:39przypadku Footer Markera, to jeśli będziemy mieli taką stronę połączoną z tymi

11:44sekcjami, które wybierzemy jako Section Break'i np. Thank you section to wszystko co znajdzie

11:49się pod Footer'em i wszystko co znajdzie się nad Header'em będzie automatycznie kopiowane

11:54i klonowane na te nasze podstrony, czyli na te podstrony, które znajdują się w

11:59Section Break'ach, czyli teraz na stronie Thank you section.

12:01Jeśli dorobimy Footer, to automatycznie on się na tej podstronie pojawi.

12:05No dobra, to Footer Start i dodajemy kolejny kontener.

12:08W tym kolejnym kontenerze wrzucamy sobie

12:11text, czyli właśnie te wszystkie linki, które akurat źle go wrzuciłem

12:16niestety. Dobra, to może zamiast go przeciągać, to

12:18po prostu się go pozbądźmy i upewnijmy się, że w dobrym miejscu go tutaj wrzucę.

12:23Text, dobra.

12:24Następnie zmienimy jego właściwości i

12:29najpierw wkleimy, przekleimy cały ten text, który mieliśmy wcześniej.

12:32Teraz może w pierwszej kolejności zmieńmy jego ustawienia.

12:35Przejdźmy do Appearance, więc wybierzmy none.

12:37Zmieńmy Color na kolor ciemny, zmieńmy Weight np.

12:40na takie coś i Size pozostawimy

12:43Line Spacing też, ale wytniemy na pewno efekt Drop Shadow.

12:47No i może zrobimy Color trochę jaśniejszy, ale dzięki temu będziemy mogli pogrubić

12:54niektóre z elementów i dodać do tego linki.

12:56Czyli w zasadzie tutaj wszystkie te rzeczy.

12:59Musimy zmienić trochę rozmiar jeszcze na mniejszy jednak.

13:01Wszystkie te rzeczy, które tutaj są

13:04jako linki: We're hiring!, API, Status itd. są pogrubione

13:08no i oczywiście powinny być linkami, więc już wiesz jak to zrobić

13:11z pomocą tego pseudo Mark Downa powinniśmy to pogrubić, a jeśli dodatkowo

13:15chcemy żeby to było linkiem no to bierzemy to w nawiasy klamrowe i dorabiamy tutaj link np.

13:20https i coś tam.

13:22Więc to będzie automatycznie linkiem i będzie pogrubione.

13:25Więc można powiedzieć, że jakoś to sobie otworzyliśmy.

13:28Naturalnie na całej tej sekcji należałoby w ustawieniach zmienić wysokość na

13:33minimalną i padding też możemy sobie dostosować.

13:36No i teraz jest okej. A ponieważ zrobiliśmy to w tym dodatkowym

13:39Control Footer Markerze, to będzie się, a przynajmniej powinno pojawiać także np.

13:43na takich stronach jak Thank you section.

13:45To sobie zrobimy w kolejnej lekcji. Do usłyszenia.