--Enhancements--

List of enchancement that has been made:

This particular page is intended to describe the enhancement for this assignment.

1. Crossfading Images-- One image to another with a timer (CSS animations)
• Commonly used as part of image galleries, or to show detail on products. This has traditionally been done in javascript by iterating over the opacity - using CSS transitions makes this very easy to add to your site.
• Had been used on:
• Index.html
• Product.html
• ProductA1.html
• ProductA2.html
• ProductA3.html
• ProductB1.html
• ProductB2.html
• ProductB3.html
• It requires knowledge on @keyframes and opacity and some basic calculations on the animation-delay which goes beyond the basic requirements of the assignment.
• Source Code
2. Responsive Web Design - Media Queries
• Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.
• Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen. Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.
• Had been used on:
• All of the html pages which included Header & Footer
• Index.html
• Product.html
• Enquiry.html
• AboutMe.html
• Enhancements.html
• It requires basic knowledge on CSS & @media and also mostly implements on header-mobile.css which references to the other html files as this was mainly beyond the basic requirements of the assignment.
• Source Code