Abbiamo il markup per l'annuncio Treehouse nella parte superiore della pagina, ma abbiamo del lavoro di stile da fare. Iniziamo con la grafica dell'albero stesso.
Stiamo pensando che usare il vettore e l'output come SVG potrebbe essere interessante perché apparirà nitido e avrà file di piccole dimensioni. Guardami mentre agito in Illustrator cercando di ottenere una bella versione pulita di esso in tutti i vettori e alla fine fallire. Per ora decidiamo di dimenticarlo e di farne solo un'immagine.
A quanto pare, Treehouse non usa più quel marchio comunque, quindi dovrò aggiornarlo comunque presto, e mi prenderò sicuramente il tempo per renderlo SVG, anche se devo ridisegnarlo.
Per ora, creiamo PNG e lo inseriamo nel design con uno sfondo CSS. Lo ridimensioniamo in base alle dimensioni dello sfondo (anche se mi sono confuso ancora una volta usando le percentuali: ricorda quando usi una percentuale è una percentuale dell'elemento partent e non una percentuale della dimensione dell'immagine stessa).
Otteniamo la colorazione, il dimensionamento e il posizionamento tutto impostato. Ora l'ultimo passaggio è farlo funzionare nel responsive design.