Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>About Me</title>
    </head>
    <body>
        <header>

            <!-- <h1 style="text-align: center;color: darkgray;background-color: lightblue">About Me</h1> -->
        </header>
        <main>
            <h1 style="color:red; text-align: center;background-color:lightgray;">Class 1 Lab</h1>
            <p style="color:lightgreen;background-color: darkslategray;">What's your name?</p>
            <p style="color:darkorange;background-color: lightgray;">How old are you?</p>
            <p style="color:lightpink;background-color: darkslateblue;">What is your hobby?</p>
            <p style="color:darkmagenta;background-color: whitesmoke;">Where are you from?</p>
        </main>
        <footer>
        </footer>
                   <script>

                var userName = prompt("What's your name?");
                console.log(userName);
                var userAge = prompt("How old are you?");
                console.log(userAge);

                var userHobby = prompt("What is your hobby?");
                console.log(userHobby);

                var userOrigin = prompt("Where are you from?");
                console.log(userOrigin);

                var yearsDifference = userAge -26;
                Math.abs(yearsDifference);
                alert("Hello " + userName + "!" + " Nice to know that you are "+ userAge + " years old. There is only a " + yearsDifference + " Year gap between us! Fun!" + " It's also nice to know that you like "+userHobby + " I've always wanted to try that. " + "Youre from " + userOrigin + "? Interesting! My best friend's second cousin is from there too!");

            </script>
    </body>
</html>