pro.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Processing Unit</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 20px;
            padding: 10px;
        }

        h1 {
            color: #3c0ebd;
            text-align: center;
            font-size: 26px;
            margin-bottom: 10px;
        }

        h2 {
            color: #210780;
            font-size: 22px;
            margin-top: 20px;
        }

        p {
            font-size: 18px;
            color: #bb1414;
            line-height: 1.6;
        }



     .image-container img {
    max-width: 100%; /* Ensures images don't exceed container width */
    height: auto; /* Maintains original aspect ratio */
    border: 2px solid red;
    border-radius: 10px;
}

        .image-container img {
            width: 100%;
            max-width: 300px;
            height: auto;
            border: 2px solid red;
            border-radius: 10px;
        }



        .e {
            border: 1px solid transparent;
            height: 80px;
            width: 80%;
            max-width: 250px;
            background-color: lightgray;
            margin: 20px auto;
        }

        /* Responsive Styles */
        @media (max-width: 768px) {
            h1 { font-size: 24px; }
            h2 { font-size: 20px; }
            p { font-size: 16px; }
            .d { max-width: 250px; }
        }

        @media (max-width: 480px) {
            h1 { font-size: 22px; }
            h2 { font-size: 18px; }
            p { font-size: 14px; }
            .d { max-width: 200px; }
        }
    </style>
</head>
<body>

<h1>Processing Unit</h1>

<h2>C.P.U - Central Processing Unit</h2>
<div class="image-container">
    <img class="d" src="cpu.jpeg" alt="CPU">
</div>
<p>The CPU is the brain of the computer. It can be divided into three types:</p>
<ul>
    <li>Control Unit (CU)</li>
    <li>Arithmetic Logic Unit (ALU)</li>
    <li>Instruction Register (IR)</li>
</ul>

<h2>1. Control Unit</h2>
<div class="image-container">
    <img class="d" src="control.jpeg" alt="Control Unit">
</div>
<p>The control unit manages and directs the operations of the computer. It acts as the central nervous system (CNS) of the computer.</p>
<p>Its main function is to fetch and decode instructions.</p>

<h2>2. Arithmetic Logic Unit (ALU)</h2>
<div class="image-container">
    <img class="d" src="alu.jpeg" alt="ALU">
</div>
<p>The Arithmetic and Logical Unit (ALU) is responsible for executing data operations, including all arithmetic and logical calculations.</p>

<h2>3. Instruction Register (IR)</h2>
<div class="image-container">
    <img class="d" src="ir.jpeg" alt="Instruction Register">
</div>
<p>The Instruction Register (IR) acts as a temporary memory, holding data for a short time before transferring it to other components.</p>

<div class="e"></div>

</body>
</html>