Feb 1 - Modifying 'Interior/Exterior'

Me and my client have been discussing on modification for our final webpages (interior and exterior design webpage, but the interior webpage is shown here only because they both use the same structure) in our website through verbal discussion, and we have came up with a few ideas. These include:

- Increasing each gallery thumbnail image size

- Rounding edges of images, and borders

- Adding a title to the page (as we did with the previous webpages for modification)

- Creating animations by changing color of borders, adding box-shadows, etc.

First of all, we applied general changes to the website such as editing the navigation bar (as seen from previous blog posts on dec 15 and jan 3). Then, we started to add the title to the webpage. We added 2 new divs, ".note" and ".title". ".note" is to inform the user that the images can be clicked on to be enlarged, and ".title" is for the title.

The attributes used are based off from ones previously used in the other webpages. We experimented with different sizes for different attributes (eg. margin, font-weight, font-size) and found this set of attributes for the 2 divs work best.

Afterwards we modified the image gallery to make it look better. Firstly, we changed the border color, radius, and added an animation.

The "color" attribute was changed from black to grey, and transition-duration was added to set the animation time for the .desc div.

The border-radius was added, and border was changed to grey from black. The "transition-duration" was also added to the .img div.

To create an animation, we decided that the color of the border and text would change when the specific image thumbnail was hovered on. A shadow would also be added for the picture.

Using this code, when ".img" was hovered on, it would change the border to black, the text in ".desc" would also be changed to black, and a shadow would be added to the images.










Then, we increased the size of the thumbnails for the picture gallery. We increased it by changing the size of the image width and height in HTML, and some other attributes in CSS.

Again in .div, we changed the "height" and "width" attributes and the "margin" attributes so that the height and width of the border will fit the size of everything inside the ".div".








Finally to finish our modification for this webpage, we rounded the edges of the picture. To do so, me and my client used the method that we used for the 'About Us' webpage - Creating an invisible border and using 'border-radius' to round the edges.

Here is what the webpage looks like after we modified it:

I will start to change the placeholder text and images as my client sends them to me, and upload the website onto my hosting site. Then, I will hand over the website to my client.