Technical Documentation Page

Lauro235

by lauro235

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
  />
    <title>Technical Documentation Project</title>
</head>
<body class="scroll">    
    <nav id="navbar" class="nav1">
        <div class="nav-header">
            <header id="document-title">HTML Documentation</header>
            <button class="nav-toggle">
              <i class="fas fa-bars"></i>
            </button>
        </div>
        <ul class="links">
            <li><a class="nav-link" href="#Introducing_HTML">Introducing HTML</a></li>
            <li><a class="nav-link" href="#How_it_works_in_brief">How it works in brief</a></li>
            <li><a class="nav-link" href="#Syntax">Syntax</a></li>
            <li><a class="nav-link" href="#Accessibility_in_more_depth">Accessibility in more depth</a></li>
            <li><a class="nav-link" href="#How_to_record_information_using_HTML">How to record information using HTML</a></li>
            <li><a class="nav-link" href="#Closing_remarks_and_tips">Closing remarks and tips</a></li>
        </ul>
      </nav>
      <main id="main-doc" class="initial-main">
        <section class="main-section" id="Introducing_HTML">
          <header><h2>Introducing HTML</h2></header>
          <p>HTML Stands for HyperText Markup Language and was originally developed in late 1991 by Tim Berners-Lee.</p>
          <p>It defines the meaning and structure of websites. A website in it's most basic form is simply content and structure. All other aspects of the web relating to visual design and interactive feature are not covered by HTML.</p>
          <p>"Hypertext" refers to links that connect from one web page to one another, either within the same website or...

CSS

/* 
=================
Resources

Fixed/sticky relative to parent
https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container

Styling <code>
https://css-tricks.com/styling-code-in-and-out-of-blocks/

A look at animating with transition properties
https://www.youtube.com/watch?v=Nloq6uzF8RQ&ab_channel=KevinPowell

Fun outline animations
https://www.youtube.com/watch?v=3LlLkapKw6Q&ab_channel=KevinPowell

Animating box shadow effects
https://www.youtube.com/watch?v=u6Rur7G8HNY&ab_channel=KevinPowell

Animating Borders
https://css-tricks.com/animating-border/

=================
*/

/* 
==========================================
Fonts 
==========================================
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,700;1,400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* 
===============================
Variables
===============================
*/

/* Colors for different sections 

body text - black
#nav-bar background color - white
section background color - #fbf6fc
#toggle-button .bar - background-color: #817281;
button - background-color: rgb(64, 224, 176);
button:hover - background-color: rgb(139, 139, 56);
.links a - color: black;
.links a:hover - background-color:#bbbbbb;
#navbar - background-color: transparent;
.rectangle - background-color: white;


*/

:root {
    /* Colours */
    --var-lightest: #fefdd4;
    --var-light-1: #dcdba1;
    --var-light-2: #bab98a;
    --var-dark-1: #998a88;
    --var-dark-2: #797986;
    --var-dark-3: #685576;
    --var-dark-4: #453355;
    --var-sky-blue: #87CEEB;
    --var-midnight-blue: #19197d;
    --var-off-white: #f5ccca;
    /* Fonts */
    --var-primary-font: 'Source Sans Pro', sans-serif;
    --var-secondary-font: 'Roboto', sans-serif;
    --var-wide-letter-spacing: .1em;
}

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding:...

JavaScript

const navToggle = document.querySelector('.nav-toggle')
const navBar = document.querySelector('.nav1');
const footer = document.querySelector('.initial-footer');

const main = document.querySelector('.initial-main');

const links = document.querySelector('.links');
const myList = document.querySelectorAll('.nav-link')

const body = document.getElementsByTagName('body')[0];

navToggle.addEventListener('click', function(){
    navBar.classList.toggle('nav2')
    links.classList.toggle('show-links'),
    footer.classList.toggle('secondary-footer'),
    main.classList.toggle('hide-main')
    body.classList.toggle('hidden-scroll')
});

myList.forEach(item => {
    item.addEventListener('click', event => {
        navBar.classList.remove('nav2');
        links.classList.remove('show-links');
        footer.classList.remove('secondary-footer');
        main.classList.remove('hide-main')
    })
  })