Po ustaleniu struktury HTML stopki mamy to, czego potrzebujemy, aby rozpocząć stylizację i sprawić, by stopka wyglądała tak, jak zaprojektowaliśmy w Photoshopie.
Tworzymy nowy plik SCSS tylko dla stopki, ponieważ ma to sens, aby zachować modularyzację i właśnie to robiliśmy dla wszystkiego innego. Importujemy to do głównego arkusza stylów na dole.
Stopkę przyciemniamy, używając tylko małego tła RGBa. Sass trochę nam pomaga, ponieważ możesz to zrobić w Sass, który jest super fajny rgba(black, 0.5):; Używamy cienia wpuszczanego do pudełka, aby stworzyć efekt przypominający półkę.
Odsuwamy zawartość od krawędzi za pomocą lewego i prawego dopełnienia. Od razu musimy dostosować wielkość tego wypełnienia na podstawie bieżącego punktu przerwania.
W podobny sposób stylizujemy dolną stopkę. Jest tylko trochę ciemniejszy, aby wyglądał o kolejny poziom niżej.