7 Spoons
- modularity (both pages have a clear structure: header, body, footer);
- responsiveness:
- The header has 4 different layouts: one with all items placed horizontally, one with 2 symmetric columns of items, one with all items placed vertically on the left, and one with all items accessible from an overlay;
- The footer has 2 layouts: one with a sitemap and one with a "back to top" link (for smaller screen width);
- The image size is dynamic;
- The body of the home page contains an optional part at larger screen widths (an image);
- The body of the menu page consists of a list of items that has 4 different layouts (3 columns, 2 columns, 1 column, 1 column without text).
- All css was written by the author. The only use of javascript is for the buttons in the menu that appears at small screen widths (less than 600px), because css alone cannot be used to detect clicks and hover effects are inappropriate for mobile screens.
- All icons are merged in a css sprite (and displayed as background images);
- The html and css are valid (the warning about the moz-border-radius css attribute cannot be eliminated), the site validates with the wave accessibility tool. The contrast was validated with the colorchecker.com site (text color: #F2EBB0, average background color: #08070C).
Known issue: The layout may be disrupted if the text size is changed.