Issue of overlapping section [closed]

// Scroll event to change navbar background color
window.addEventListener('scroll', function() {
  const navbar = document.getElementById('navbar');
  if (window.scrollY > 50) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

// Mobile menu toggle
const mobileMenu = document.getElementById('mobile-menu');
const navLinks = document.getElementById('nav-links');

mobileMenu.addEventListener('click', function() {
  navLinks.classList.toggle('active');
});

// Function to escape HTML and validate input
function validateHTML() {
  const htmlInputField = document.getElementById('html-input');
  const escapedHtmlOutput = document.getElementById('escaped-html');
  const escapedHtmlBox = document.getElementById('escaped-html-box');
  const errorMessage = document.getElementById('error-message');
  const htmlInput = htmlInputField.value;

  // Simple HTML validation (basic pattern to check for HTML tags)
  const validHTMLPattern = /</?[a-z][sS]*>/i;

  if (!validHTMLPattern.test(htmlInput)) {
    errorMessage.textContent = "Please enter valid HTML.";
    htmlInputField.classList.add('error');
    escapedHtmlBox.style.display = "none"; // Hide the escaped HTML box on error
  } else {
    errorMessage.textContent = "";

    // Escape HTML function
    function escapeHTML(html) {
      return html
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
    }

    const escapedHTML = escapeHTML(htmlInput);
    escapedHtmlOutput.value = escapedHTML; // Display escaped HTML in the text area
    htmlInputField.classList.remove('error');

    // Show the escaped HTML text area
    escapedHtmlBox.style.display = "block";

    // Scroll to escaped HTML area
    escapedHtmlBox.scrollIntoView({
      behavior: 'smooth'
    });
  }
}

// Add event listener to button to call validateHTML function
document.getElementById('escape-button').addEventListener('click', validateHTML);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #000;
  color: #fff;
  line-height: 1.6;
  position: relative;
}


/* Navbar styles */

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 15px 20px;
  background: transparent;
  transition: background-color 0.3s;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.9);
}

.navbar .logo {
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.navbar ul {
  list-style: none;
  display: flex;
}

.navbar ul li {
  margin: 0 20px;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 8px;
  transition: color 0.3s;
}

.navbar ul li a:hover {
  color: #ff5733;
}


/* Hamburger menu icon */

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle div {
  width: 30px;
  height: 3px;
  background-color: white;
  margin: 5px 0;
}


/* Responsive Navbar for smaller screens */

@media (max-width: 768px) {
  .navbar ul {
    position: absolute;
    top: 60px;
    right: 0;
    height: 0;
    overflow: hidden;
    flex-direction: column;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    transition: height 0.3s ease;
  }
  .navbar ul.active {
    height: 200px;
    /* Adjust based on how many links you have */
  }
  .navbar ul li {
    margin: 10px 0;
    text-align: center;
  }
  .menu-toggle {
    display: flex;
  }
}


/* Main Section */

.main-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  text-align: center;
  padding: 120px 20px 20px;
}

.main-section h1 {
  font-size: 48px;
  margin-bottom: 10px;
}

.main-section h2 {
  font-size: 24px;
  background: linear-gradient(90deg, #ff6f61, #ffcd2b);
  -webkit-background-clip: text;
  color: transparent;
}

.input-box {
  margin-top: 30px;
  width: 80%;
  max-width: 600px;
}

.input-box textarea {
  width: 100%;
  height: 200px;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  resize: none;
}

.input-box textarea::placeholder {
  color: #888;
}

.input-box .error {
  border: 2px solid red;
}

.input-box button {
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #ff5733;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.input-box button:hover {
  background-color: #ff6f61;
}


/* Escaped HTML Section */

#escaped-html-box {
  display: none;
  margin-top: 20px;
  width: 80%;
  max-width: 600px;
  position: relative;
}

#escaped-html-box textarea {
  width: 100%;
  height: 200px;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  resize: none;
}


/* Information Section */

.info-section {
  padding: 50px 20px;
  background-color: #111;
  justify-content: start;
  display: flex;
  transition: margin 0.3s;
  /
}

.info-section h2 {
  text-align: center;
  margin-bottom: 20px;
}

.info-section p {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  line-height: 1.8;
}


/* FAQ Section */

.faq-section {
  padding: 50px 20px;
}

.faq-section h2 {
  text-align: center;
  margin-bottom: 20px;
}

.faq-section .faq {
  max-width: 800px;
  margin: 0 auto;
}

.faq-section .faq-item {
  margin-bottom: 20px;
}

.faq-section .faq-item h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.faq-section .faq-item p {
  font-size: 16px;
  color: #ccc;
}


/* Footer */

footer {
  padding: 20px;
  text-align: center;
  background-color: #111;
  color: #888;
}

```

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
  /* Reset some default styles */
</style>
<!-- Navbar -->
<nav class="navbar" id="navbar">
  <div class="logo">Histolix</div>

  <ul id="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#info">About</a></li>
    <li><a href="#faq">FAQ</a></li>
  </ul>

  <div class="menu-toggle" id="mobile-menu">
    <div>&nbsp;</div>

    <div>&nbsp;</div>

    <div>&nbsp;</div>
  </div>
</nav>
<!-- Main Section -->

<section class="main-section" id="home">
  <h1>WELCOME TO HISTOLIX</h1>

  <h2>THE BEST TOOL FOR <span>ESCAPING HTML</span></h2>

  <div class="input-box"><textarea id="html-input" placeholder="Enter your HTML here..."></textarea><button id="escape-button">Escape HTML</button>

    <p id="error-message" style="color: red;">&nbsp;</p>
  </div>

  <div id="escaped-html-box">
    <h3>ESCAPED HTML</h3><textarea id="escaped-html" readonly="readonly"></textarea></div>
</section>
<!-- Information Section -->

<section class="info-section" id="info">
  <h2>About the HTML Escape Tool</h2>

  <p>This tool helps you escape HTML by converting special characters into their corresponding HTML entities. It ensures your code is safe and properly rendered in the browser. Whether you&#39;re a developer or just getting started with HTML, Histolix makes
    your job easier.</p>
</section>
<!-- FAQ Section -->

<section class="faq-section" id="faq">
  <h2>Frequently Asked Questions</h2>

  <div class="faq">
    <div class="faq-item">
      <h3>What is HTML escaping?</h3>

      <p>HTML escaping is the process of converting special characters like &lt;, &gt;, &amp;, and &quot; into their corresponding HTML entities to ensure they are displayed correctly in the browser.</p>
    </div>

    <div class="faq-item">
      <h3>Why do I need to escape HTML?</h3>

      <p>Escaping HTML is essential to prevent code injection attacks and ensure your HTML is safely rendered, especially in dynamic applications or user-submitted content.</p>
    </div>
  </div>
</section>
<!-- Footer -->

<footer>
  <p>&copy; 2024 Histolix - All Rights Reserved.</p>
</footer>