Έχουμε τη σήμανση για τη διαφήμιση Treehouse στο επάνω μέρος της σελίδας, αλλά έχουμε κάποια δουλειά για το στυλ. Ξεκινάμε με το ίδιο το γραφικό του δέντρου.
Σκεφτόμαστε ότι η χρήση του διανύσματος και η έξοδος ως SVG μπορεί να είναι δροσερή επειδή θα φαίνεται ευκρινής και θα έχει μικρό μέγεθος αρχείου. Παρακολουθήστε με να τρέχω στο Illustrator προσπαθώντας να πάρω μια ωραία καθαρή έκδοση σε όλα τα διανύσματα και τελικά να αποτύχω. Προς το παρόν αποφασίζουμε να το ξεχάσουμε και να το κάνουμε απλώς εικόνα.
Αποδεικνύεται, το Treehouse δεν χρησιμοποιεί πλέον αυτήν την επωνυμία, οπότε θα πρέπει να το ενημερώσω σύντομα και σίγουρα θα αφιερώσω χρόνο για να το κάνω SVG, ακόμα κι αν πρέπει να το ξαναγράψω.
Προς το παρόν, φτιάχνουμε PNG και το αφήνουμε στο σχεδιασμό με φόντο CSS. Το συγκρίνουμε με το μέγεθος του φόντου (αν και μπερδεύτηκα και πάλι χρησιμοποιώντας τα ποσοστά - θυμηθείτε όταν χρησιμοποιείτε ένα ποσοστό είναι ένα ποσοστό του στοιχείου μέρους και όχι ένα ποσοστό του ίδιου του μεγέθους της εικόνας).
Παίρνουμε το χρωματισμό και το μέγεθος και τη θέση όλων. Τώρα, το τελευταίο βήμα είναι να το κάνει να λειτουργεί με απόκριση.