IN HTML, CSS and JS - MUST BE SEPERATE FILES - DO NOT COMBINE

******************HTML

1. Add an h1 tag with a class of text-center and add the text of Lesson 12 Project
2. Add a button with an onclick event. The onclick event should be called getLocation
3. Add a paragraph id of result
4. Add a paragraph id of msg

**************CSS

1. Set the body font family to sans-serif
2. Create a container class and set the following:
   • set the display to flex
   • justify all content to the center
   • align all items to the center
   • set the direction of the flex items to column
   • set the viewport height to 100
3. Create a button style and set the following:
   • set the background to darkblue
   • add a padding of 5px
   • set the color to white
   • set a border of 1px with a color of darkblue
   • set a border radius of 3px
   • set the font size to 22px
4. Create a class of text-center and set it to align the text to the center

******************JavaScript

//create a global variable called result //create a function called getLocation //create a variable that sets the value of true if the browser is Chrome //create an if statement with the following condition: if geolocation and the browser is Chrome, are both true, then show current position. Additionally, display a message that says "You're using Chrome, so you're cool!" //otherwise if the browser is not Chrome, then display a message that says "You're not on the cool list. Then display a link that will send the user to Chrome's download page." //if the above conditions are not met, then display a message that says "Geolocation is not supported by this browser." //create a function that will output the position to HTML