The next page for our restaurant website is the About page. This page will feature a two-column layout and some custom text styles to give it a unique look. Here's a screenshot of what we'll be building:
The first thing that we need to do is create a new file called about.ejs. Next, we'll change the feature image as displayed in the preceding screenshot. To do this, we'll simply update this image line of code:
<img src="img/banner-about.jpg" width="1170" height="500" alt="Public Restaurant About Banner">
Make sure you update the alt text to optimize your image for search results. The next thing we need to do is set up our two-column layout. I'm going to wrap a <div> with a class of .page-body around the row, as we've done in the past:
<div class="page-body">
This will allow us to apply some padding around our main page body:
.page-body {
padding: (@padding * 4);
}I do this to add some whitespace and give the layout room to breathe.