Computer.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="canonical" href="https://infinityminds.vercel.app/" />
  
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XLYRTMS32V"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XLYRTMS32V');
  </script>

  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <meta charset="UTF-8">
  <title>Computer Basics – Hardware & Software | InfinityMind</title>
  <meta name="description" content="Understand computer basics including hardware, software and operating system concepts explained clearly.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Pankaj Panwar">
  <link rel="stylesheet" href="Css3.css">
  
  <script src="Js3.js" defer></script>
  
  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "Introduction to Computers – Basics for Beginners",
  "description": "Learn the fundamentals of computers including hardware, software, and operating systems.",
  "author": {
    "@type": "Person",
    "name": "Pankaj Panwar"
  },
  "publisher": {
    "@type": "Organization",
    "name": "INFINITY Minds"
  }
}
</script>
  
  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://infinitymind1.netlify.app/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Computer Basics",
      "item": "https://infinitymind1.netlify.app/Computer.html"
    }
  ]
}
</script>
  
</head><body>

  <button class="menu-btn" onclick="toggleSidebar()">☰</button>

  <aside class="sidebar" id="sidebar">
    <h2 class="logo">INFINITY</h2>
    <nav>
      <a href="home.html">Home 🌐</a> 
      <a href="tutorials.html">Digital Skills Hub</a>
      <a href="Computer.html" class="active">Computer Basics 💻</a>
      <a href="Course.html">Programming 🛰️</a>
      <a href="devlog.html">Developer Tools 🛠️</a>
      <a href="Quantum.html">Quantum Computing ⚛️</a>
      <a href="Download.html">Downloads 📥</a>
      <a href="feedback.html">Feedback 📬</a>
      <a href="faq.html">FAQ❓</a>
      <a href="contact.html">Contact ✉️</a>
      <a href="quiz.html" >INFINITY Quiz 🧩 </a>
      <a href="about.html" class="b">About INFINITY 🧠</a>
    </nav>
  </aside>

  <div class="content-wrapper">
    
    

    <header class="page-header" id="afterVideo">
      <img src="Computer.jpg" alt="Computer Overview" style="max-width: 600px; width: 100%; border-radius: 20px; box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); margin-bottom: 20px;">
      <h1>💻 Computer Basics</h1>
      <p>Master the fundamentals of Hardware, Software, and OS</p>
    </header>

    <h2 style="color: #a855f7; text-align: center; margin-bottom: 20px;">📺 Tutorial Playlist</h2>
    <div class="tools-grid" style="margin-bottom: 50px;">
      <div class="tool-card" style="width: 200px; padding: 15px; text-align: center;">
        <p style="font-size: 14px;">What is Computer?</p>
        <a href="https://youtu.be/Cu3R5it4cQs" target="_blank">Watch Now 📺</a>
      </div>
      <div class="tool-card" style="width: 200px; padding: 15px; text-align: center;">
        <p style="font-size: 14px;">What is OS?</p>
        <a href="https://youtu.be/PU9O3shK4wc" target="_blank">Watch Now 📺</a>
      </div>
      <div class="tool-card" style="width: 200px; padding: 15px; text-align: center;">
        <p style="font-size: 14px;">CPU vs GPU</p>
        <a href="https://youtu.be/UnVrtDzwaeI" target="_blank">Watch Now 📺</a>
      </div>
      <div class="tool-card" style="width: 200px; padding: 15px; text-align: center;">
        <p style="font-size: 14px;">Hardware/Software</p>
        <a href="https://youtu.be/vG_qmtdBPTU" target="_blank">Watch Now 📺</a>
      </div>
    </div>

    <h1 class="section-heading" style="color: #a855f7; margin-bottom: 40px;">📸 Visual Learning</h1>
    
    <div class="tools-grid">
      <div class="tool-card">
        <img src="Computers Pictures.jpg" alt="Types of Computers">
        <h3>Types of Computers</h3>
        <p>From Supercomputers to Microcomputers, understand every category.</p>
      </div>

      <div class="tool-card">
        <img src="Parts.jpg" alt="Parts of Computer">
        <h3>Internal Parts</h3>
        <p>Deep dive into Motherboard, RAM, and Storage components.</p>
      </div>

      <div class="tool-card">
        <img src="Virus.jpg" alt="Computer Virus">
        <h3>Cyber Security</h3>
        <p>Learn how viruses affect your system and how to stay safe.</p>
      </div>

      <div class="tool-card">
        <img src="Notes.jpg" alt="Notes">
        <h3>Quick Revision</h3>
        <p>Short handwritten notes for your upcoming exams.</p>
      </div>

      <div class="tool-card">
        <img src="Easy.jpg" alt="Definition">
        <h3>Simple Definition</h3>
        <p>The easiest way to define a computer for beginners.</p>
      </div>
    </div>

  </div> <script>
    function toggleSidebar() {
      document.getElementById("sidebar").classList.toggle("show");
    }
  </script>
</body>

</html>