when i click the link, the website will show me a tip like this
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, innitial scale=1.0">
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<nav id="navbar">
<header>Python Programming</header>
<ul>
<li><a href="#Hello_World" class="nav-link">Hello World</a></li>
<li><a href="#Input_Function" class="nav-link">Input Function</a></li>
<li><a href="#While_State" class="nav-link">While State</a></li>
<li><a href="#For_State" class="nav-link">For State</a></li>
<li><a href="#List" class="nav-link">List</a></li>
<li><a href="#Tuple" class="nav-link">Tuple</a></li>
<li><a href="Dictionary" class="nav-link">Dictionary</a></li>
<li><a href="Mode" class="nav-link">Mode</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Hello_World">
<header>Hello World</header>
<p>When we get started, we need to write a simple code</p>
<p>Like this</p>
<code>print("hello world")</code>
<p>Then we can see "hello world" on the terminal</p>
</section>
<section class="main-section" id="Input_Function">
<header>Input Function</header>
<p>The function is the most important thing in program</p>
<ul>
<li>first,we need to declare a new function</li>
<li>second,we should design suitable arguments in the function</li>
<li>third, we must give a result to the function</li>
</ul>
<p>just like this:</p>
<code>fuction(argument)</code>
</section>
<section class="main-section" id="While_State">
<header>While State</header>
<p>we can use while state to make some circle</p>
<p>like this</p>
<code>while True:
print("i love you")
</code>
</section>
<section class="main-section" id="For_State">
<header>For State</header>
<p>we can use for state to iteration</p>
<p>like this:</p>
<code>for i in range(1,10):
print(i)
</code>
</section>
<section class="main-section" id="List">
<header>List</header>
<p>list can have more than one value</p>
<code>list1 = [1, 2, 3]</code>
</section>
<section class="main-section" id="Tuple">
<header>Tuple</header>
<p>Tuple is special list</p>
<code>tuple1 = (1, 2, 3)</code>
</section>
<section class="main-section" id="Dictionary">
<header>Dictionary</header>
<p>dictionary has keys and values</p>
<code>d1 = {'zxp': 1, 'fjl': 2}</code>
<ul>
<li>'zxp' and 'fjl' is a key</li>
<li>1 and 2 is values</li>
</ul>
</section>
<section class="main-section" id="Mode">
<header>Mode</header>
</section>
</main>
</body>
</html>
/* file: styles.css */
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
}
#navbar {
width: 200px;
height: 100%;
border-right: 2px solid blue;
position: fixed;
left:0;
top: 0;
}
#navbar header {
font-size: 20px;
height: 60px;
line-height: 60px;
text-align: center;
}
#navbar ul {
list-style: none;
}
#navbar li {
height: 50px;
line-height: 40px;
border-top: 1px solid black;
}
#navbar a {
text-decoration: none;
color: black;
}
#main-doc {
width: calc(100% - 202px);
height: auto;
float: right;
}
#main-doc .main-section {
margin: 10px;
height: 650px;
display: block;
}
#main-doc .main-section header {
font-size: 20px;
}
#main-doc .main-section p {
margin: 10px;
}
#main-doc .main-section code {
margin: 20px;
background-color: black;
color: white;
}
#main-doc .main-section ul {
margin: 30px;
}
@media (max-width:2560px) {
body.html {
background:black;
color: white;
}
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Challenge: Build a Technical Documentation Page
Link to the challenge: