Cannot pass technical documentation test..

Tell us what’s happening:
I cannot seem to pass the test while I believe I have done all of the requirements.
Also the media query does not seem to work.

Things I have not passed:

  • You should have at least five code elements that are descendants of .main-section elements. (There are 5 descendants already, there are 6 sections in total)

  • You should have at least five li elements that are descendants of .main-section elements. (idem dito, there are 6 in total)

  • You should have at least one a element with a class of nav-link. (idem dito, there are 6 A elements in nav link)

  • All of your .nav-link elements should be anchor (a) elements. (They are??)

  • Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id). (I did and that works, when I click on it moves to the appropriate area)

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">

<!--HEAD-->  
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta description="A comprehensive guide towards Quake III Machinima Making"/>
<meta keywords="quake, quake3, quake III, arena fps, arena first person shooter, first person shooter, game movie, game art, frag movie, frag, movie, experimental"/>
<title>A technical guide towards Quake III Machinima Making</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
<link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Rubik:wght@300;400;700&display=swap" rel="stylesheet"/> 
</head>

<!--BODY-->
<body>

<!--NAVBAR-->
<nav id="navbar">
  <header>Quake <span class="three">III</span> Machinima Guide</header>
<ul>
  <li class="nav-link"><a href="#Introduction">Introduction</a></li>
  <li class="nav-link"><a href="#Hardware">Hardware</a></li>
  <li class="nav-link"><a href="#Software">Software</a></li>
   <li class="nav-link"> <a href="#Installation">Installation</a></li>
    <li class="nav-link"><a href="#Fixes">Fixes</a></li>
    <li class="nav-link"><a href="#Custom_Content">Custom Content</a></li>
    <li class="nav-link"><a href="#Basics">Basics</a></li>
    <!--WORK IN PROGRESS-->
</ul>
<p class="disclaimer"> Quake III Arena is a game developed by id Software. Q3MME, or Quake III MovieMaker's Edition is a Quake III Modification for machinima purposes developed by CaNaBiS, hmage, ent and auri.<br><br>
All copyrights belong to their respective owners. This guide was primarily made for informative purposes. No copyright infringement intended.</p>
</nav>
<!--END OF NAV-->
<!---CONTENT-->
<main id="main-doc">
  <!--SECTION#1 - Introduction-->
  <section id="Introduction" class="main-section">
    <header id="header-subject">Introduction</header>
    <article>
      <!--Per part of text add a separate P section.-->
      <p>This page serves as a technical guide for making high-quality Quake III machinima. No matter whether you are looking to make experimental short films, or cinematic trick/frag movies just like in the old days, this guide will get you up to speed no matter if you are a an complete novice or looking to refresh your current skills.</p>
      <p>First of all, what is Quake III Arena? Quake III Arena, or Quake III, is and still remains a highly popular 'Arena First-Person Shooter' originally released by id Software in late 1999. Just before the dawn of the millenium we saw a large increase in general interest in the FPS genre; in particular the Arena FPS. Games like Unreal Tournament and Quake were extremely popular and played locally and online by many. These games were also the go-to forms of entertainment during LAN Parties. Both FPS and Arena FPS share similarities but remain different from one another. The main difference is that the Arena FPS focuses on high-speed combat in fairly small areas (or arena's), where your main objective is to kill as many of your fellow players within the set time limit, or to score the most points for your team. In Arena FPS games, there is nowhere to hide; forcing you to keep moving and taking quick decisions on the go in order to kill the competition and stay alive. Traditional FPS games often focus on things like stealth, mission progression, story progression and such.</p>
      <p> The late 90's did not only see the dawn of the early internet culture, but also resembled the birth of machinima <em>(ma-sheen-i-ma)</em>, a digital art form in which artists make photographs or films using videogame assets or videogame engines. Quake III for instance, was extremely well known for his trick movies, frag movies, clan movies and strafing compilations, in all of which players and/or clans showed off their skills. As mentioned in the book Machinima for Dummies (2007) written by Hugh Hancock and Johnnie Ingram, these films were like the digital rap movies of the 90s. Instead of rappers boasting to steal your girlfriend and being richer than you, these "game rap movies" boasted about being a better player than you would ever be.</p>
      <p>This guide will guide you step by step on how to set up the game properly, how to update it to modern standards, how to install various mods, recording demo's, setting up interesting camera angles, the many different modes of capturing available to us and finally how to use your newly captured footage in order to create an interesting end result.</p>
      </article>
      </section>
  <!--SECTION#2 - Hardware Requirements-->
  <section id="Hardware" class="main-section">
    <header id="header-subject">Hardware</header>
    <article>
      <!--Per part of text add a separate P section.-->
      <p>Now, don't worry. The best part about Quake III is that it is not only a highly versatile game for machinima-making, but you also won't need a powerful gaming rig in order to get decent results. As the game is now over 20 years old, most computers and laptops are suitable for Quake III Machinima making, as long as they run on Windows 7, 8 or 10. As I am unsure whether Windows 11 is supported as of this moment, I would recommend to either use Windows 7, 8 or Windows 10 (preferably 64 bit). If you know how to run this on a Chromebook or Linux computer, be my guest. But to be fair, you probably know that much about computers that you don't need this guide at all.</P>
      <p> Apple Intel computers are able to use Bootcamp and install Windows 7 or Windows 10 depending on the age and specifications of your mac. M1, M1MAX, M1ULTRA, M2 Macs are possible to use for this guide, but not recommended as your only option is to use Crossover. While Crossover is a possible option as a last-resort for ARM Mac users, it is not recommended as not all features work properly this way. For instance, rendering is limited to 1920x1080, and the game/mods often don't launch properly. It's best practice to either use a dedicated windows machine, or Bootcamp on a Intel-based mac. Until VM software finally works properly on Apple ARM machinies, this will be your only viable option. Once VM machines work properly with Windows 10/11, Apple ARM machines will be a good option as well hardware-wise.</p>
      <p>In General, you will need either a windows laptop or desktop or a apple computer that run windows through bootcamp. You will need around 4 gigabytes of ram. 8 Gigabytes is recommended or higher if you want to render on higher resolutions than 1920x1080. HDD Space for the game itself: 4 GB should be more than enough. It depends on how many mods and maps you want to add and how many shots and demo's you'd like to render. It also depends on the depth of field, motion blur and the resolution settings you use to render your demo's. For instance, a single 2K TGA file easily can reach 10MB. Multiply that by 2000 for a short demo and you have a basic idea how much space you need. JPG/PNG uses less space, less than 1MB per file. I'll go more in depth about capture parameters later. You will need a onboard soundcard. Any will do. A keyboard and mouse and a monitor as well. An external hard drive is recommended but not required! It's always good to have a backup of your work or some additional space to store all of your stuff on. In order to play the game, any graphics card will do. A AMD or NVIDIA card is recommended. However, if you want to render on higher resolutions such as Full HD, a decent NVIDIA/AMD dedicated GPU from the last 9-10 years is recommended. The more recent your GPU and the more power it has, the better it will be and the higher the resolution you will be able to render.</p>
      </article>
      </section>
       <!--SECTION#3 - Software Requirements-->
  <section id="Software" class="main-section">
    <header id="header-subject">Software</header>
    <article>
      <!--Per part of text add a separate P section.-->
      <p>You will need a copy of Quake III Arena. You are able to purchase it on Steam or Good Old Games. If you prefer physical copies, I would recommend to check your second hand game retailer.</P>
      <p>Secondly, you will need the mod CPMA (Challenge Pro Mode Arena), various game fixes, a couple of configuration files, extra custom maps, and of course: Q3MME (Quake III Movie Maker Edition) (more to be added later)</p>
      </article>
      </section>
        <!--SECTION#4 - Installation-->
  <section id="Installation" class="main-section">
    <header id="header-subject">Installation</header>
    <article>
      <!--Per part of text add a separate P section.-->
      <p>Install Quake III Arena. If you are using the STEAM version, then it will automatically update to version 1.32c. If you are using a physical copy, download the 1.32c patch. Once you are done, install CPMA and boot up the game once using quake3.exe. Afterwards, adjust your settings and back out</p>
      <p>Install Q3MME by downloading it from the GitHub. Afterwards you are ready to go</p>
      </article>
      </section>
      <!--SECTION#5 - Fixes and Patches-->
  <section id="Fixes" class="main-section">
    <header id="header-subject">Fixes</header>
    <article>
      <!--Per part of text add a separate P section.-->
      <p>More coming soon</p>
      </article>
      </section>
      <!--SECTION#6 - Custom Content-->
  <section id="Custom_Content" class="main-section">
    <header id="header-subject">Custom Content</header>
    <article>
      <!--Per part of text add a separate P section.-->
      <p>More coming soon</p>
      </article>
      </section>
        <!--SECTION#7 - Basics-->
  <section id="Basics" class="main-section">
    <header id="header-subject">Basics</header>
    <article>
      <!--Per part of text add a separate P section.-->
      <p>More coming soon</p>
      </article>
      </section>
</main>
</body>
</html>

html {
    margin: 0 auto;
    box-sizing: border-box;
    top:0;
    left:0;
  
  }
  
  * {
    font-family: Rubik, sans-serif;
  }

header {
  color: #fafafa;
  font-size: 24px;
  padding-left: 35px;
  padding-top:20px;
  font-weight:10;
  font-family:Rubik;
}

#header-subject {
  color: #2b2b2b;
  font-family: Rubik;
  Font-weight: 500;
}

