10. Adding pages

Now that the styling is well advanced, the moment has come to create the other three pages. This is the last step towards completing the website.

10.1 Copying the index

We are going to create the remaining three pages by making three copies of index.html. To do this, go to your website folder on the desktop using Windows Explorer or the Apple Finder. By right-clicking on the index.html file you can copy it and then paste it straight back again with the right mouse button. Repeat this step twice more so that you end up with three copies of the original index.html. By right-clicking again you can change the file name. Give the three new files the following names:

• leonardo.html
• osiris.html
• contact.html

Finally, it is now a matter of changing the title and paragraph texts of the three new pages. To do this, open the three files with your text editor and change the content of the h1 and p containers. You can use three texts for this from this text document.

If you also want the images leonardo.jpg, osiris.jpg and learnit.jpg in the folder pic and you change the file names of the images in the code, then we have a coherent whole.

10.2 Fine-tuning

When the entire website uses one CSS file, it is easy to change the design. By changing or adding the following rules, the site looks completely different

• In the body selector, change the background colour to #00B4FF;
• Change the padding of the h1 and p selectors to 0px 20px 0px 20px;
• Add this line to the h1 and p selectors color:#ffffff;
• In the a selector, change the colour to #ffffff;
• Add this code to the a selector text-shadow: 2px 2px 2px #00B4FF;
• In the div selector, change the height to height:500px;
• In the div selector, change the background colour to #e35226;
• Add this rule at the bottom of the stylesheet ul li {font-variant: small-caps;}