esperancaJS
commented
9 years ago dooooone! going to sleep :)
Closed mariacovasgrilo closed 9 years ago
esperancaJS
commented
9 years ago dooooone! going to sleep :)
Once you click on one of the lists from the previous issue #18 then you end up here:
fair trade, color, popularity, etc etc style: /* Fair Trade: */ font-family: Montserrat-Regular; font-size: 13px; color: #A59FA3; line-height: 29px;
------------------------ tabs "in this list" and "add to list":---------------------------------- /* ACTIVE TAB: / font-family: Montserrat-Regular; font-size: 11px; color: #F5F5F5; letter-spacing: 0.72px; / UNACTIVE TAB: */ font-family: Montserrat-Light; font-size: 11px; color: #FFFFFF; letter-spacing: 0.72px;
Little shadow you see under these tabs is the following: box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
Little orange line of these tabs: border: 2px solid #E53527; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
-------------------------------- items' thumbnails ------------------------------------ Circle with 34px diameter.
/* Color filter over the image: */ background: rgba(32,29,32,0.50);
This cover filter disappears on hover.
/* Item's names: */ font-family: Montserrat-Light; font-size: 13px; color: #F5F5F5;
/* Item's data */ font-family: Montserrat-Light; font-size: 11px; color: #767075;
Height of each item's space is 50px. Which is also the area marked in grey there.
--------------------------- Clicking on the sorter icon -------------------------------
Margins of the text relatively to the box are of 15px;
/* Rectangle: */ background: #F5F5F5; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.70); border-radius: 1px;
/* hover bg color: */ background: rgba(215,209,212,0.70);
/* ALPHABETICALLY: */ font-family: Montserrat-Light; font-size: 10.9px; color: #302B2F; letter-spacing: 0.72px; line-height: 28px;
-------------------------------- Search behavior ------------------------------------
The augmenting glass icon should become highlighted (w/ red color) on hover and then the Title of the section gives space for a search bar.
/* Lines: / border: 1px solid #E53527; / Ban: */ font-family: Montserrat-Light; font-size: 13px; color: #F2F1F1;