diff --git a/timetable project/index.html b/timetable project/index.html
new file mode 100644
index 0000000..2ddac7b
--- /dev/null
+++ b/timetable project/index.html	
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Class Timetable</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="timetable.js"></script>
+    <link rel="stylesheet" href="timetable.css">
+
+
+    
+    
+
+</head>
+
+<body>
+    <div class="container timetable-container">
+        <h1 class="text-center">Class Timetable</h1>
+        <table class="table table-bordered">
+            <thead>
+                <tr>
+                    <th>Time</th>
+                    <th>Monday</th>
+                    <th>Tuesday</th>
+                    <th>Wednesday</th>
+                    <th>Thursday</th>
+                    <th>Friday</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>9:00 AM - 10:00 AM</td>
+                    <td class="timetable-cell" data-teacher="teacher1">Maths - Mr.Rohan</td>
+                    <td class="timetable-cell" data-teacher="teacher2">Science - Mrs Shalja</td>
+                    <td class="timetable-cell" data-teacher="teacher3">History - Mr. Shiraj</td>
+                    <td class="timetable-cell" data-teacher="teacher4">Geography - Mr. Shivam</td>
+                    <td class="timetable-cell" data-teacher="teacher5">Physics - Mrs Manali</td>
+                </tr>
+                <tr>
+                    <td>10:00 AM - 11:00 AM</td>
+                    <td class="timetable-cell" data-teacher="teacher2">Science - Mrs Shalja </td>
+                    <td class="timetable-cell" data-teacher="teacher1">Maths - Mr.Rohan</td>
+                    <td class="timetable-cell" data-teacher="teacher4">Geography - Mr. Shivam</td>
+                    <td class="timetable-cell" data-teacher="teacher3">History - Mr. Shiraj</td>
+                    <td class="timetable-cell" data-teacher="teacher5">Physics -Mrs Manali</td>
+                </tr>
+                <tr>
+                    <td>11:00 AM - 12:00 PM</td>
+                    <td class="timetable-cell" data-teacher="teacher3">History - Mr. Shiraj</td>
+                    <td class="timetable-cell" data-teacher="teacher4">Geography - Mr. Shivam</td>
+                    <td class="timetable-cell" data-teacher="teacher1">Maths - Mr.Rohan</td>
+                    <td class="timetable-cell" data-teacher="teacher2">Science - Mrs Shalja</td>
+                    <td class="timetable-cell" data-teacher="teacher5">Physics - Mrs Manali</td>
+                </tr>
+                <tr>
+                    <td class="lunch-break">12:00 PM - 1:00 PM</td>
+                    <td colspan="5" class="text-center lunch-break">Lunch Break</td>
+                </tr>
+                <tr>
+                    <td>1:00 PM - 2:00 PM</td>
+                    <td class="timetable-cell" data-teacher="teacher5">Physics - Mrs Manali</td>
+                    <td class="timetable-cell" data-teacher="teacher1">Maths - Mr.Rohan</td>
+                    <td class="timetable-cell" data-teacher="teacher2">Science - Mrs Shalja</td>
+                    <td class="timetable-cell" data-teacher="teacher3">History - Mr. Shiraj</td>
+                    <td class="timetable-cell" data-teacher="teacher4">Geography - Mr. Shivam</td>
+                </tr>
+                <tr>
+                    <td>2:00 PM - 3:00 PM</td>
+                    <td class="timetable-cell" data-teacher="teacher4">Geography - Mr. Shivam</td>
+                    <td class="timetable-cell" data-teacher="teacher5">Physics - Mrs Manali</td>
+                    <td class="timetable-cell" data-teacher="teacher1">Maths - Mr.Rohan</td>
+                    <td class="timetable-cell" data-teacher="teacher2">Science - Mrs Shalja</td>
+                    <td class="timetable-cell" data-teacher="teacher3">History - Mr. Shiraj</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <!-- Teacher Info Section (Hidden by default) -->
+        <div id="teacher1" class="teacher-info">
+            <h3>Mr.Rohan - Maths Teacher</h3>
+            <p>Email: a.maths@example.com</p>
+            <p>Phone: 123-456-7890</p>
+        </div>
+        <div id="teacher2" class="teacher-info">
+            <h3>Mrs Shalja - Science Teacher</h3>
+            <p>Email: b.science@example.com</p>
+            <p>Phone: 098-765-4321</p>
+        </div>
+        <div id="teacher3" class="teacher-info">
+            <h3>Mr. Shiraj - History Teacher</h3>
+            <p>Email: c.history@example.com</p>
+            <p>Phone: 234-567-8901</p>
+        </div>
+        <div id="teacher4" class="teacher-info">
+            <h3>Mr. Shivam - Geography Teacher</h3>
+            <p>Email: d.geography@example.com</p>
+            <p>Phone: 345-678-9012</p>
+        </div>
+        <div id="teacher5" class="teacher-info">
+            <h3>Mrs Manali - Physics Teacher</h3>
+            <p>Email: e.physics@example.com</p>
+            <p>Phone: 456-789-0123</p>
+        </div>
+    </div>
+
+    <script>
+        document.querySelectorAll('.timetable-cell').forEach(cell => {
+            cell.addEventListener('click', function () {
+                let teacherId = this.getAttribute('data-teacher');
+
+                // Hide all teacher info
+                document.querySelectorAll('.teacher-info').forEach(info => {
+                    info.style.display = 'none'; // Hide all teacher info
+                });
+
+                // Show selected teacher info
+                const selectedInfo = document.getElementById(teacherId);
+                if (selectedInfo) {
+                    selectedInfo.style.display = 'block'; // Show the clicked teacher's info
+                }
+            });
+        });
+    </script>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1
+
diff --git a/timetable project/style.css b/timetable project/style.css
new file mode 100644
index 0000000..690a3f0
--- /dev/null
+++ b/timetable project/style.css	
@@ -0,0 +1,23 @@
+body {
+    background-color: #f8f9fa;
+    color: #75818d;
+    font-family: Arial, sans-serif;
+}
+
+h1 {
+    color: #007bff; /* Primary color for header */
+}
+
+.teacher-link {
+    text-decoration: none;
+    color: #007bff; /* Link color */
+}
+
+.teacher-link:hover {
+    color: #0056b3;
+    text-decoration: underline;
+}
+
+.table-hover tbody tr:hover {
+    background-color: #f1f1f1; /* Row hover effect */
+}
diff --git a/timetable project/timetable.css b/timetable project/timetable.css
new file mode 100644
index 0000000..792e3b8
--- /dev/null
+++ b/timetable project/timetable.css	
@@ -0,0 +1,60 @@
+
+body {
+    background-color: #f8f9fa;
+    font-family: Arial, sans-serif;
+}
+
+.timetable-container {
+    margin-top: 50px;
+    padding: 20px;
+    border-radius: 10px;
+    background-color: #ffffff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    color: #007bff;
+    margin-bottom: 20px;
+}
+
+.table {
+    border-collapse: collapse;
+}
+
+.table th,
+.table td {
+    text-align: center;
+    padding: 15px;
+}
+
+.timetable-cell {
+    background-color: #f0f8ff;
+    transition: background-color 0.3s;
+}
+
+.timetable-cell:hover {
+    background-color: #e9ecef;
+    cursor: pointer;
+}
+
+.teacher-info {
+    display: none; /* Initially hide teacher info */
+    background-color: #e9ecef;
+    border-radius: 10px;
+    padding: 15px;
+    margin-top: 20px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.teacher-info h3 {
+    color: #343a40;
+}
+
+.teacher-info p {
+    margin: 5px 0;
+}
+
+.lunch-break {
+    background-color: #ffcccc;
+    font-weight: bold;
+}
diff --git a/timetable project/timetable.js b/timetable project/timetable.js
new file mode 100644
index 0000000..33be14b
--- /dev/null
+++ b/timetable project/timetable.js	
@@ -0,0 +1,16 @@
+document.querySelectorAll('.timetable-cell').forEach(cell => {
+    cell.addEventListener('click', function () {
+        let teacherId = this.getAttribute('data-teacher');
+
+        // Hide all teacher info
+        document.querySelectorAll('.teacher-info').forEach(info => {
+            info.style.display = 'none'; // Hide all teacher info
+        });
+
+        // Show selected teacher info
+        const selectedInfo = document.getElementById(teacherId);
+        if (selectedInfo) {
+            selectedInfo.style.display = 'block'; // Show the clicked teacher's info
+        }
+    });
+});
\ No newline at end of file

Time	Monday	Tuesday	Wednesday	Thursday	Friday
9:00 AM - 10:00 AM	Maths - Mr.Rohan	Science - Mrs Shalja	History - Mr. Shiraj	Geography - Mr. Shivam	Physics - Mrs Manali
10:00 AM - 11:00 AM	Science - Mrs Shalja	Maths - Mr.Rohan	Geography - Mr. Shivam	History - Mr. Shiraj	Physics -Mrs Manali
11:00 AM - 12:00 PM	History - Mr. Shiraj	Geography - Mr. Shivam	Maths - Mr.Rohan	Science - Mrs Shalja	Physics - Mrs Manali
12:00 PM - 1:00 PM	Lunch Break
1:00 PM - 2:00 PM	Physics - Mrs Manali	Maths - Mr.Rohan	Science - Mrs Shalja	History - Mr. Shiraj	Geography - Mr. Shivam
2:00 PM - 3:00 PM	Geography - Mr. Shivam	Physics - Mrs Manali	Maths - Mr.Rohan	Science - Mrs Shalja	History - Mr. Shiraj