Kun alatunnisteen HTML-rakenne on paikallaan, meillä on mitä tarvitsemme muotoilun aloittamiseksi ja tämän alatunnisteen näyttämiseksi Photoshopissa suunnitellulta.
Luomme uuden SCSS-tiedoston vain alatunnisteelle, koska sillä on järkevää pitää modulaarinen ja sitä olemme tehneet kaikesta muusta. @ Tuomme sen alaosassa olevaan päätyylitaulukkoon.
Tummennamme alatunnistetta käyttämällä vain vähän RGBa-taustaa. Sass auttaa meitä hieman, koska voit tehdä tämän Sass, joka on super cool: rgba(black, 0.5)
; Käytämme upotetun laatikon varjoa hyllymaisen vaikutuksen luomiseen.
Työnnämme sisältöä pois reunoista vasemmalla ja oikealla täytteellä. Meidän on heti säädettävä täytteen määrä nykyisen rikkoutumispisteen perusteella.
Me muotoilemme alatunnisteen suunnilleen samalla tavalla. Se on vain hieman tummempi, jotta se näyttää uudelta tasolta matalammalta.