Jan 20 - 'About us' Modification

Me and my client have been undergoing discussion this week, and we have completed our modification of our 'About Us' webpage.

Using email, me and my client have discussed how we can modify our webpage:

From our discussion, we decided to use a 'scroll box' and change the color scheme of the text box. Also, using rounded edges for the photo would also increase the visual appeal of the website.

First of all, we changed the text box for the 'About Us' webpage.

We used the word attributes from the 'Contact Us' webpage (font-family). 'Overflow: auto' creates the scroll box. 'background-color: white' creates a white background for the black text, so that it can easily be read. We also moved it slightly further down by 20px using 'margin-top'.




We then added a title to the webpage as well. This is because it would inform the user which webpage they are on. To do this, we put <center> tags inside a div, and used the div to give the title its attributes:

Using percentage for the margin and width attributes makes sure that the width will always fit the monitor of the user. Using 'border-bottom' also gives the title an underline.



Finally, we rounded the edges of our picture to finish modifying the webpage.

To round the edges of the picture, I used 'border' and 'border-radius' to create an invisible border that will round the edges of the picture. I learnt this by experimenting through different ways to get this task accomplished. First of all, I tried to round by using photoshop or other photo editing software, but my client told me not to do so this way because if she wants to change the picture, she would need to also round the edges of the other picture using photo editing software as well (which would be inconvenient). Instead, we experimented with other methods and finally used this method.

Here is what the modified webpage looks like now:

We will modify my final webpage(s) next lesson, after discussion with my client.