Technical Documentation Page - Build a Technical Documentation Page

The requirement asks me to make the same amount of .nav-link and .main-section elements. Im confused as to how my code does not comply to these requirements

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>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to make a penguin</title>
    <link rel="stylesheet" href="Tech.css">
</head>
<body>
    <nav id="navbar">
        <header>Quick Access</header>
        <ul id="navs">
            <li class="nav-li"><a class="nav-link" href="#Introduction">Introduction</a></li>
            <li class="nav-li"><a class="nav-link" href="#How_to_make_the_Head">How to make a head</a></li>
            <li class="nav-li"><a class="nav-link" href="#How_to_make_the_Body">How to make the body</a></li>
            <li class="nav-li"><a class="nav-link" href="#How_to_make_the_Flippers">How to make the flippers</a></li>
            <li class="nav-li"><a class="nav-link" href="#How_to_make_the_Legs">How to make legs</a></li>
            <li class="nav-li"><a class="nav-link" href="#How_to_make_the_Beak">How to make beak</a></li>
            <li class="nav-li"><a class="nav-link" href="#How_to_make_the_Eyes">How to make the eyes</a></li>
        </ul>
    </nav>
    <main id="main-doc">
        <section id="Introduction" class="main-section">
            <header>Introduction</header>
            <p>Penguins are very adorable creatures found in the Antarctic Poles. If you ever wondered how to make one using <code>HTML</code> and <code>css</code>, you've come to the right place</p>
        </section>
        <section id="How_to_make_the_Head">
            <header>How to make the Head</header>
            <p>To begin, you would want to make a circle. Make a border and manipulate the border radius so that the head makes an oval shape like for example:
            <p><code>border: 1px solid black</code>
            <p><code>border-radius: 45% 45% 50% 50%</code>
            <p>You also have to set the width to <code>200px</code> and height to <code>200px</code>. to make the head even.
            </p>
        </section>
        <section id="How_to_make_the_Body" class="main-section">
            <header>How to make the Body</header>
            <p>To make the body, the width should be less than the height, so that it makes a vertical oval. Penguins are also not rectangular shaped so you might want to manipulate
                the border-radius like for example:
                <ul><code>
                    <li>width: 100px;</li>
                    <li>height: 300px;</li>
                    <li>border-radius: 50% 50% 50% 50%</li>
                    <li>border: 1px solid black;</li>
                    <li>background-color: grey;</li>
                </ul></code>
            </p>
        </section>
        <section id="How_to_make_the_Flippers" class="main-section">
            <header>How to make the Flippers</header>
            <p>To make the flippers, You have to create another border but the width will be larger than the width. The trick to make the penguin flippers look like flippers instead of ovals
                lay in the manipulation of border-radius again. For example:
            </p>
            <p><code>
                border: 1px solid black;
            <p>border-radius: 45% 45% 50% 50%;
            </code></p>
        </section>
        <section id="How_to_make_the_Legs" class="main-section">
            <header>How to make the Legs</header>
            <p>Making the legs is similar to making the flippers, but instead making it more oval and the height is longer than the width</p>
            <p>The legs should be behind the body. To achieve this effect, simply add a <code>z-index</code> element of -1</p>
        </section>
        <section id="How_to_make_the_Beak" class="main-section">
            <header>How to make the Beak</header>
            <p>To make the beak, you have to manipulate two different sized ovals so that it is on top of one another</p>
            <p>Create two <code>div</code> elements and classify them differently so that you are able to manipulate both.</p>
        </section>
        <section id="How_to_make_the_Eyes" class="main-section">
            <header>How to make the eyes</header>
            <p>The process of the eyes are very similar to the beak except the eyes have to lay behind the beak </p>
            <p>The eyes should be colored black, has to have a curved circle look and there should be two</p>
            <p>To create two, make two <code>div</code> elements and manipulate them on your CSS file</p>
        </section>


    </main>
    
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 OPR/98.0.0.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

I am new to this myself, and I could be wrong, but I think you’re missing a class of main-section in How to make the Head section.

1 Like

Oh wow, I completely missed that. Thank you!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.