In the previous section, we covered the navigation bar and the carousel. Now, we will be creating the tabs that will have all the images. This section will come just under the carousel that we created. Let's look at what we are targeting:
As you can see, we have three tabs, one that contains all the photos, and then these photos are categorized in the other two tabs. So, let's get started. In our Visual Studio Code, where the carousel section ends, we are going to add one more section tag and give it id="maintabs". Now, looking at the layout, we can see there are two rows, and in each row, we are going to have three columns. We are going to create the All Photos tab now, the other two tabs will follow the same approach. Let's look at the code for the tabs now:
<section id="maintabs">
<div class="container...