diff --git a/index.html b/index.html
new file mode 100644
index 0000000..de4fce9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+ Class Timetable
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b3dbe51
--- /dev/null
+++ b/script.js
@@ -0,0 +1,28 @@
+function showTeacher(subject) {
+ const teacher = {
+ 'PROGRAMMING BASICS': 'Prof. Ram Kumar
Email: ram_kumar@btech.edu
Room: B-101, Contact: 9991234567',
+ 'DATABASE SYSTEMS': 'Prof. Shalini Mehta
Email: shalini_mehta@btech.edu
Room: B-102, Contact: 9987654321',
+ 'NETWORKING': 'Prof. Amit Kumar
Email: amit_kumar@btech.edu
Room: B-103, Contact: 9976543210',
+ 'WEB DEVELOPMENT': 'Prof. Nisha Gupta
Email: nisha_gupta@btech.edu
Room: B-104, Contact: 9965432109',
+ 'SOFTWARE TESTING': 'Prof. Rakesh Sharma
Email: rakesh_sharma@btech.edu
Room: B-105, Contact: 9954321098',
+ 'PROGRAMMING LAB': 'Prof. Anil Raj
Email: anil_raj@btech.edu
Lab: L-201, Contact: 9943210987',
+ 'DATABASE SYSTEMS LAB': 'Prof. Priya Singh
Email: priya_singh@btech.edu
Lab: L-202, Contact: 9932109876',
+ 'NETWORKING LAB': 'Prof. Sunil Kumar
Email: sunil_kumar@btech.edu
Lab: L-203, Contact: 9921098765',
+ 'WEB DEVELOPMENT LAB': 'Prof. Seema Verma
Email: seema_verma@btech.edu
Lab: L-204, Contact: 9910987654',
+ 'Lunch': 'Enjoy your Lunch Break!'
+ };
+
+ document.getElementById('details').innerHTML = teacher[subject];
+ document.getElementById('teacher').style.display = 'flex';
+}
+
+function closeModal() {
+ document.getElementById('teacher').style.display = 'none';
+}
+
+window.onclick = function(event) {
+ const modal = document.getElementById('teacher');
+ if (event.target == modal) {
+ modal.style.display = 'none';
+ }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..21b3417
--- /dev/null
+++ b/style.css
@@ -0,0 +1,82 @@
+body {
+ background-color: #f0f4f8;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ width: 80%;
+ margin: 50px auto;
+ padding: 20px;
+ background-color: #fefefe;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.title {
+ text-align: center;
+ color: #2c3e50;
+ margin-bottom: 20px;
+ font-size: 28px;
+}
+
+.timetable {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 16px;
+}
+
+.timetable th {
+ background-color: #34495e;
+ color: #fff;
+ padding: 15px;
+ border: 1px solid #ddd;
+}
+
+.timetable td {
+ padding: 15px;
+ border: 1px solid #ddd;
+ text-align: center;
+ cursor: pointer;
+}
+
+.lunch {
+ background-color: #bdc3c7;
+ font-weight: bold;
+}
+
+.timetable tbody tr:hover td {
+ background-color: #ecf0f1;
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ justify-content: center;
+ align-items: center;
+}
+
+.content {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 10px;
+ width: 50%;
+ text-align: center;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.close {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ font-size: 24px;
+ cursor: pointer;
+ color: #e74c3c;
+}