This is all the HTML
<!-- nav bar -->
<!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="styles.css">
<script src="https://kit.fontawesome.com/2fe31d4da7.js" crossorigin="anonymous"></script>
<title>HTML Documentation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- nav bar -->
<nav id="nav-bar">
<header><span class="html-color">HTML</span> Documentation</header>
<div class="menu">
<li><a href="#intro" class="nav-link">Introduction</a></li>
<li><a href="#html_elements" class="nav-link">HTML Elements</a></li>
<li><a href="#html_headings" class="nav-link">HTML Headings</a></li>
<li><a href="#html_paragraphs" class="nav-link">HTML Paragraphs</a></li>
<li><a href="#html_comments" class="nav-link">HTML Comments</a></li>
</div>
<input type="checkbox" id="check">
<label for="check" class="open-menu"><i class="fa-solid fa-bars"></i></label>
</nav>
<!-- main -->
<main id="main-doc">
<!-- introduction -->
<section class="main-section" id="intro">
<header>Introduction</header>
<p>HTML stands for HyperText Markup Language. It is the most basic building blocks of a webpage. It gives a webpage structure and meaning, while other languages like CSS and JavaScript can be used to make the website pretty and make it function properly.</p>
<p>Think of it related to your body, HTML is the skeleton, CSS is the body features that defines a person such as hair type, skin color, eye color etc. Lastly, JavaScript is what makes the body move and live, such as the heart, brain, lungs etc. </p>
</section>
<!-- HTML Elements -->
<section class="main-section" id="html_elements">
<header>HTML Elements</header>
<p>The start tag, some content, and the end tag make up an HTML element.</p>
<code>
<p>
<h1>Hello!</h1>
</p>
</code>
<div class="code-div">
<code>
<p>
<p>Welcome to the Technical Documentation page!</p>
</p>
</code>
</div>
<p>The h1 and p in the greater than and less than signs is a starting tag and the tag at the end defined by a backward slash is the ending tag.</p>
<p>Here is a list of some tags:</p>
<ul>
<li><head></head></li>
<li><body></body></li>
<li><footer></footer></li>
<li><div></div></li>
<li><span></span></li>
</ul>
</section>
<!-- HTML Headings -->
<section class="main-section" id="html_headings">
<header>Headings</header>
<p>There are six heading tags h1, h2, h3, h4, h5, and h6. They are used to separate headings and subheadings on a webpage.</p>
<p>The h1 tag is the largest while the h6 tag is the smallest.</p>
<code>
<p>
<h1>This is an h1 tag</h1>
</p>
</code>
</section>
<!-- HTML Paragraphs -->
<section class="main-section" id="html_paragraphs">
<header>Paragraphs</header>
<p>the p element is used to define a paragraph in a webpage. It looks like this:</p>
<code>
<p>
<p>This is a paragraph.</p>
</p>
</code>
<p>When your writing text in a p element, an important note is that it ignores 2 or more spaces between words.</p>
</section>
<!-- HTML Comments -->
<section class="main-section" id="html_comments">
<header>Comments</header>
<p>A comment in HTML looks like this:</p>
<code>
<p>
<!-- this is a comment -->
</p>
</code>
<p>The browser will ignore everything that is in the comment. This is useful for explaining what a certain part of code does, and is very useful when collaborating with others on a project.</p>
</section>
</main>
</body>
</html>
This is all the CSS
* {
padding: 0;
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header {
font-size: x-large;
font-weight: bold;
}
p {
font-size: 1.3em;
}
#nav-bar {
display: inline-block;
padding: 0px;
background-color: rgba(0, 0, 0, 0.525);
position: fixed;
height: 100%;
color: white;
/* border: 5px solid gold; */
}
#nav-bar header {
padding: 30px;
text-transform: uppercase;
}
.html-color {
color: orangered;
border-radius: 3px;
padding: 7px;
background-color: rgba(0, 0, 0, 0.573);
}
#nav-bar a {
display: block;
padding: 15px 15px 15px 30px;
text-decoration: none;
font-size: x-large;
color: rgb(255, 255, 255);
transition: all 0.3s;
/* border: 5px solid gold; */
}
#nav-bar a:hover {
background-color: rgba(0, 0, 0, 0.575);
color: orangered;
}
#main-doc {
margin-left: 375px;
padding-right: 50px;
max-width: 1000px;
}
#main-doc .main-section {
padding-top: 50px;
}
#main-doc header {
margin-top: 30px;
}
#main-doc p {
padding-bottom: 15px;
padding-top: 15px;
margin-bottom: 20px;
margin-top: 20px;
}
#main-doc code p {
background-color: rgba(0, 0, 0, 0.046);
padding: 20px;
margin-top: 50px;
margin-left: 50px;
border-radius: 3px;
}
.code-div {
margin-top: 60px;
}
#main-doc ul {
margin-left: 50px;
font-size: large;
}
#nav-bar li {
list-style-type: none;
}
.fa-bars {
font-size: 2em;
color: orangered;
position: absolute;
top: 33px;
right: 30px;
display: none;
}
#check {
display: block;
}
.open-menu {
display: none;
}
/* media queries */
@media (max-width: 900px) {
#nav-bar {
width: 100%;
height: 100px;
background-color: black;
}
#nav-bar .menu {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background-color: rgb(27, 27, 27);
height: 87vh;
width: 100%;
position: fixed;
right: -100%;
}
#nav-bar .html-color {
color: none;
border-radius: none;
padding: none;
background-color: none;
}
#main-doc {
margin-left: 0;
padding-left: 15px;
padding-top: 75px;
}
#nav-bar a:hover {
background-color: transparent;
}
.open-menu {
display: contents;
}
#check {
display: block;
}
.open-menu:hover {
cursor: pointer;
}
#check:checked ~ .menu {
right: 0;
}
}
