Mamy znaczniki dla reklamy Treehouse u góry strony, ale musimy wykonać trochę pracy związanej ze stylizacją. Zaczynamy od samej grafiki drzewa.
Myślimy, że używanie grafiki wektorowej i wyjściowej jako SVG może być fajne, ponieważ będzie wyglądać ostro i mieć mały rozmiar pliku. Zobacz, jak miotam się w programie Illustrator, próbując uzyskać ładną, czystą wersję tego we wszystkich wektorach i ostatecznie kończy się to niepowodzeniem. Na razie postanawiamy o tym zapomnieć i po prostu zrobić z tego obraz.
Okazuje się, że Treehouse i tak nie używa już tego brandingu, więc i tak będę musiał go wkrótce zaktualizować i na pewno poświęcę trochę czasu, aby zrobić go w formacie SVG, nawet jeśli będę musiał go ponownie narysować.
Na razie tworzymy PNG i wrzucamy go do projektu z tłem CSS. Zmniejszamy rozmiar z rozmiarem tła (chociaż po raz kolejny pomyliłem się, używając procentów - pamiętaj, że kiedy używasz procentu, jest to procent częściowego elementu, a nie procent rozmiaru samego obrazu).
Otrzymujemy kolorystykę, rozmiar i pozycjonowanie całego zestawu. Teraz ostatnim krokiem jest sprawienie, aby działał w projektowaniu responsywnym.