More Elements

Here are some extra elements you can add to your website! For each of these examples, you'll need to replace certain HTML elements in your index.html file and certain rules style.css file.

Navigation Bar

Below are the code snippets to add the following navigation bar to your site.

This is the HTML snippet that should replace your current <header> tag in your index.html file:

          
    <header class="header">
      <p>
        Header
      </p>
      <nav>
        <a></a> <!-- These invisible links are left blank to center the others! -->
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a></a> <!-- Another invisible link for formatting -->
      </nav>
    </header>
          
        

To style the nav bar correctly, you'll need to replace the rules for your .header class and add the new rules for the nav (nav bar), nav a (links inside the nav bar), and nav a:hover (links in the nav bar when a mouse is hovering over them) HTML elements.

This is the CSS code that replaces everything in the style.css file:

          
.header {
  text-align: center;
  padding: 0px;
  margin: 0px;
}

nav {
  display: flex;  /* Allow children to be positioned with formatting */
  justify-content: space-between;  /* Horizontally distribute children */
  align-items: center;  /* Vertically align children */
  width: 100%;
  height: 2rem;  /* 1rem = computed font size (usually 16px) */
  background: black;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  color: white;
}

nav a:hover {
  color: orangered;
}
          
        

Header Image

Below is the code snippet to add a background image to the header of your site.

Note that you have to download the image first! Place it in a directory/folder called "assets" in your base directory next to your home page's HTML file. To add your image, you'll need to replace the rules for your .header class in your style.css file:

          
.header {
  display: flex;
  align-items: flex-end; 
  height: 10rem;
  background-image: url("/assets/webb.png");
  background-position-x: center;
  background-position-y: center;
}

nav {
  display: flex;  /* Allow children to be positioned with formatting */
  justify-content: space-between;  /* Horizontally distribute children */
  align-items: center;  /* Vertically align children */
  width: 100%;
  height: 2rem;  /* 1rem = computed font size (usually 16px) */
  background: black;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  color: white;
}

nav a:hover {
  color: orangered;
}