Technical Documentation Page

HTML-CSS
1

“None of your header elements should be empty.”
" Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”)."

I can’t pass these tests, although I did everything that is asked. I checked several times

My code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <nav id='navbar'>
        <header id='Aboba_Documentation'>Aboba Documentation</header>
        <ul>
            <li><a href="#Aboba" class='nav-link'>Aboba</a></li>
            <li><a href="#Bebra" class='nav-link'>Bebra</a></li>
            <li><a href="#Glek" class='nav-link'>Glek</a></li>
            <li><a href="#Abiba" class='nav-link'>Abiba</a></li>
            <li><a href="#Bebrus" class='nav-link'>Bebrus</a></li>
            <li><a href="#Abobus" class='nav-link'>Abobus</a></li>
            <li><a href="#Biba" class='nav-link'>Biba</a></li>
            <li><a href="#Boba" class='nav-link'>Boba</a></li>
            <li><a href="#Babijon" class='nav-link'>Babijon</a></li>
        </ul>
    </nav>
    <main id='main-doc'>
        <section id="Aboba" class='main-section'>
            <header>Aboba</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A culpa dolore excepturi ipsa ipsam iusto magnam nulla porro qui quia, quisquam quos recusandae repellendus sunt tenetur ullam vero, voluptates voluptatum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eveniet expedita fugiat laudantium obcaecati quo ratione sunt. Animi consequatur delectus id, neque, nisi officia officiis perspiciatis possimus quisquam sapiente tempora?</p>
        </section>
        <section id="Bebra" class='main-section'>
            <header>Bebra</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam assumenda at, autem, culpa cupiditate earum, facilis impedit molestias optio pariatur provident quaerat quam quasi ratione repudiandae sed suscipit voluptate.</p>
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid asperiores autem commodi</li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque consequuntur cumque</li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium deleniti facilis fuga harum incidunt.</li>
                </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolor impedit ipsam minus, rem voluptatem. Adipisci aliquid amet, commodi consequuntur debitis delectus excepturi nostrum obcaecati optio, porro quam recusandae veniam.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium commodi consectetur dicta, dolor, id itaque modi natus nobis nostrum officia quas quidem quo quod rem repellat tempore, velit vero.</p>
        </section>
        <section id="Glek" class='main-section'>
            <header>Glek</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorem illum inventore laborum maiores numquam quidem reprehenderit tenetur voluptatibus voluptatum? Dolor doloribus error labore sapiente! Aperiam assumenda fuga maxime nemo?</p>
            <code>squares = [i ** 2 for i in range(25)]<br>
                <br>
                count = 50<br>
                fls = [False for i in range(count)]<br>
                </code>
        </section>
        <section id="Abiba" class='main-section'>
            <header>Abiba</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci autem commodi cupiditate dolorum excepturi inventore ipsa neque officiis perspiciatis quam quas quibusdam, ullam vel. Accusantium alias molestiae perspiciatis quod vitae!</p>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur perferendis provident sint vero</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corporis cum</li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda eaque harum itaque numquam perferendis praesentium voluptate voluptatibus. Aspernatur eaque inventore iusto libero maxime neque, numquam quae quam recusandae velit voluptate!</p>
        </section>
        <section id="Bebrus" class='main-section'>
            <header>Bebrus</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias assumenda consectetur, corporis, deleniti deserunt fugit laborum, molestias non nulla officiis quae quasi quia ratione sed sequi tempora temporibus veritatis vero!</p>
            <code>
                def arr_rotate(arr):<br>
                &nbsp;&nbsp;&nbsp;&nbsp;arr_copy = deepcopy(arr)<br>
                &nbsp;&nbsp;&nbsp;&nbsp;for i in range(4):<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for j in range(4):<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arr[i][j] = arr_copy[j][3 - i]
            </code>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab alias architecto beatae corporis eos error hic in neque, nihil nostrum odit optio, possimus quam repudiandae similique sunt tenetur voluptatem.</p>
        </section>
        <section id="Abobus" class='main-section'>
            <header>Abobus</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, at, odio! Accusamus aut consequatur eos eum fuga illo illum, in, modi non praesentium quasi quos ratione reprehenderit, sunt totam veritatis?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, inventore iste laborum nobis officia possimus quam repellat totam veniam. Aliquid beatae, cumque eligendi error facilis hic non perspiciatis quibusdam voluptatibus?</p>
        </section>
        <section id="Biba" class='main-section'>
            <header>Biba</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, assumenda aut cum dignissimos doloribus earum est exercitationem in incidunt non numquam quas sit. Accusantium consequatur et in laboriosam temporibus.</p>
            <code>
                def dots(p ,l):<br>
                &nbsp;&nbsp;&nbsp;&nbsp;arr = [False for _ in range(9)]<br>
                &nbsp;&nbsp;&nbsp;&nbsp;arr[ord(p) - 65] = True<br>
                &nbsp;&nbsp;&nbsp;&nbsp;return req_dots(arr, l, ord(p) - 65)
            </code>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores eaque est, facere facilis laudantium magni natus, officiis quia reiciendis sint suscipit vitae. Architecto aut deserunt enim pariatur perferendis sapiente veniam?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam assumenda debitis, dolores doloribus dolorum expedita fugiat ipsum molestias mollitia non sapiente suscipit ut voluptates voluptatum! Aperiam iure quam similique.</p>
            <code>
                def tokenize(self, program):<br>
                &nbsp;&nbsp;&nbsp;&nbsp;token_iter = (m.group(0) for m in re.finditer(r'[-+*/()[\]]|[A-Za-z]+|\d+', program))<br>
                &nbsp;&nbsp;&nbsp;&nbsp;return [int(tok) if tok.isdigit() else tok for tok in token_iter]
            </code>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae consectetur cum cupiditate delectus dolores et illo, impedit inventore iusto molestias mollitia nemo non odit pariatur quas, tempore tenetur unde?</p>
        </section>
        <section id="Boba" class='main-section'>
            <header>Boba</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur culpa deserunt, dolores eos et fugit hic incidunt inventore nemo omnis porro provident reiciendis repellendus reprehenderit sequi sint vitae, voluptatem. Repudiandae!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto blanditiis corporis culpa deleniti dignissimos, dolorum eaque earum fuga illum itaque laboriosam, minima minus nobis odio ratione sit suscipit, unde!</p>
        </section>
        <section id="Babijon" class='main-section'>
            <header>Babijon</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, id, quasi. At beatae commodi dolor fuga, fugiat incidunt itaque minima nam pariatur quibusdam ratione saepe soluta tempore ut velit? Quidem.</p>
            <code>
                def isres(arr):<br>
                &nbsp;&nbsp;&nbsp;&nbsp;for i in range(4):<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for j in range(4):<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if len(arr[i][j]) != 1:<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return False<br>
                return True
            </code>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cupiditate doloribus nulla voluptas voluptates? Animi asperiores fugit inventore similique veniam! Ab accusantium deleniti dolorum nam nisi optio porro quae quaerat!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad asperiores aspernatur blanditiis consequatur debitis eaque eum hic id, nam nihil, nulla quam soluta ut? Animi iste qui repellat sed velit.</p>
        </section>
    </main>
