Página de documentação técnica - Criar uma página de documentação técnica

Português HTML-CSS
1

Conte-nos o que está acontecendo:
Descreva detalhadamente o problema aqui.

Seu código até o momento

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
	<title>Documentação Técnica</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<nav id="navbar">
		<header>Documentação Técnica</header>
		<a class="nav-link" href="#JavaScript_and_Java">JavaScript e Java</a>
		<a class="nav-link" href="#Python_and_Ruby">Python e Ruby</a>
		<a class="nav-link" href="#HTML_and_CSS">HTML e CSS</a>
		<a class="nav-link" href="#Database_Management">Gerenciamento de Banco de Dados</a>
		<a class="nav-link" href="#Version_Control_with_Git">Controle de Versão com Git</a>
	</nav>
	<main id="main-doc">
		<section class="main-section" id="JavaScript_and_Java">
			<header>JavaScript e Java</header>
			<p></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in sapien at dolor blandit bibendum non nec velit. Fusce quis mauris magna. Cras aliquam blandit sodales. In tempor erat vel mauris consequat, a ultrices elit congue.</p>
			<code>console.log("Hello, World!");</code>
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
			</ul>
		</section>
		<section class="main-section" id="Python_and_Ruby">
			<header>Python e Ruby</header>
            <p></p>
			<p>Phasellus consequat, augue at pharetra rhoncus, nibh massa maximus dolor, eu semper magna velit eu lectus. Aenean vel metus ut velit molestie lacinia sed ut arcu.</p>
			<code>print("Hello, World!")</code>
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</section>
		<section class="main-section" id="HTML_and_CSS">
			<header>HTML e CSS</header>
            <p></p>
			<p>Maecenas ullamcorper nisl ac ex facilisis commodo. Nam varius feugiat felis sit amet finibus. Praesent dapibus commodo tortor, sed venenatis lectus bibendum vel.</p>
			<code>&lt;p&gt;Hello, World!&lt;/p&gt;</code>
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
			</ul>
		</section>
		<section class="main-section" id="Database_Management">
			<header>Gerenciamento de Banco de Dados</header>
            <p></p>
			<p>Donec dignissim ultrices mauris, eget maximus risus tempus eget. Pellentesque fringilla hendrerit sapien, sed molestie ipsum bibendum vel.</p>
			<code>SELECT * FROM customers;</code>
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
            </ul>
        </section>
        <section class="main-section" id="Version_Control_with_Git">
            <header>Controle de Versão com Git</header>
            <p></p>
            <p></p>
            <code>SELECT * FROM customers;</code>
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
            </ul>
        </section>
    </main>
</body>
</html>

/* file: styles.css */
body {
    background-color: #0a2b5c;
}
#navbar {
    background-color: black;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 1;
}
#navbar a {
    color: white;
    margin-right: 10px;
    text-decoration: none;
}
#navbar a:hover {
    text-decoration: underline;
}
#main-doc {
    padding: 20px;
}
.main-section {
    margin-bottom: 40px;
}

.main-section header {
    font-size: 32px;
    margin-bottom: 20px;
}
code {
    background-color: #f7f7f7;
    border-radius: 3px;
    display: block;
    font-family: Consolas, monospace;
    margin-bottom: 20px;
    padding: 10px;
}
ul {
    list-style-type: disc;
    margin-left: 20px;
}

li {
    margin-bottom: 10px;
}
@media (max-width: 600px) {
    .main-section {
        padding: 10px;
    }
    
    .main-section header {
        font-size: 1.5em;
    }
}

Informações de seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.48

Desafio: Página de documentação técnica - Criar uma página de documentação técnica

Link para o desafio:

2

Olá, @vittorbittencourt123, e boas-vindas ao fórum do freeCodeCamp.
Poderia detalhar para nós qual é a sua dúvida? Ela não ficou perceptível apenas pelo código. Obrigado! :slight_smile: