Implementing the jumbotron

We will continue with the code from the preceding chapter, which extended the base with a timeline on the home page. We will first need to create a new page to store the user's profile page.

Create a new file in your root directory called profile.php. The project structure will now be as follows:

• CSS
• Images
• index.php
• JS
• profile.php
• SNIPPETS

Now, we have our new file that will contain all of the user profile code. As usual, ensure that the PHP require code lines are placed inside the profile.php file.

Creating a basic jumbotron with a banner image

Let's create a basic jumbotron as we did in Chapter 4, Creating the Introduction Section, along with a banner image. Add the following code to the profile.php file:

The code we added is nothing new; we have used this before. Let's take a look at jumbotron's result:

As usual, the code never works the first time. As can be seen from the preceding screenshot, there are two problems, as follows:

• The image overflows and needs to be restricted...