Με τη δομή HTML για το υποσέλιδο στη θέση του, έχουμε ό, τι χρειαζόμαστε για να ξεκινήσουμε το στυλ και να κάνουμε αυτό το υποσέλιδο να μοιάζει με αυτό που σχεδιάσαμε στο Photoshop.
Δημιουργούμε ένα νέο αρχείο SCSS μόνο για το υποσέλιδο, γιατί αυτό έχει νόημα να παραμείνουμε διαμορφωμένοι και αυτό κάνουμε για όλα τα άλλα. Το @ εισαγάγουμε στο κύριο φύλλο στυλ στο κάτω μέρος.
Σκούραμε το υποσέλιδο χρησιμοποιώντας λίγο φόντο RGBa. Sass μας βοηθάει λίγο, επειδή μπορείτε να το κάνετε αυτό σε Sass που είναι super cool: rgba(black, 0.5)? Χρησιμοποιούμε μια σκιά κουτιού ένθετου για να δημιουργήσουμε το εφέ που μοιάζει με ράφι.
Σπρώχνουμε το περιεχόμενο μακριά από τις άκρες με αριστερή και δεξιά επένδυση. Αμέσως πρέπει να προσαρμόσουμε το ποσό αυτής της βάσης με βάση το τρέχον σημείο διακοπής.
Διαμορφώνουμε το κάτω υποσέλιδο με τον ίδιο τρόπο. Είναι λίγο πιο σκοτεινό για να φαίνεται άλλο επίπεδο χαμηλότερο.