Commencing Page 3

Using the wireframe as my guide again, I decided to try and build the third section of the website.

On the wireframe, it shows 3 boxes perfectly side by side. By adding the class "col-md-4" to all 3 boxes (so that the total would be 12), this section of the page would be properly aligned. The thing is, with Bootstrap, there are automatically paddings and margins that come along with the class.

For the main image, I simply added it into the div with the class "col-md-4". This way, the images would fit perfectly into the divs.

1st attempt of redesigning website

For the button there are two classes: one being the main one and the other one being a pseudo class (:hover). For the buttons, I reduced the border to give it a bit of a more minimalistic look. I then added a 0.5 sec animation that would change the background color and content inside the button. When the mouse hovers over the button, a large arrow slowly fade in.

Animated hover button was added for aesthetical purposes