Building Page4

Just like the other pages, I'll be using Bootstrap to make the page interactive. The two buttons will be a 'pager' button that is part of the Bootstrap CSS and Javascript.

When designing the page, I split it into 2 sections. The image / panorama and the individual’s person section.

Panorama

The Panorama

Using Bootstrap as the basis, I made the Panorama section ‘col-md-12’ to make the image fit the entire page. For aesthetical purposes, I gave the panorama a class (panorama_all) and remove the margins that came along with it. Bearing in mind that I was using Bootstrap, I had to add the !important tag to make sure the ‘margin: 0px’ applied to the image.

Individual’s section

The Cabinet

On the other hand, for the individual’s section, I applied ‘col-md-4’ to each div / image as there were 3 images per row (as long as each row adds up to 12, the rows would scale properly). For the top, I added the Bootstrap CSS ‘pager’ class to the HTML button div which automatically gave it the standardized look of a typical footer. The buttons looked too close to each other, hence I added a padding to the top of the padding and increased the margin left and right to the button.

 I also decreased the border-radius on the 2 boxes for aesthetical purposes.

After that was done I split the 12 members of the council into 2 categories, the first one being the 'General Cabinet' and the second one the 'Apprentice Cabinet'. For this I created a duplicate of the first category and applied the CSS function {display: hide}. By doing so, only 1 of them shows up.