It's time to code the tastiest part of our restaurant website (sorry, that was a terrible pun). For our menu page, we'll use a three-column layout combined with some additional modal popups for our featured dishes. The following is a preview of what the page will look like:
As you can see, I've kept the layout pretty minimal, which is my style and will transfer well to the mobile view. Let's start by going over the page header style that is used for each section of the menu.
For each section of the menu, I'm using a <h2> tag with the Bootstrap .page-header class to make it stand out. Here's what the code looks like:
<h2 class="page-header">Appetizers</h2>
Since we don't want our site to look like a generic Bootstrap project, I'm going to customize the look and feel of the page-header component:
.page-header {
padding-bottom: (@padding * 1.5);
margin: @margin 0;
border-bottom: (@border-size * 5) @border-type @border-color...