Σε αυτό το τελευταίο σενάριο δημιουργίας του υποσέλιδου, εργαζόμαστε στο κάτω μέρος του υποσέλιδου όπου βρίσκονται οι περιοχές CodePen και ShopTalk.
Πρέπει να αλλάξουμε λίγο τον κώδικα HTML καθώς συνειδητοποιούμε ότι τα τέσσερα κομμάτια στο κάτω μέρος (λογότυπο, κείμενο, λογότυπο, κείμενο) θα είχαν νόημα να είναι μια σειρά στοιχείων ενσωματωμένων μπλοκ που επικεντρώνονται το ένα στο άλλο ( vertical-align: middle;).
Αντιμετωπίζουμε το ζήτημα όπου υπάρχει επιπλέον χώρος μεταξύ των στοιχείων inline-block, επομένως χρησιμοποιούμε το μέγεθος γραμματοσειράς: 0; κόλπο από αυτό το άρθρο.
Έχουμε τη διάταξη να λειτουργεί στο τέλος, αλλά στην πραγματικότητα δεν με βλέπω να πέφτω στις πραγματικές εικόνες. Όπως κάναμε με το Photostar, φτιάχνω ένα νέο αρχείο Photoshop μόνο για αυτά τα λογότυπα υποσέλιδων. Αυτό απλώς διευκολύνει την αντιμετώπιση και οι μελλοντικές ενημερώσεις σε αυτά τα λογότυπα είναι ευκολότερες. Τους κάνω επίσης 2x σε μέγεθος και τα χαμηλώνω, ώστε να φαίνονται καλά σε οθόνες Retina. Τους ρίχνω στις ετικέτες εικόνων placeholder που έχουμε και λειτουργεί πολύ καλά.
Αρχεία
- 74-υποσέλιδο Logos.psd.zip