Technical Document/ Info Guide

Building a info guide with a selective side bar menu to easily navigate page.

by Michael Prosser

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technical Documentation</title>
    <link src="stylesheet" href="styles.css">
  </head>
  <body>
<nav id="navbar">
  <header>A Guide On Telescopes</header>
  <ul id="ul-navbar">
    <li> <a class="nav-link" href="#BEGINNER'S_GUIDE_TO_USING_A_TELESCOPE">BEGINNER'S GUIDE TO USING A TELESCOPE</a></li>
    <li> <a class="nav-link" href="#ASSEMBLING_YOUR_TELESCOPE">ASSEMBLING YOUR TELESCOPE</a></li>
        <li> <a class="nav-link" href="#GET_TO_KNOW_YOUR_FIRST_TELESCOPE">GET TO KNOW YOUR FIRST TELESCOPE</a></li>
    <li> <a class="nav-link" href="#HOW_YOUR_TELESCOPE_MOVES">HOW YOUR TELESCOPE MOVES</a></li>
    <li> <a class="nav-link" href="#UNDERSTANDING_TELESCOPE_EYEPIECES">UNDERSTANDING TELESCOPE EYEPIECES</a></li>
    <li> <a class="nav-link" href="#ALIGNING_&_USING_YOUR_TELESCOPE’S_FINDER">ALIGNING & USING YOUR TELESCOPE’S FINDER</a></li>
    <li> <a class="nav-link" href="#BEFORE_YOU_START_OBSERVING">BEFORE YOU START OBSERVING</a></li>
       <li> <a class="nav-link" href="#START_OBSERVING!">START OBSERVING!</a></li>
       <li> <a class="nav-link" href="#Reference">REFERENCE</a><li>
    </ul> 
</nav>
<main id="main-doc">
<section class="main-section" id="BEGINNER'S_GUIDE_TO_USING_A_TELESCOPE">
  <header>BEGINNER'S GUIDE TO USING A TELESCOPE</header>
  <p>Congratulations! You’ve purchased your first telescope - an optical time machine that will help you explore our amazing Universe. You may have aspirations of discovering comets or becoming a published astro-imager someday; or you might want to simply enjoy views of the moon & planets from time to time. Whatever your astronomy goals, one thing’s for certain: We all must start at the beginning, and this guide will show you how to use a telescope. Feel free to skip to sections that intrigue you by using the Table of Contents at the end of this Guide, or go...

CSS

body {
  display: flex;
  flex-direction: row;
  line-height: 1.5;
  color: #4d4e53;
  background-color: white;
  margin: 0;
  padding: 0px; 
}

header {
  color: black;
  font-size: 1.8em
}
nav header {
  text-align: center;
}
#navbar {
  width: 25%;
  height: 100vh;
  flex-direction: column;
justify-content: flex-start;
display: flex;
position: fixed;

}
#main-doc { 

  width: 70%;
  height: 100vh;
  margin: 20px;
  margin-left: 25%;
  
  
}
@media (max-width: 600px) {
  body {
    flex-direction: column;
  }
  #main-doc {
    max-width: 100%;
  }
  #navbar {
    width: 100%;
    margin-bottom: 40px;
  }
}
.nav-link{
  text-decoration: none; 
  line-height: 1.5;
  color: #4d4e53;
  background-color: white;
  text-align: center; 
}
#ul-navbar  {
  list-style-type: none;
}
#ul-navbar li {
    border-top: 1px solid black;
  padding: 50px 0;
  margin: 0px; 

code {
  background-color: #F5F5F5;
  display: block;
  padding: 10px;
  text-align: left;
  width: 70%;
  border: radius(50%);
}