info.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Binary Calculator - Simplified</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
  <!-- Header Section -->
   <!-- Header Section -->
  <header class="header">
    <nav class="navbar">
      <div class="logo">BinaryCalc</div>
      <ul class="nav-links">
        <li><a href="#about">What is Binary?</a></li>
        <li><a href="#how-it-works">How It Works</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#calculator">Calculator</a></li>
      </ul>
    </nav>
    <div class="hero">
      <h1>Understand & Calculate Binary with Ease!</h1>
      <p>Binary arithmetic simplified for everyone. Learn and compute effortlessly!</p>
      <a href="#calculator" class="cta-button">Try the Calculator Now</a>
    </div>
  </header>

  <!-- About Binary Section -->
 <section id="about" class="about-section">
  <div class="about-container">
    <div class="about-text">
      <h2>Understanding Binary Made Simple</h2>
      <p>
        Computers think in a language made of just two numbers: <strong>0</strong> and <strong>1</strong>. 
        This system is called <strong>binary</strong>. Each 0 or 1 is like a tiny switch—off (0) or on (1). 
        By combining these switches, computers can store and process everything from pictures to text!
      </p>
      <p>
        Imagine a series of light switches. When arranged in the right way, these switches create complex results. 
        In the same way, computers use sequences of 0s and 1s to represent and manage all the information we see and use.
      </p>
      <p>
        Don’t worry if it sounds complicated—binary is just the computer’s way of counting. 
        You don't need to understand every detail to use it, but it's amazing how much can be achieved with just 0s and 1s!
      </p>
    </div>
</section>


  <!-- How It Works Section -->
  <section id="how-it-works" class="how-it-works-section">
    <h2>How Binary Arithmetic Works</h2>
    <div class="how-it-works-container">
      <div class="step">
        <i class="fas fa-keyboard"></i>
        <h3>1. Input Binary Numbers</h3>
        <p>Enter two numbers using only 0s and 1s.</p>
      </div>
      <div class="step">
        <i class="fas fa-calculator"></i>
        <h3>2. Choose the Operation</h3>
        <p>Select what you want to do: add, subtract, multiply, or divide.</p>
      </div>
      <div class="step">
        <i class="fas fa-check-circle"></i>
        <h3>3. Get the Result</h3>
        <p>Your answer will be displayed instantly in binary format.</p>
      </div>
    </div>
  </section>

  <!-- Features Section -->
  <section id="features" class="features-section">
    <h2>Features of Our Calculator</h2>
    <div class="features-container">
      <div class="feature">
        <i class="fas fa-clock"></i>
        <h3>Instant Results</h3>
        <p>No more waiting! Get your binary answers immediately.</p>
      </div>
      <div class="feature">
        <i class="fas fa-user-friends"></i>
        <h3>Beginner Friendly</h3>
        <p>Designed for non-technical users to understand with ease.</p>
      </div>
      <div class="feature">
        <i class="fas fa-mobile-alt"></i>
        <h3>Mobile Responsive</h3>
        <p>Works smoothly on any device—desktop, tablet, or smartphone.</p>
      </div>
    </div>
  </section>

  <!-- Call to Calculator Section -->
  <section id="calculator" class="cta-section">
    <h2>Start Using the Calculator Now!</h2>
    <p>Ready to play with binary? Click the button below to launch the calculator.</p>
    <a href="info.html" class="cta-button">Go to Calculator</a>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <p>© 2024 BinaryCalc | <a href="mailto:info@binarycalc.com">Contact Us</a></p>
  </footer>
</body>
</html>