<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Parts of a Computer</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Roboto&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>🖥️ Parts of a Computer</h1>
<p>Scroll down to discover each component and its function.</p>
</header>
<main>
<section class="part" data-aos="fade-up">
<img src="images/CASE.png" alt="Computer Case" />
<div class="info"><h2>Case</h2><p>Houses and protects all internal components of the computer.</p></div>
</section>
<section class="part" data-aos="fade-up">
<img src="images/PSU.png" alt="Power Supply Unit" />
<div class="info"><h2>Power Supply Unit (PSU)</h2><p>Converts electrical power from an outlet into usable power for components.</p></div>
</section>
<section class="part" data-aos="fade-up">
<img src="images/MOBO.png" alt="Motherboard" />
<div class="info"><h2>Motherboard (MOBO)</h2><p>Connects all parts of the computer and allows them to communicate.</p></div>
</section>
<section class="part" data-aos="fade-up">
<img src="images/CPU.png" alt="Central Processing Unit" />
<div class="info"><h2>CPU</h2><p>The brain of the computer — processes instructions and data.</p></div>
</section>
<section class="part" data-aos="fade-up">
<img src="images/GPU.png" alt="Graphics Card" />
<div class="info"><h2>GPU</h2><p>Handles rendering of graphics, videos, and visual data.</p></div>
</section>
<section class="part" data-aos="fade-up">
<img src="images/RAM.png" alt="RAM" />
<div class="info"><h2>RAM</h2><p>Temporary memory used to run programs quickly and efficiently.</p></div>
</section>
<section class="part" data-aos="fade-up">
<img src="images/STORAGE.png" alt="Storage" />
<div class="info"><h2>Storage</h2><p>Holds your operating system, files, and programs permanently (HDD/SSD).</p></div>
</section>
<section class="part" data-aos="zoom-in-up">
<h2>🎉 You’ve Built a PC!</h2>
<p>Each part works together to bring your computer to life. Well done!</p>
</section>
</main>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init();</script>
</body>
</html>