Имамо сав садржај који нам је потребан на излазу ове странице и имамо заглавље на месту. Сада можемо започети ЦССин 'садржај у дизајну који имамо у Пхотосхопу.
Једна ствар коју смо урадили је да списак од седам категорија учинимо статичним. То је само један позив мање вп_лист_пагес () и тиме мало ефикаснији. Ако икада променимо категорије, то је тако велика ствар да није велика ствар поновити посету за овим кодом.
Овде нам је у основи потребан дизајн са две колоне. То је довољно лако урадити са само плутајући неколико див-ова (или што је вероватније, користећи наш постојећи мрежни оквир). Али то нам не помаже да направимо колоне „једнаке висине“ како овде то налаже наш дизајн. Напокон, див-ови без постављених висина високи су само онолико колико је садржај у њима. Постављање висине на див је генерално лоша идеја.
Да бисмо добили колоне једнаке висине, лажирамо их са згодном малом идејом где користимо један велики див омотача (који је висок као највиши од колона које садржи) и постављамо градијентну позадину. Не градијент који прелази из једне боје у другу, већ градијент са чврстим заустављањима управо тамо где се колона ломи. Ово нам даје боје сиве с леве и беле с десне стране које су нам потребне.
Различите боје позадине примењујемо на сваку везу категорије у левој колони са низом селектора: нтх-цхилд (). Одлучили смо се за овај начин, а не за часове, јер је редослед боја важнији од подударања боје са категоријом (прилично је произвољан).
Пре него што завршимо са овим сцреенцаст-ом, постижемо ефекат сенке (наглашено раздвајање између колона) применом псеудо елемента на навигацију која се протеже од врха до дна странице. Овај псеудо елемент има свој властити градијент од црне до прозирне боје који чини да изгледа као сенка.