HTML CODE FOR MS MORAN

<!DOCTYPE html>
<!-- name:          Date:
     Description:      -->
<html lang="en">
  <head>
    <title> Intro to HTML Template </title>
     <meta charset="UTF-8">
    <meta Name = "author" Content= "Adrian Pazmino"/>
    <meta Name = "description" Content= "Making Navigation Bars"/>
    <meta Name = "keyword" Content="Navigation Bars, Adrian Pazmino"/>
    <meta name= "viewport" content="width=device-width, inital-scale=1.0">

    <style>

       a{
        text-align: center;
        padding: 20px;
        border: 3px solid grey;
        font-family:cursive, sans-serif;
        background: lightgrey;
        border-radius:25px;
       }

      /*
      Text align lets the "buttons" stay in the middle of the webpage.
      The padding made the buttons more bigger, so you can click them.
      The border... it makes the border grey.
      The font-family made the font comic sans. The best font.
      The background made the background of the button dark grey.
      And finally, the border radius made the "buttons" curved.
      */

      a:hover{
        text-align: center;
        padding: 20px;
        border: 3px solid lightgrey;
        font-family:cursive, sans-serif;
        background: white;
        border-radius:25px;
      }

    </style>
  </head>
  <body>
  <!-- the "display='inline-block'" is there to turn the <a> into an Inline-block, so that I can make it move with "text-align: center;", which doesn't work. I'm stumped on that one.
  -->
  <nav>
 <a  display="inline-block" href="page1.html" style="text-decoration: none;">Page 1</a>
 <a display="inline-block" href="page2.html" style="text-decoration: none;">Page 2</a>
 <a display="inline-block" href="page3.html" style="text-decoration: none;">Page 3</a>
 <a display="inline-block" href="page4.html" style="text-decoration: none;">Page 4</a>
 <a display="inline-block" href="page5.html" style="text-decoration: none;">Page 5</a>
 </nav>
 <footer>
   <a  display="inline-block" href="page1.html" style="text-decoration: none;">Page 1</a>
 <a display="inline-block" href="page2.html" style="text-decoration: none;">Page 2</a>
 <a display="inline-block" href="page3.html" style="text-decoration: none;">Page 3</a>
 <a display="inline-block" href="page4.html" style="text-decoration: none;">Page 4</a>
 <a display="inline-block" href="page5.html" style="text-decoration: none;">Page 5</a>
 </footer>
  </body>
</html>