Build a Technical Documentation Page

Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks.

by barbrown1996

HTML

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

  <head>
    <meta charset="UTF-8" />
    <title>Brianna's 2024 Reading Challenges</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>

  <body>
    <nav id="navbar">
    </nav>
    <main id="main-doc">
      <section class="main-section" id="header">
        <header>Brianna's 2024 Reading Challenges</header>
        <p>This "technical" document isn't really a technical document. It's going to serve as a way to track my progress in my many, many reading challenges that I commited to for 2024. I will include the books I read for each challenge. I will include my stats as well. Thank you for taking a look at my reading journey for the year!</p>
      </section>
      <section class="main-section" id="monthly-challenges">
        <header>Monthly Challenges</header>
        <h2>January</h2>
        <ul>
          <li>
            <div class="challenge-info">Marathon Challenge · 2024 Reading Challenge</div>
            <p>The goal is to make fast progress on your reading goals in the New Year. I chose to read 30 books for this challenge.<p>
                <p class="footnote">*This does not include manga.</p>
                <span class="marathon-book">
                  <img src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1460925949i/25179.jpg" />
                  <img src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1627439923i/58648147.jpg" />
                  <img src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1650710036i/60865821.jpg" />
                  <img src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1684867278i/122752652.jpg" />
                  <img...

CSS

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
  font-family: Roboto;
  color: #FFF;
  background-color: #D3C3FF;
}

#main-doc {
  margin-left: 20px;
  color: #6D55AB;
}

header {
  font-weight: 700;
  font-size: 28px;
  margin: 50px 0 0 0;
  color: #372072 !important;
  font-family: Merriweather !important;
}

h2 {
  font-weight: 700;
  color: #4F3A82 !important;
  font-family: Merriweather !important;
}

p {
  font-size: 20px;
}

li {
  list-style-type: none;
  font-size: 20px;
}

.challenge-info {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
}

a {
  color: #fff;
}

.footnote {
  font-size: 16px;
  font-style: italic;
}

img {
  width: 120px;
  margin-left: -2px;
  margin-right: -2px;
  margin-top: 20px;
}

.marathon-books {
  display: inline-block;
}

.challenge-break {
  margin: 80px;
}

.mini-break {
  margin: 40px;
}

.num {
  margin-top: 50px;

}

.prompt {
  font-weight: 700;
}

.desc {
  font-style: italic;
}