HTML N CSS

1

HTML & CSS Amalgamated Assignment

(AY2022-23 S1)

Part 1

The Cat (Cathine’s) and Dong (Donald’s) Café main menu showing the homepage

Basic Specification – The Index Page:

1. Build a three-column navigation menu which serves as the index page

(index.html) according to the sample given, and all information will be

displayed at an iframe at the center of the page.

2. The navigation menu on the left should be updated from a simple list to a

menu with better (free to modify) look-and-feel.

3. Paragraph and pictures should all centered in the middle of page.

4. The default font should be verdana, but if it is not available then apply arial.

If arial is not found finally apply sans-serif.

5. All pictures should be stored under a directory named “images”.

6. The side-bar on the right contains a motto, the font used should be “Comic

Sans MS or Comic Sans or cursive.

7. Adjust the font to appropriate sizes according to needs.

8. The picture with a young lady holding a cup of coffee, should be place

beneath the motto with sufficient margin (6px for top/bottom, 2px for

left/right). With curvy boundary of about 5%.

9. This picture should take up a width of 90% of the sidebar with a border of

2

5px and a height of 300px. Padding is 6px and border should be 5px.

10. The background of the picture of the lady holding a cup of coffee is flashing

continuously with some colors by applying CSS animation. The color

transitions should be according to the following specification on background

colors:

 0% {background-color:pink;}

 25% {background-color:cyan;}

 50% {background-color:maroon;}

 75% {background-color:lightgreen;}

 100% {background-color:lightblue;}

The animation duration should be 2 seconds.

For more details of using CSS animation, you can reference the following

link: https://www.w3schools.com/css/css3_animations.asp

Note: The animation-duration property defines how long an animation

should take to complete. If the animation-duration property is not specified,

no animation will occur, because the default value is 0s (0 seconds).

11. When this picture with young lady holding a cup of coffee is being clicked, it