</body>
</html>

Please, help me

2

I copied your code as-is to the technical documentation website (you didn’t include the link by the way). I also used someone else’s stylesheet so I can test and see the error for myself.
However I found no errors.

Please provide your stylesheet code as well. Maybe something else is going on there.

3

Sorry, this is my first time posting here.
Here is my CSS code

* {
    font-family: Arial;
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
}

nav {
    width: 20%;
    height: 100vh;
    background-color: mistyrose;
    display: inline-block;
    vertical-align: top;
    position: fixed;
    border: 2px solid black;

}

main {
    display: inline-block;
    left: 20%;
    position: absolute;
    padding: 25px;
}

main header {
    font-size: 36px;
    font-weight: bold;
}

p {
    padding: 0 25px;
    font-size: 20px;
}

nav ul {
    list-style-type: none;
    height: 100%;
    padding: 0;
}
nav header {
    font-size: 25px;
    text-align: center;
    margin-top: 16px;
}

nav li {
    display: block;
    width: 100%;
    height: 50px;
}

li a {
    display: block;
    width: calc(100% - 20px);
    height: calc(100% - 12px);
    font-size: 20px;
    text-align: left;
    padding-left: 20px;
    padding-top: 12px;
    border: 1px solid black;
    border-bottom: 0;
    text-decoration: 0;
    color: black;
}

li a:hover {
    background-color: grey;
}

li:last-of-type a {
    border-bottom: 1px solid black;
}

code {
    margin-left: 50px;
    padding: 10px;
    display: block;
    font-family: monospace;
    background-color: #ebebeb;
    border-radius: 10px;
}

main li {
    margin: 25px 30px;
    font-size: 20px;
}

@media (max-width: 600px) {
    nav {
        visibility: hidden;
    }
    main {
        width: 100%;
        left: 0;
    }
}
4

I found a mistake! You were right, it was in CSS. Thanks for the help!

1 Like
5

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