Tell us what’s happening:
Describe your issue in detail here.
I can’t seem to work out why user story 12 won’t pass? Any help appreciated!
Your code so far
<!doctype html>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.main-section {
}
h1 {
font-size: 36px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
h3 {
font-size: 26px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
h2 {
font-size: 16px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
p {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.codesec {
font-size: 17px;
background-color: lightgray;
padding: 3px;
border-radius: 2px;
}
.nav-link {
list-style-type: none;
}
ul {
list-style-type: none;
font-weight: 300;
text-decoration: none;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
<nav id="navbar">
<header>Lorem Ipsum Stuff</header>
<ul>
<li><a class="nav-link" href="#This_is_the_first_section!"><p>Header 1</p></a></li>
<li><a class="nav-link" href="#This_is_the_second_section!"><p>Header 2</p></a></li>
<li><a class="nav-link" href="#This_is_the_third_section!"><p>Header 3</p></a></li>
<li><a class="nav-link" href="#This_is_the_second_last_section!"><p>Header 4</p</a></li>
<li><a class="nav-link" href="#This_is_the_last_section!"><p>Header 5</p></a></li>
</ul>
</nav>
<section class="main-section" id="This_is_the_first_section!">
<Header><h1>This is the first section!</h1> </Header>
<h3 id="Header_1">Header 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec nisl quis ante eleifend porttitor. Fusce quis venenatis erat, in aliquam neque. Ut pretium felis nec lacus porttitor, sit amet malesuada massa feugiat. Nulla nisl dolor, tincidunt sed neque sed, scelerisque pulvinar dui. Duis malesuada, est nec auctor feugiat, magna lorem venenatis turpis, at vulputate mi libero quis dolor. In euismod orci bibendum est semper, sed dapibus orci rutrum. Morbi nec vulputate sapien, ac malesuada leo. Aliquam vitae massa ac sem scelerisque fringilla blandit quis mi. </p>
<p>Pellentesque a nulla fringilla quam tempor mollis ac faucibus ex. Nam ut enim turpis. <code class="codesec">function helloWorld() {
alert("hello world");
}
helloWorld()</code>Morbi porta quam sodales augue sagittis, nec ultricies risus auctor. Aliquam faucibus molestie tempor. Donec quis orci et eros ullamcorper tincidunt pellentesque ac eros. Vestibulum quis tincidunt eros, at congue purus. Sed sagittis diam id bibendum mattis. In vitae lacus a lectus dignissim tempor. Mauris nec arcu malesuada, malesuada dolor quis, imperdiet felis. Aliquam a dolor eros. </p>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
</section>
<section class="main-section" id="This_is_the_second_section!">
<Header><h1>This is the second section!</h1> </Header>
<h3 id="Header_2">Header 2</h1>
<p>Maecenas tincidunt nec justo eget blandit. <code class="codesec">function helloWorld() {
alert("hello world");
}
helloWorld()</code>Duis pretium diam turpis, eget molestie tellus consequat in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer nisi dui, suscipit et tempor at, venenatis sed ipsum. Sed id pulvinar elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus suscipit placerat feugiat. Quisque id erat ut leo malesuada pretium sit amet sed augue. Aenean eget elementum eros. Nullam in vehicula massa. Nullam viverra in metus in fermentum. Nulla porttitor sodales justo, nec luctus mi consectetur et. Quisque tristique tellus non fringilla accumsan. Donec vel leo eleifend, mollis justo non, cursus sapien. Phasellus vulputate mi sit amet nulla lobortis, sed ultricies nibh mollis. </p>
<p>Nam luctus lacus eu tellus imperdiet iaculis. <code class="codesec">let currentDate = new Date();
let time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
console.log(time);</code> Sed a ante vitae urna pellentesque eleifend eu sit amet nisl. Nam id ultricies erat. Quisque ultricies tempus ullamcorper. Duis ex tellus, elementum et augue id, tempus rhoncus enim. Maecenas id est ultrices, pharetra elit vitae, auctor urna. Praesent convallis condimentum semper. Proin pretium sem vel ex dictum convallis. Cras sapien sem, iaculis eget blandit at, rutrum a mi. Curabitur mattis nisl nisi, nec suscipit dui blandit non. </p>
</section>
<section class="main-section" id="This_is_the_third_section!">
<Header><h1>This is the third section!</h1></Header>
<h3 id="Header_3">Header 3</h1>
<p>Nunc condimentum imperdiet erat, ut tempus erat vehicula non. Sed consectetur rhoncus dui, sit amet bibendum eros condimentum sed. Donec sit amet turpis non augue venenatis pharetra. Duis vel eleifend ipsum. In hac habitasse platea dictumst. Maecenas purus enim, vehicula in libero ac, iaculis sollicitudin felis. Duis non lacus et ex iaculis pellentesque in malesuada diam. Phasellus euismod blandit leo. Pellentesque nec ornare nisl. Ut quis felis vestibulum, auctor leo ac, imperdiet dui. Curabitur rutrum leo ac turpis ultrices, eu accumsan lorem suscipit. Integer quis faucibus lorem. Phasellus eleifend risus arcu, at fermentum orci pharetra id. Suspendisse ex ipsum, sollicitudin sed lobortis sed, semper eget purus. Morbi purus sapien, posuere at nibh vitae, accumsan facilisis nunc. </p>
<p>Quisque nec dignissim nibh. Phasellus rutrum iaculis eros, quis ultricies augue congue et. Aenean sit amet aliquam lacus, eget aliquet ante. Sed ut facilisis quam. Donec in posuere metus. Nulla blandit, erat vitae gravida ornare, nulla odio tempus magna, eget porttitor risus velit at urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam orci ante, dapibus nec lectus eu, ornare egestas lectus. Donec ullamcorper, quam eu ultricies eleifend, eros orci mattis urna, tristique aliquet massa turpis non dolor. Sed ut lorem sit amet erat lacinia eleifend. Duis pharetra, eros quis tempus elementum, felis turpis rutrum ex, ut ornare leo urna in orci. Integer sem ante, accumsan pretium sodales ac, convallis quis elit. Donec sed blandit augue. Praesent arcu orci, tempor at mauris vel, convallis feugiat orci. </p>
</section>
<code class="codesec">function helloMe() {
alert("hello Me!");
}
helloMe()</code>
<section class="main-section" id="This_is_the_second_last_section!">
<Header><h1>This is the second last section!</h1></Header>
<h3 id="Header_4">Header 4</h3>
<p>Donec condimentum dui ut luctus dapibus. Pellentesque pulvinar ultricies molestie. Sed mollis tellus non libero pretium interdum. Maecenas maximus ligula at porta eleifend. Nulla vel facilisis mi, feugiat blandit massa. Etiam malesuada ante vel sodales pretium. Proin vitae hendrerit neque. Pellentesque augue est, volutpat quis nisi vel, ultrices ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed libero risus, commodo in tellus malesuada, euismod lobortis risus. </p>
<p>Nulla quis mi pretium, viverra diam eu, viverra magna. <code class="codesec">function helloU() {
alert("hello U!");
}
helloU()</code>Mauris elementum neque lectus, eu commodo purus blandit ac. Ut at lorem efficitur, mollis tortor nec, accumsan eros. Morbi tellus felis, sagittis in ipsum ac, ullamcorper iaculis arcu. Pellentesque tincidunt libero eget purus interdum, et pulvinar lacus ultricies. Quisque efficitur quam sit amet arcu commodo ultricies. Sed dapibus fermentum dui in euismod. Curabitur in urna tristique, vulputate nulla et, placerat quam. Aenean convallis, risus quis tincidunt lacinia, turpis neque pulvinar enim, a imperdiet est dolor vitae velit. Proin pharetra felis sit amet libero porttitor tempor. Mauris rhoncus pellentesque massa, vitae ultricies mi aliquam ac. Nulla sed erat eu enim vulputate cursus ut eget lorem. </p>
</section>
<section class="main-section" id="This_is_the_last_section!">
<Header><h1>This is the last section!</h1></Header>
<h3 id="Header_5">Header 5</h3>
<p>Nullam in arcu rhoncus, vehicula enim in, feugiat ipsum. Donec a nisi purus. Praesent tincidunt venenatis elit, et faucibus libero. Proin euismod metus eu diam dictum efficitur in tempus quam. Donec mattis eu nisl id volutpat. Sed sed blandit erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam aliquam dui ut lacinia varius. </p>
<p>Aliquam nulla lorem, interdum eu finibus sed, ultrices non lorem. Mauris luctus justo sit amet est efficitur, eget ornare erat ultricies. Phasellus venenatis vel nulla id tincidunt. Pellentesque placerat turpis odio. Suspendisse porta nunc eget tincidunt molestie. Ut in tincidunt nibh, et pellentesque ante. Vivamus tempor molestie congue. Nulla at volutpat sapien. In nisl lacus, pharetra eget commodo at, lacinia eget nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus consectetur lacus eu pulvinar ultrices. Vestibulum semper mi turpis, eu pulvinar ipsum lacinia id. Aenean bibendum mauris purus, ut posuere quam bibendum at. Quisque sit amet est neque. Sed sem arcu, gravida sit amet turpis auctor, efficitur bibendum nisl. <code class="codesec">function code5() {
alert("this is the fifth code snippet");
}
code5()</code></p>
</section>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:92.0) Gecko/20100101 Firefox/92.0
Challenge: Build a Technical Documentation Page
Link to the challenge: