Tell us what’s happening:
I cant seem to pass the stage that says i must have a nav link that corresponds with the header and matching the main-section with texts that match first child
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Technical Documentation Page</title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=devive-width, initial-scale=1.0"></meta>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Technical Documentation Page</h1>
<main id="main-doc">
<header id="infor">Programming</header>
<section class="main-section" id="HTML_Properties">
<header>HTML Properties
<code>
<hr>
<h2>Programmimg with css and html</h2>
<div id="question">
<p>What does Html stand for?</p>
<ul>
<li>hyper text markup language</li>
<li>hyper technical markup language</li>
<li>hype text markup language</li>
</ul>
</div>
</header>
</code>
</section>
<section class="main-section" id="Hello_world">
<header>Hello world<header>
<p>Code using css and html only</p>
<footer>
<code>
<nav id="navbar">
<header>Programming</header>
<li><a class="nav-link" href="Hello_world">Hello world</a></li>
<a class="nav-link" href="HTML_Properties">HTML Properties<a/>,
<a class="nav-link" href="CSS_Properties">CSS Properties</a>,
<a class="nav-link" href="JAVASCRIPT_Properties">JAVASCRIPT Properties</a>,
<a class="nav-link" href="BOOTSTRAP_Properties">BOOTSTRAP Properties</a> AND
<a class="nav-link" href="FIGMA_Properties">FIGMA Properties</a>
</nav>
</header>
</code>
</footer>
</header>
</code>
</section>
<br>
<section class="main-section" id="FIGMA_Properties">
<header>FIGMA Properties</header>
<code>
<p>Describe your experiences in the technical world</p>
<ol>
<li>Overwhelming</li>
<li>Fascinating</li>
<li>Prefer not to say</li>
</ol>
<p>Answer with all honesty!</p>
</code>
</section>
<section class="main-section" id="BOOTSTRAP_Properties">
<header>BOOTSTRAP Properties</header>
<code>
<p>Who invented television?</p>
<p>In what year was cellphone invented?</p>
<p>Who owns TESLA?</p>
<p>How many volts does it take to power a car engine?</p>
</code>
</section>
<hr>
<section class="main-section" id="JAVASCRIPT_Properties">
<header>JAVASCRIPT Properties</header>
<code>
<p>What are your plan for the near future?</p>
<p>In the next ten ears how much do you the think technology would have revolutionised</p>
</code>
</section>
<section class="main-section" id="CSS_Properties">
<header>CSS Properties</header>
<code>
<ul>
<li>Earth</li>
<li>Mars</li>
<li>Pluto</li>
<li>Venus</li>
</ul>
</code>
</section>
</main>
</body>
</html>
/* file: styles.css */
#main{
background-color: rgb(120, 40, 55);
width: 100px;
height: 45px;
}
.nav{
position: absolute;
color: rgb(20, 20, 100)
}
@media (max-width: 120px){
.h1{
color: black;
}
.nav-bar{
float: left;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge:
woot woot