AlanSimpsonMe · April 11, 2018 13:02
diff --git a/SimpleNavigation b/SimpleNavigation
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <title>Simple Nav</title>
    <!-- This is just for the font, and is optional. I'm using a Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
    <style>
        #wrapper {
            width: 80%;
            min-width: 800px;
            max-width: 1280px;
            margin: 1em auto;
        }

        nav {
            width: 100%;
            background-color:pink;
        }
        /* General look for the nav links */
        /* The widths should total up to a little less than 100%, so they fill the width without wrapping to two lines  */
        nav a {
            display: inline-block;
            width: 16%;
            text-align: center;
            text-decoration: none;
            font-size: 250%;
            font-family: 'Amatic SC', cursive;
            font-weight: bold;
        }
        /* Color for visited and unvisited links */

        nav a:link,
        nav a:visited {
            color: black;
        }
        /* Color for link under the mouse pointer */

        nav a:hover,
        nav a:active {
            color: lime;
        }

        article {
            margin: 2em 0;
            font-size: 120%;
        }
    </style>
 </head>

 <body>
    <div id="wrapper">
        <!-- Here is the nav bar. In real life each would point to a different page within the site -->
        <nav>
            <a href="index.html">HOME</a>
            <a href="index.html">THE STUDIO</a>
            <a href="index.html">CLASSES</a>
            <a href="index.html">TIMETABLE</a>
            <a href="index.html">PRICING</a>
            <a href="index.html">CONTACT</a>
        </nav>
        <article>
            The links above are fake in the sense that they all take you to this page. They're just to demonstrate how the link changes
            color when you point to it. That's handed by an a:hover{} style rule.
        </article>
    </div>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Simple Nav</title>
	<!-- This is just for the font, and is optional. I'm using a Google Font -->
	<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
	<style>
	#wrapper {
	width: 80%;
	min-width: 800px;
	max-width: 1280px;
	margin: 1em auto;
	}

	nav {
	width: 100%;
	background-color:pink;
	}
	/* General look for the nav links */
	/* The widths should total up to a little less than 100%, so they fill the width without wrapping to two lines */
	nav a {
	display: inline-block;
	width: 16%;
	text-align: center;
	text-decoration: none;
	font-size: 250%;
	font-family: 'Amatic SC', cursive;
	font-weight: bold;
	}
	/* Color for visited and unvisited links */

	nav a:link,
	nav a:visited {
	color: black;
	}
	/* Color for link under the mouse pointer */

	nav a:hover,
	nav a:active {
	color: lime;
	}

	article {
	margin: 2em 0;
	font-size: 120%;
	}
	</style>
	</head>

	<body>
	<div id="wrapper">
	<!-- Here is the nav bar. In real life each would point to a different page within the site -->
	<nav>
	<a href="index.html">HOME</a>
	<a href="index.html">THE STUDIO</a>
	<a href="index.html">CLASSES</a>
	<a href="index.html">TIMETABLE</a>
	<a href="index.html">PRICING</a>
	<a href="index.html">CONTACT</a>
	</nav>
	<article>
	The links above are fake in the sense that they all take you to this page. They're just to demonstrate how the link changes
	color when you point to it. That's handed by an a:hover{} style rule.
	</article>
	</div>
	</body>

	</html>