should open a new webpage (https://en.wikipedia.org/wiki/Coffee) about

coffee to be displayed on the iframe at the center.

3

Part 2

Building The Home Page

Build the home page according to the specification as shown in following:

The Home Page:

1. For the home page (homepage.html) here should be photos of three pets placed

near the top of page side by side horizontally. Each of them should be converted

to hotspots. When the user clicks on any of these images, one should see a new

page opens and displayed at the iframe at the center. Each picture showing a pet

should be set to a size of 300px by 200px for display with curvy border. The

addresses for the three hotspots are listed as follows:

 Doggy → http://en.wikipedia.org/wiki/Portal:Dogs

 Kitten → http://en.wikipedia.org/wiki/Portal:Cats

 Hamster → http://en.wikipedia.org/wiki/Hamster

4

2. The box at the center should have a curvy border with green colors (slightly

shadowed), it should be created with following style:

 Thick border width;

 Green color;

 Outset bolder style;

 Curvy border;

3. The paragraph shown in the box be highlighted in a kind of red (#ff0066) or similar

color.

4. The photo having a coffee mug with a plate of cookies should sit near the bottom

of the page with sufficient margins. A curvy border should be use for the photo.

The border should be red, inset and with red color. The size should be 350px *

200px.

5. The background of the homepage should be decorated by a picture (coffee-bg.jpg).

The picture should be set to cover the whole background of the homepage and the

default color of the background should set to grey (#cccccc;) and relative position

could also be used. The picture should be set at the center, and it should not be

repeated in the background.

6. Any active link (or picture hotspot) should show a blue solid border of 3px around

it when being hovered.

The Goddess Page:

1. The goddess page (goddess.html) should contain at least 2 iframes. Each of

them should have be sized 500px * 440px. In each iframe, one YouTube video

should be accommodated. The two iframes are linked to the following sources

(or other relevant sources as you wish) respectively:

• https://www.youtube.com/embed/g3uIdA2IiKw

• https://www.youtube.com/embed/-KFpL9DUyms

2. Note: some YouTube videos may not work due to restriction settings by the

owners. In case any of these links does not work, you can choose other

workable links instead.

3. The background of the homepage should be decorated by a picture (lovely-girl-

wallpaper.png). The picture should be set to cover the whole background of

5

the homepage and the default color of the background should set to grey

(#cccccc;). The picture should be repeated in the background in both the x and

y directions. The picture’s dimensions should be set on the background with

width and height of 200px and 300px respectively.

4. The heading “Lovely Goddess” and home link should be in yellow color, font

size is 1.6em, font family should be set to arial first, if it is not available then

use calibri, if it is still unavailable finally use verdana. It should be positioned at

the middle of the page. The goddess.html page looks like the following:

The Sensitive Map:

1. The kitten link should point to a new HTML page called sensitive_map.html

(displays at the central iframe of the three-column layout) containing a kitten’s

image as that in the main page but having smaller dimensions. Therefore, the first

step is to convert the kitten image into the appropriate pixel dimensions. The

dimensions should be set to 500px * 440px. The new image should be saved as

kitten2.jpg.

2. Once the image has been converted to smaller dimensions and saved, two

hotspots should be built around the kitten’s eyes. The hotspots on the left eye and

the right eye should point to https://placekitten.com/ and

6

http://www.catsocietyhk.org/ respectively. When the page is completed, the

output should look like the following:

https://placekitten.com/

http://www.catsocietyhk.org/

Load into a new web browser

window.

7

Part 3

Linking Pages Together

The Homepage:

1. When the three-column layout which is the index page (index.html) has been

completely loaded, the homepage should also be loaded to central iframe as the

starting page.

2. A home page link (on the left panel) should be created for user to navigate back

to the homepage when it is clicked.

3. The picture with a young lady holding a cup of coffee under the motto should

have an animated background flashing lights with 5 different colors.

8

The Goddess Page:

1. Put in a hyperlink to allow the user to navigate back to the homepage.

2. In general, follow the same text style, text sizes and background colors as that of

the homepage as default. As for the default font sizes, we follow the home

page, but if there this is a specific requirement on the title, make it more

specific and override the default fonts from that of the home page.

The Sensitive Map:

Put in a hyperlink to allow the user to click and navigate back to the homepage.

1. In general follow the same text style, text sizes and background colors as that of

the homepage as default. As for the default font sizes, we follow the home page,

but if there this is a specific requirement on the title, make it more specific and

override the default fonts from that of the home page.

9

Part 4

Adding Signature Dishes Link and Food Item Pages

Adding a signature dishes link for navigating to the page as shown below:

In the signature dishes page, we need to create a horizontal menu of different dishes

like the one shown as the following:

Build Signature Dishes Menu:

10

1. Google the term “signature dish” and obtain the definition (the first two

paragraphs) from wikipedia.

2. Find the picture of Goden Ramsay with a lam on sholders.

3. Create an external CSS file named as “sig_dish_style.css”.

4. Set the background with a picture (sign-dish-main.jpg).

5. Make sure each paragraph has a bigger starting letter, with a font size 200% larger

and the color of the first letter should be set to a purple color (#8A2BE2).

6. Build the blue header with round courners by applying the following CSS rules:

 Times New Roman is used as default font and Times and serif as backup

fonts;

 Center the hearder text in a blue background;

 Text colour should be set to white;

 Border radious should be 10px and provide 10 px of padding.

7. Image of Goden Ramsay should have the follwing settings:

 Goden’s picture always sits on the right of the page;

 The displayed size should be set to 350px * 400px;

 The boder style should be set to dotted with a margin of 5px;

 Boder width should be 10px and the colour should be lightyellow; and

 The picture should be displayed as circular with a dotted perimeter.

8. Create an unordered list of anchors for holding the following items:

 Meatloaf;

 Pepperoni Pizza;

 Cherry Pie.

11

You may reference a W3C tutorial on the following link:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu

for bulilding a simple horizontial CSS menu.

Note the use of “display: inline” CSS usage and how it affects the

orientation of the menu.

9. Each of the item anchor should have the follwoing CSS specification:

 font-family: “Trebuchet MS”, Helvetica, sans-serif;

 font-size: 1.3em;

 background-color:black;

 text color:white;

 padding: 10px;

 no text decoration;

 margin:10px; and

 a curvy border having a radious: 4px.

10. Use the anchor pseudo class and add the following specification:

 When mouse–in the back-ground of the selected item should turn

magenta; and

 the text color should turn yellow.

11. The body text (content) should be specified as:

 Font type is Trebuchet MS and Helvetica, sans-serif are backup fonts;

 Font size is 1.2em and the use the italic font style.

12. The footer (foot note) should be specified as the following:

 Use Trebuchet MS as the default font, and Helvetica, sans-serif as the

backup fonts;

12

 The font size is set as 1.2em;

 The height is 20px;

 Text color is green;

 Background color is gold;

 Use small-caps for the font apperance;

 Center the text;

 Pedding is 5px;

 Border-radius is 4px; and

 Make sure it is not affected by the right flaot of the picture.

 Make sure it is position close to the bottom of the page.

13

Build Food Item Pages:

Subsequent pages are build into the list for displaying the food items and make sure

each food item is displayed at the center of the page. These page are built according

to the following specification:

1. Each a picture (sign-dish.jpg) as the background of the page.

2. Create the home link that goes back the the signature dishes page on the top

left.

3. Create a link points to the next signature dish on the top right.

4. These links should show a lightgreen background color when being hovered.

5. Creat a table that show the following information: price, serving size, calaries

and calarises from fat about the food item, put the table at the center. Use

bolder font weight for the text content on the table.

Make sure the caption is displayed and the title is shown when the mousepointer is

rolled over on each image as shown in the following figures:

14

15

Website Structure:

It is assumed that the website is built according to the basic desktop computing

enviroment (responsive design is optional). The website structure of Cat and Dong

Café’s is shown as the following:

images/1095.jpg