Website Navigation Menu

The code for this week's session contains:

  • A simple navigation bar, made with:
    • A heading,
    • Some links,
    • And a <nav> element (similar to a div).
  • And the main content(article) with your own content.

The source code consists of two files, one for the homepage and one for the CSS.

The HTML code for the homepage for this week is as follows:

<!DOCTYPE html>

<html>
  <head>
    <title>My Website</title>
	
	<link href="CD Week3.css" type="text/css" rel="stylesheet">
	
  </head>
  <body>
    
	<nav>
	  
	  <a href="home.html">Home</a>
	  <a href="about.html">About</a>
	  <a href="contact.html">Contact</a>
	  
	  <h1>Manchester United</h1>
	  
	</nav>
	
	<article>
	
	  <h2>Welcome!</h2>
	  
	  <p>Hi, this is my website</p>
	
	</article>
	
  </body>
</html>

The CSS code for this week is as follows:

html, body {
  margin: 0;
  height: 100%;
  background: lightgrey;
}

nav {
  background: darkblue;
}

nav h1 {
  display: inline;
  margin-left: 150px;
  color: lightblue;
}

nav a {
  display: inline-block;
  color: lightblue;
  padding: 10px;
  margin-right: -5px;
}

article {
  min-height: 100%;
  width: 80%;
  background: white;
  left: 10%;
  position: relative;
}