Create a file named outdooradventure.html that provides the same look and functionality as shown in the images

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

Requirements:

 

Content

 

• Create a file named outdooradventure.html that provides the same look and functionality as shown in the images on previous pages in this requirements document

• Starter files include a file containing text, and all images. You may rename images if you wish. Please include at least 3 additional images for the gallery. The images included have been sized at 150px in height and width. You should size other images the same to provide a pleasing alignment.

• The <title> element should contain Outdoor Adventure.

• The colours used in this Web page: white, black, #0172BA, #089247, #ECF7FE, #003557 and #CEECFE.

• All links in the social media bar should point to appropriate social media URLs with a tooltip that shows the name of the social media site. The @ icon should be an email link pointing to info@example.com. Icons are, from left to right, Facebook, Twitter, Instagram, Pinterest, YouTube and email.

 

 

.

 

CSS

 

• Create a file called outdooradventure.css that will contain the CSS required for elements that would be common to all other Web pages in the Outdoor Adventure site. Even though you are creating only one Web page now, you can imagine other web pages could be developed for this site. The outdooradventure.css file should contain all of the style rules for the header, nav and footer. Other style rules should be embedded in the outdooradventure.html page.

• The first style rule in both files should be the following:

 

*{

margin: 0;

padding: 0;

}

 

• Subscribe and Sign-in are links that point to #. When the mouse hovers over the link, the colour should change to #089247 as shown below.

 

 

 

 

• The nav links should all point to #. When the mouse hovers over the link, the colour should change to #003557 as shown below.

 

 

 

 

 

Layout

 

• Use grids for layout for the header, main content and footer (3 separate grids).

• Use a positioning for the nav that causes it to remain at the top of the browser window, even though the rest of the page is scrolling, as shown below.

 

 

• The column containing the mountain images should be a fixed width, which is the width of the images. The column containing hiking should expand and contract as the width of the browser expands and contracts. The column containing canoeing should be a minimum width of 200 pixels, and a reasonable maximum width that allows the hiking column to be the larger column.

NOTE: If you are running an ad blocker, you might see placeholders or nothing where these images should be. Some ad blockers look for a folder called "ads" and block the images.

• The Gallery images should be displayed in a flexbox.

• There is always whitespace on the left and right of the main section underneath the nav, and this section is centered.

• There is always whitespace underneath the logo in the footer.

 

 

 

Attachments:

Expert's Answer

403 Times Downloaded

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of