Passage one Ransbys Unisex Boutique (RUB) is a first class Boutique in the city of Accra with a number of branches in different suburbs. Since 2004, RUB has been running a website which allows customers to browse through it huge catalogue of clothing. Customers can even order and get their clothing delivered to their door steps. The website has a home page which displays the best deals and some recently added items. Apart from that, regular customers can register on the website to get discounts on certain items in certain seasons. In all, the website has twelve web pages with a uniform colour code and structure. Use the passage one above to answer the questions below: Question 1: [37 Marks/ On First Semester 2013-2016 emnet Tech and W Babys Dransbyboutique.com po 1 pe 2 TART-utsty E with left: 100px background:#009906 boborder-box paddinge 101 ht: 300px for 1000000 color:EE: The home page of the RUB's website has a page layout as shown on figure 1. Figure 1. Page layout The layout was created by applying CSS rules to the div, header, nav, aside, article and footer tags of html 5 which carefully divides the page into 5 sections. The page is 600 pixels wide and has a 1 pixel, red solid outer border, with 0, 20%, 0 and 20% for top, right, bottom and left margins respectively. For all 5 sections, the distance between any content and the walls of its container should be 5 pixels on all sides. The top section has a background of colour code #770000 and a height of 100 pixels. The left section has a background of colour code #dcd9c0 and 300 and 80 pixels for its height and width respectively. The center section has a background of colour code #ffed53 and 300 and 400 pixels for its height and width respectively. While the left section has a background of colour code #009906 and 300 and 120 pixels for its height and width respectively. The bottom section has a background of colour code #221122 with a height of 30 pixels. The layout was achieved by applying the CSS rules in a CSS file called "layout.css" to an HTML file called "layout.html. Apart from what is stated here above, all other information needed for the design can be found on the figure itself. 2. Using the CSS and html 5, write the code that will generate the above page layout. (25 Marks/ b. As the web master for RUB, you were asked to load an image banner called "banner.png" as the background of the top section of the page and insert the following text on the right bottom corner of the background image: RUB Ransbys Unisex Boutique Starting from the creation of the top section and ending when the top section closes, rewrite the CSS and HTML code that will achieve this. [2 Marks) c. You are tasked to add three (3) hyperlinks (Link 1, Link 2 and Link 3) in the top left corner of the left section. Each link is a list item of an unordered list but without the list type preceding it. Upon clicking a link, it should open an image of the same name as the link, of any format in a different window. Starting from the creation of the left section and ending when the left section closes, rewrite the CSS and HTML code that will exhibit these functions. [3 Marks) d. Starting from the creation of the middle section and ending when the middle cell closes, rewrite the code that will create the middle cell and load a video of any format, width 300pixels and height 250pixels. Be sure to include the video controls. (3 Marks) e. Starting from the creation of the right section and ending when the right cell closes, rewrite the code that will create the right cell and load the results of a survey in it. The results of the survey is as shown on figure 2 below: Facebook file:/// Passage one Ransbys Unisex Boutique (RUB) is a first class Boutique in the city of Accra with a number of branches in different suburbs. Since 2004, RUB has been running a website which allows customers to browse through it huge catalogue of clothing. Customers can even order and get their clothing delivered to their door steps. The website has a home page which displays the best deals and some recently added items. Apart from that, regular customers can register on the website to get discounts on certain items in certain seasons. In all, the website has twelve web pages with a uniform colour code and structure. Use the passage one above to answer the questions below: Question 1: [37 Marks/ On First Semester 2013-2016 emnet Tech and W Babys Dransbyboutique.com po 1 pe 2 TART-utsty E with left: 100px background:#009906 boborder-box paddinge 101 ht: 300px for 1000000 color:EE: The home page of the RUB's website has a page layout as shown on figure 1. Figure 1. Page layout The layout was created by applying CSS rules to the div, header, nav, aside, article and footer tags of html 5 which carefully divides the page into 5 sections. The page is 600 pixels wide and has a 1 pixel, red solid outer border, with 0, 20%, 0 and 20% for top, right, bottom and left margins respectively. For all 5 sections, the distance between any content and the walls of its container should be 5 pixels on all sides. The top section has a background of colour code #770000 and a height of 100 pixels. The left section has a background of colour code #dcd9c0 and 300 and 80 pixels for its height and width respectively. The center section has a background of colour code #ffed53 and 300 and 400 pixels for its height and width respectively. While the left section has a background of colour code #009906 and 300 and 120 pixels for its height and width respectively. The bottom section has a background of colour code #221122 with a height of 30 pixels. The layout was achieved by applying the CSS rules in a CSS file called "layout.css" to an HTML file called "layout.html. Apart from what is stated here above, all other information needed for the design can be found on the figure itself. 2. Using the CSS and html 5, write the code that will generate the above page layout. (25 Marks/ b. As the web master for RUB, you were asked to load an image banner called "banner.png" as the background of the top section of the page and insert the following text on the right bottom corner of the background image: RUB Ransbys Unisex Boutique Starting from the creation of the top section and ending when the top section closes, rewrite the CSS and HTML code that will achieve this. [2 Marks) c. You are tasked to add three (3) hyperlinks (Link 1, Link 2 and Link 3) in the top left corner of the left section. Each link is a list item of an unordered list but without the list type preceding it. Upon clicking a link, it should open an image of the same name as the link, of any format in a different window. Starting from the creation of the left section and ending when the left section closes, rewrite the CSS and HTML code that will exhibit these functions. [3 Marks) d. Starting from the creation of the middle section and ending when the middle cell closes, rewrite the code that will create the middle cell and load a video of any format, width 300pixels and height 250pixels. Be sure to include the video controls. (3 Marks) e. Starting from the creation of the right section and ending when the right cell closes, rewrite the code that will create the right cell and load the results of a survey in it. The results of the survey is as shown on figure 2 below: Facebook file:///