The profile page is the public-facing page of your social network. If someone is searching for you on the website, this is the page that they will see. In this first template, we will define a three-column layout that will be used through all the pages of this project. We'll also set up some new partials for the sidebar elements of the profile. In this way, we can modularize the design and reuse some of the parts where it makes sense. Let's start by creating a new file called index.ejs and saving it to the root of the project. As I mentioned, our project will have a three-column layout built upon the following grid:
I'm using the
container-fluidclass here because I want the layout to span the entire width of the viewportI'm using a three-column grid of 25%, 50%, and 25%
<div class="container-fluid"> <div class="row"> <!-- left side //--> <div class="col-lg-3"> .. </div> <div class="col-lg-6"> .. ...