.three {
  color: red;
  font-weight:500;
  font-size:24px;
}
  #navbar {
  width: 350px;
  position: fixed;
  height: 100%;
  background-color: black;
  left:0;
  top: 0;
  overflow-y: auto;
  padding-bottom:15px;
  }

  

  ul li {
    list-style:none;
    font-weight:700;
padding-top:12.5px;
padding-left: 10px;
border-bottom: 0.2px solid white;
  }

.navlink a {
  vertical-align: middle;
}

.navlink border {
  border-origin: 2px;
}

  ul li :after {
    content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 5px;
        width: 50%;
        border-top: 3px solid #000;
  }

#main-doc {
position: absolute;
margin-left: 350px;
padding: 20px;
margin-bottom: 110px;
overflow-y: auto;
}
  a {
text-decoration:none;
    color: #fafafa;
  }

  a:visited {
    color: #fafafa;
  }

  a:hover {
    color:red;
  }

  .disclaimer {
    color: #fafafa;
    padding-left:35px;
    width:275px;
    font-size: 10px;
    margin-top:30px;
    font-weight: 10;
    font-family: Rubik;
  }

  p {
    color: #2b2b2b;;
    padding-left:35px;
    width:95%;
    font-size: 14px;
    margin-top:30px;
    font-weight: 10;
    font-family: Rubik;
  }
  
  @media screen and(max-width:100px) {
    font-size: 10px;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0

Challenge: Build a Technical Documentation Page

Link to the challenge:

The first test that isn’t passing is: “You should have at least five code elements that are descendants of .main-section elements.” I don’t see any code elements in your HTML. I think you should probably add five of them :slight_smile:

But what are ‘code’ elements? I don’t recall them ever being present in any of the lessons so far.

Google is the developer’s best friend :slight_smile:

<code>: The Inline Code element