Hugging Face's logo

Spaces:
JamesToth
/
dtu
Running

App Files Community
JamesToth commited on
Commit
d521fff
·
verified ·
1 Parent(s): fadb6e6

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +854 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dtu
3
- emoji: 🐠
4
  colorFrom: pink
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: dtu
3
+ emoji: 🐳
4
  colorFrom: pink
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,854 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Delhi Technological University | Premier Engineering Institution</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
19
+ }
20
+
21
+ .news-marquee {
22
+ animation: scroll 25s linear infinite;
23
+ }
24
+
25
+ @keyframes scroll {
26
+ 0% { transform: translateX(0); }
27
+ 100% { transform: translateX(-50%); }
28
+ }
29
+
30
+ .card-hover:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
33
+ }
34
+
35
+ .department-card:hover .department-icon {
36
+ transform: rotateY(180deg);
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-50">
41
+ <!-- Top Announcement Bar -->
42
+ <div class="bg-yellow-500 text-black py-2 px-4">
43
+ <div class="container mx-auto flex items-center justify-between">
44
+ <div class="flex items-center space-x-2">
45
+ <i class="fas fa-bullhorn"></i>
46
+ <span class="font-semibold">Announcements:</span>
47
+ </div>
48
+ <div class="overflow-hidden whitespace-nowrap">
49
+ <div class="news-marquee inline-block whitespace-nowrap">
50
+ <span class="mx-8">Admissions 2023-24 now open! Last date: June 30</span>
51
+ <span class="mx-8">Campus placement drive by Google on July 15</span>
52
+ <span class="mx-8">DTU ranked #1 Engineering College in Delhi by NIRF 2023</span>
53
+ <span class="mx-8">New research center for AI inaugurated</span>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Header -->
60
+ <header class="bg-white shadow-md sticky top-0 z-50">
61
+ <div class="container mx-auto px-4 py-3">
62
+ <div class="flex items-center justify-between">
63
+ <!-- Logo -->
64
+ <div class="flex items-center space-x-4">
65
+ <img src="https://dtu.ac.in/Images/logo.png" alt="DTU Logo" class="h-16">
66
+ <div>
67
+ <h1 class="text-2xl font-bold text-blue-900">DELHI TECHNOLOGICAL UNIVERSITY</h1>
68
+ <p class="text-sm text-gray-600">Formerly Delhi College of Engineering</p>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Quick Links -->
73
+ <div class="hidden lg:flex items-center space-x-6">
74
+ <a href="#" class="text-blue-800 hover:text-blue-600 font-medium">Academics</a>
75
+ <a href="#" class="text-blue-800 hover:text-blue-600 font-medium">Research</a>
76
+ <a href="#" class="text-blue-800 hover:text-blue-600 font-medium">Admissions</a>
77
+ <a href="#" class="text-blue-800 hover:text-blue-600 font-medium">Campus Life</a>
78
+ <button class="bg-blue-700 hover:bg-blue-800 text-white px-4 py-2 rounded-md font-medium">Apply Now</button>
79
+ </div>
80
+
81
+ <!-- Mobile Menu Button -->
82
+ <button id="mobile-menu-button" class="lg:hidden text-gray-700">
83
+ <i class="fas fa-bars text-2xl"></i>
84
+ </button>
85
+ </div>
86
+
87
+ <!-- Mobile Menu -->
88
+ <div id="mobile-menu" class="hidden lg:hidden mt-4 pb-4">
89
+ <a href="#" class="block py-2 text-blue-800 hover:text-blue-600 font-medium">Academics</a>
90
+ <a href="#" class="block py-2 text-blue-800 hover:text-blue-600 font-medium">Research</a>
91
+ <a href="#" class="block py-2 text-blue-800 hover:text-blue-600 font-medium">Admissions</a>
92
+ <a href="#" class="block py-2 text-blue-800 hover:text-blue-600 font-medium">Campus Life</a>
93
+ <button class="w-full mt-2 bg-blue-700 hover:bg-blue-800 text-white px-4 py-2 rounded-md font-medium">Apply Now</button>
94
+ </div>
95
+ </div>
96
+ </header>
97
+
98
+ <!-- Hero Section -->
99
+ <section class="hero-gradient text-white py-16">
100
+ <div class="container mx-auto px-4">
101
+ <div class="flex flex-col lg:flex-row items-center">
102
+ <div class="lg:w-1/2 mb-10 lg:mb-0">
103
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Shaping Tomorrow's <span class="text-yellow-300">Technology Leaders</span></h1>
104
+ <p class="text-xl mb-8 opacity-90">Delhi Technological University is a premier institution dedicated to excellence in engineering education, research, and innovation.</p>
105
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
106
+ <button class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-3 rounded-md font-semibold">Explore Programs</button>
107
+ <button class="border-2 border-white hover:bg-white hover:text-blue-800 px-6 py-3 rounded-md font-semibold">Virtual Tour</button>
108
+ </div>
109
+ </div>
110
+ <div class="lg:w-1/2">
111
+ <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="DTU Campus" class="rounded-lg shadow-2xl w-full h-auto">
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- Quick Links Section -->
118
+ <section class="bg-white py-12">
119
+ <div class="container mx-auto px-4">
120
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
121
+ <a href="#" class="bg-blue-50 hover:bg-blue-100 rounded-lg p-6 text-center transition-all duration-300 card-hover">
122
+ <div class="text-blue-700 mb-3">
123
+ <i class="fas fa-graduation-cap text-3xl"></i>
124
+ </div>
125
+ <h3 class="font-semibold text-blue-900">Admissions</h3>
126
+ <p class="text-sm text-gray-600 mt-1">Explore our programs and admission process</p>
127
+ </a>
128
+ <a href="#" class="bg-blue-50 hover:bg-blue-100 rounded-lg p-6 text-center transition-all duration-300 card-hover">
129
+ <div class="text-blue-700 mb-3">
130
+ <i class="fas fa-flask text-3xl"></i>
131
+ </div>
132
+ <h3 class="font-semibold text-blue-900">Research</h3>
133
+ <p class="text-sm text-gray-600 mt-1">Cutting-edge research initiatives</p>
134
+ </a>
135
+ <a href="#" class="bg-blue-50 hover:bg-blue-100 rounded-lg p-6 text-center transition-all duration-300 card-hover">
136
+ <div class="text-blue-700 mb-3">
137
+ <i class="fas fa-briefcase text-3xl"></i>
138
+ </div>
139
+ <h3 class="font-semibold text-blue-900">Placements</h3>
140
+ <p class="text-sm text-gray-600 mt-1">Career opportunities for students</p>
141
+ </a>
142
+ <a href="#" class="bg-blue-50 hover:bg-blue-100 rounded-lg p-6 text-center transition-all duration-300 card-hover">
143
+ <div class="text-blue-700 mb-3">
144
+ <i class="fas fa-calendar-alt text-3xl"></i>
145
+ </div>
146
+ <h3 class="font-semibold text-blue-900">Events</h3>
147
+ <p class="text-sm text-gray-600 mt-1">Upcoming academic and cultural events</p>
148
+ </a>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- About DTU Section -->
154
+ <section class="bg-gray-50 py-16">
155
+ <div class="container mx-auto px-4">
156
+ <div class="flex flex-col lg:flex-row items-center">
157
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
158
+ <h2 class="text-3xl font-bold text-blue-900 mb-6">About <span class="text-blue-700">DTU</span></h2>
159
+ <p class="text-gray-700 mb-6">Established in 1941 as Delhi Polytechnic, Delhi Technological University (formerly Delhi College of Engineering) is one of the oldest engineering colleges in India. DTU has been a pioneer in engineering education with a rich legacy of academic excellence and innovation.</p>
160
+ <p class="text-gray-700 mb-6">With state-of-the-art infrastructure, world-class faculty, and strong industry collaborations, DTU provides an environment that nurtures creativity, critical thinking, and problem-solving skills.</p>
161
+ <div class="flex flex-wrap gap-4">
162
+ <div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[150px]">
163
+ <div class="text-blue-700 text-2xl font-bold mb-1">50+</div>
164
+ <div class="text-gray-600 text-sm">Years of Excellence</div>
165
+ </div>
166
+ <div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[150px]">
167
+ <div class="text-blue-700 text-2xl font-bold mb-1">10K+</div>
168
+ <div class="text-gray-600 text-sm">Students</div>
169
+ </div>
170
+ <div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[150px]">
171
+ <div class="text-blue-700 text-2xl font-bold mb-1">500+</div>
172
+ <div class="text-gray-600 text-sm">Faculty Members</div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ <div class="lg:w-1/2">
177
+ <div class="relative rounded-xl overflow-hidden shadow-lg">
178
+ <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="DTU Campus" class="w-full h-auto">
179
+ <div class="absolute inset-0 bg-blue-900 opacity-20"></div>
180
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6">
181
+ <h3 class="text-white text-xl font-semibold">Our Campus</h3>
182
+ <p class="text-gray-200">Spread over 164 acres with world-class infrastructure</p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- Departments Section -->
191
+ <section class="py-16 bg-white">
192
+ <div class="container mx-auto px-4">
193
+ <div class="text-center mb-12">
194
+ <h2 class="text-3xl font-bold text-blue-900 mb-4">Our <span class="text-blue-700">Departments</span></h2>
195
+ <p class="text-gray-600 max-w-2xl mx-auto">DTU offers undergraduate, postgraduate and doctoral programs across various engineering and technology disciplines.</p>
196
+ </div>
197
+
198
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
199
+ <!-- Department Card 1 -->
200
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
201
+ <div class="p-6">
202
+ <div class="flex items-center mb-4">
203
+ <div class="department-icon bg-blue-100 text-blue-700 w-12 h-12 rounded-full flex items-center justify-center text-xl mr-4 transition-all duration-500">
204
+ <i class="fas fa-laptop-code"></i>
205
+ </div>
206
+ <h3 class="text-xl font-semibold text-blue-900">Computer Engineering</h3>
207
+ </div>
208
+ <p class="text-gray-600 mb-4">Comprehensive program covering algorithms, systems, AI and software development.</p>
209
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
210
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
211
+ </a>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Department Card 2 -->
216
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
217
+ <div class="p-6">
218
+ <div class="flex items-center mb-4">
219
+ <div class="department-icon bg-blue-100 text-blue-700 w-12 h-12 rounded-full flex items-center justify-center text-xl mr-4 transition-all duration-500">
220
+ <i class="fas fa-bolt"></i>
221
+ </div>
222
+ <h3 class="text-xl font-semibold text-blue-900">Electrical Engineering</h3>
223
+ </div>
224
+ <p class="text-gray-600 mb-4">Focus on power systems, electronics, control systems and renewable energy.</p>
225
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
226
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
227
+ </a>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Department Card 3 -->
232
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
233
+ <div class="p-6">
234
+ <div class="flex items-center mb-4">
235
+ <div class="department-icon bg-blue-100 text-blue-700 w-12 h-12 rounded-full flex items-center justify-center text-xl mr-4 transition-all duration-500">
236
+ <i class="fas fa-robot"></i>
237
+ </div>
238
+ <h3 class="text-xl font-semibold text-blue-900">Mechanical Engineering</h3>
239
+ </div>
240
+ <p class="text-gray-600 mb-4">Covers design, manufacturing, thermal sciences and robotics.</p>
241
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
242
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
243
+ </a>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Department Card 4 -->
248
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
249
+ <div class="p-6">
250
+ <div class="flex items-center mb-4">
251
+ <div class="department-icon bg-blue-100 text-blue-700 w-12 h-12 rounded-full flex items-center justify-center text-xl mr-4 transition-all duration-500">
252
+ <i class="fas fa-atom"></i>
253
+ </div>
254
+ <h3 class="text-xl font-semibold text-blue-900">Civil Engineering</h3>
255
+ </div>
256
+ <p class="text-gray-600 mb-4">Infrastructure development, construction technology and environmental engineering.</p>
257
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
258
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
259
+ </a>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Department Card 5 -->
264
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
265
+ <div class="p-6">
266
+ <div class="flex items-center mb-4">
267
+ <div class="department-icon bg-blue-100 text-blue-700 w-12 h-12 rounded-full flex items-center justify-center text-xl mr-4 transition-all duration-500">
268
+ <i class="fas fa-dna"></i>
269
+ </div>
270
+ <h3 class="text-xl font-semibold text-blue-900">Biotechnology</h3>
271
+ </div>
272
+ <p class="text-gray-600 mb-4">Interdisciplinary program combining biology with engineering principles.</p>
273
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
274
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
275
+ </a>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Department Card 6 -->
280
+ <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover">
281
+ <div class="p-6">
282
+ <div class="flex items-center mb-4">
283
+ <div class="department-icon bg-blue-100 text-blue-700 w-12 h-12 rounded-full flex items-center justify-center text-xl mr-4 transition-all duration-500">
284
+ <i class="fas fa-chart-line"></i>
285
+ </div>
286
+ <h3 class="text-xl font-semibold text-blue-900">Management Studies</h3>
287
+ </div>
288
+ <p class="text-gray-600 mb-4">Business administration with focus on technology management.</p>
289
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
290
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
291
+ </a>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="text-center mt-10">
297
+ <button class="bg-blue-700 hover:bg-blue-800 text-white px-6 py-3 rounded-md font-medium">View All Departments</button>
298
+ </div>
299
+ </div>
300
+ </section>
301
+
302
+ <!-- News & Events Section -->
303
+ <section class="py-16 bg-gray-50">
304
+ <div class="container mx-auto px-4">
305
+ <div class="flex flex-col lg:flex-row">
306
+ <div class="lg:w-1/2 lg:pr-8 mb-10 lg:mb-0">
307
+ <h2 class="text-3xl font-bold text-blue-900 mb-6">Latest <span class="text-blue-700">News</span></h2>
308
+
309
+ <div class="space-y-6">
310
+ <!-- News Item 1 -->
311
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover">
312
+ <div class="p-6">
313
+ <div class="flex items-center mb-2">
314
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Announcement</span>
315
+ <span class="text-gray-500 text-sm ml-3">June 15, 2023</span>
316
+ </div>
317
+ <h3 class="text-xl font-semibold text-blue-900 mb-2">DTU partners with IIT Delhi for joint research initiative</h3>
318
+ <p class="text-gray-600 mb-3">The collaboration will focus on artificial intelligence and sustainable energy solutions with funding of ₹5 crores.</p>
319
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
320
+ Read More <i class="fas fa-arrow-right ml-2"></i>
321
+ </a>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- News Item 2 -->
326
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover">
327
+ <div class="p-6">
328
+ <div class="flex items-center mb-2">
329
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">Achievement</span>
330
+ <span class="text-gray-500 text-sm ml-3">June 10, 2023</span>
331
+ </div>
332
+ <h3 class="text-xl font-semibold text-blue-900 mb-2">DTU students win national robotics competition</h3>
333
+ <p class="text-gray-600 mb-3">Team RoboDTU secured first position in the All India Technical Festival held at IIT Bombay.</p>
334
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
335
+ Read More <i class="fas fa-arrow-right ml-2"></i>
336
+ </a>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="mt-6">
342
+ <button class="text-blue-700 hover:text-blue-900 font-medium flex items-center">
343
+ View All News <i class="fas fa-arrow-right ml-2"></i>
344
+ </button>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="lg:w-1/2 lg:pl-8">
349
+ <h2 class="text-3xl font-bold text-blue-900 mb-6">Upcoming <span class="text-blue-700">Events</span></h2>
350
+
351
+ <div class="space-y-6">
352
+ <!-- Event Item 1 -->
353
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover">
354
+ <div class="flex">
355
+ <div class="bg-blue-700 text-white p-4 flex flex-col items-center justify-center min-w-[80px]">
356
+ <div class="text-2xl font-bold">25</div>
357
+ <div class="text-sm">JUN</div>
358
+ </div>
359
+ <div class="p-4 flex-1">
360
+ <h3 class="text-xl font-semibold text-blue-900 mb-1">Annual Tech Fest - Techspardha</h3>
361
+ <p class="text-gray-600 mb-2">Three-day technical festival featuring competitions, workshops and guest lectures.</p>
362
+ <div class="flex items-center text-sm text-gray-500">
363
+ <i class="fas fa-clock mr-2"></i>
364
+ <span>9:00 AM - 5:00 PM</span>
365
+ <i class="fas fa-map-marker-alt ml-4 mr-2"></i>
366
+ <span>Main Auditorium</span>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Event Item 2 -->
373
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover">
374
+ <div class="flex">
375
+ <div class="bg-blue-700 text-white p-4 flex flex-col items-center justify-center min-w-[80px]">
376
+ <div class="text-2xl font-bold">05</div>
377
+ <div class="text-sm">JUL</div>
378
+ </div>
379
+ <div class="p-4 flex-1">
380
+ <h3 class="text-xl font-semibold text-blue-900 mb-1">Placement Preparation Workshop</h3>
381
+ <p class="text-gray-600 mb-2">Interactive sessions with industry experts on resume building and interview skills.</p>
382
+ <div class="flex items-center text-sm text-gray-500">
383
+ <i class="fas fa-clock mr-2"></i>
384
+ <span>2:00 PM - 4:00 PM</span>
385
+ <i class="fas fa-map-marker-alt ml-4 mr-2"></i>
386
+ <span>Career Development Center</span>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Event Item 3 -->
393
+ <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover">
394
+ <div class="flex">
395
+ <div class="bg-blue-700 text-white p-4 flex flex-col items-center justify-center min-w-[80px]">
396
+ <div class="text-2xl font-bold">15</div>
397
+ <div class="text-sm">JUL</div>
398
+ </div>
399
+ <div class="p-4 flex-1">
400
+ <h3 class="text-xl font-semibold text-blue-900 mb-1">Alumni Meet 2023</h3>
401
+ <p class="text-gray-600 mb-2">Reunion event for DTU alumni with networking opportunities and campus tour.</p>
402
+ <div class="flex items-center text-sm text-gray-500">
403
+ <i class="fas fa-clock mr-2"></i>
404
+ <span>10:00 AM - 8:00 PM</span>
405
+ <i class="fas fa-map-marker-alt ml-4 mr-2"></i>
406
+ <span>University Grounds</span>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="mt-6">
414
+ <button class="text-blue-700 hover:text-blue-900 font-medium flex items-center">
415
+ View All Events <i class="fas fa-arrow-right ml-2"></i>
416
+ </button>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </section>
422
+
423
+ <!-- Testimonials Section -->
424
+ <section class="py-16 bg-white">
425
+ <div class="container mx-auto px-4">
426
+ <div class="text-center mb-12">
427
+ <h2 class="text-3xl font-bold text-blue-900 mb-4">What Our <span class="text-blue-700">Students Say</span></h2>
428
+ <p class="text-gray-600 max-w-2xl mx-auto">Hear from our students about their experiences at DTU.</p>
429
+ </div>
430
+
431
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
432
+ <!-- Testimonial 1 -->
433
+ <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover">
434
+ <div class="flex items-center mb-4">
435
+ <div class="text-yellow-400 text-xl mr-1">
436
+ <i class="fas fa-star"></i>
437
+ <i class="fas fa-star"></i>
438
+ <i class="fas fa-star"></i>
439
+ <i class="fas fa-star"></i>
440
+ <i class="fas fa-star"></i>
441
+ </div>
442
+ </div>
443
+ <p class="text-gray-700 mb-6">"DTU provided me with excellent opportunities to grow both academically and professionally. The faculty is highly supportive and the campus life is vibrant."</p>
444
+ <div class="flex items-center">
445
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4">
446
+ <div>
447
+ <h4 class="font-semibold text-blue-900">Priya Sharma</h4>
448
+ <p class="text-sm text-gray-600">Computer Engineering, Batch of 2022</p>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Testimonial 2 -->
454
+ <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover">
455
+ <div class="flex items-center mb-4">
456
+ <div class="text-yellow-400 text-xl mr-1">
457
+ <i class="fas fa-star"></i>
458
+ <i class="fas fa-star"></i>
459
+ <i class="fas fa-star"></i>
460
+ <i class="fas fa-star"></i>
461
+ <i class="fas fa-star"></i>
462
+ </div>
463
+ </div>
464
+ <p class="text-gray-700 mb-6">"The research facilities at DTU are world-class. I got to work on cutting-edge projects that helped me secure a position at a top tech company."</p>
465
+ <div class="flex items-center">
466
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4">
467
+ <div>
468
+ <h4 class="font-semibold text-blue-900">Rahul Verma</h4>
469
+ <p class="text-sm text-gray-600">Electrical Engineering, Batch of 2021</p>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Testimonial 3 -->
475
+ <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover">
476
+ <div class="flex items-center mb-4">
477
+ <div class="text-yellow-400 text-xl mr-1">
478
+ <i class="fas fa-star"></i>
479
+ <i class="fas fa-star"></i>
480
+ <i class="fas fa-star"></i>
481
+ <i class="fas fa-star"></i>
482
+ <i class="fas fa-star-half-alt"></i>
483
+ </div>
484
+ </div>
485
+ <p class="text-gray-700 mb-6">"The industry connections and placement opportunities at DTU are exceptional. The alumni network is strong and always willing to help current students."</p>
486
+ <div class="flex items-center">
487
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4">
488
+ <div>
489
+ <h4 class="font-semibold text-blue-900">Ananya Patel</h4>
490
+ <p class="text-sm text-gray-600">Mechanical Engineering, Batch of 2023</p>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </section>
497
+
498
+ <!-- Placement Partners Section -->
499
+ <section class="py-16 bg-gray-100">
500
+ <div class="container mx-auto px-4">
501
+ <div class="text-center mb-12">
502
+ <h2 class="text-3xl font-bold text-blue-900 mb-4">Our <span class="text-blue-700">Placement Partners</span></h2>
503
+ <p class="text-gray-600 max-w-2xl mx-auto">DTU students are placed in top companies across the globe.</p>
504
+ </div>
505
+
506
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8">
507
+ <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg">
508
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/2560px-Google-flutter-logo.svg.png" alt="Google" class="h-12 object-contain">
509
+ </div>
510
+ <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg">
511
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Amazon_AWS_logo.svg/2560px-Amazon_AWS_logo.svg.png" alt="Amazon" class="h-12 object-contain">
512
+ </div>
513
+ <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg">
514
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Microsoft_logo.svg/2560px-Microsoft_logo.svg.png" alt="Microsoft" class="h-12 object-contain">
515
+ </div>
516
+ <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg">
517
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/HP_logo_2012.svg/1200px-HP_logo_2012.svg.png" alt="HP" class="h-12 object-contain">
518
+ </div>
519
+ <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg">
520
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1200px-Apple_logo_black.svg.png" alt="Apple" class="h-12 object-contain">
521
+ </div>
522
+ <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg">
523
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/2560px-IBM_logo.svg.png" alt="IBM" class="h-12 object-contain">
524
+ </div>
525
+ </div>
526
+
527
+ <div class="mt-12 bg-blue-800 rounded-xl p-8 text-white">
528
+ <div class="flex flex-col lg:flex-row items-center">
529
+ <div class="lg:w-2/3 mb-6 lg:mb-0">
530
+ <h3 class="text-2xl font-bold mb-3">Placement Statistics 2023</h3>
531
+ <p class="opacity-90">DTU continues its legacy of excellent placement records with top companies offering competitive packages.</p>
532
+ </div>
533
+ <div class="lg:w-1/3">
534
+ <div class="grid grid-cols-3 gap-4 text-center">
535
+ <div>
536
+ <div class="text-3xl font-bold">95%</div>
537
+ <div class="text-sm opacity-80">Placement Rate</div>
538
+ </div>
539
+ <div>
540
+ <div class="text-3xl font-bold">₹28L</div>
541
+ <div class="text-sm opacity-80">Highest Package</div>
542
+ </div>
543
+ <div>
544
+ <div class="text-3xl font-bold">₹12L</div>
545
+ <div class="text-sm opacity-80">Average Package</div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </section>
553
+
554
+ <!-- Contact Section -->
555
+ <section class="py-16 bg-white">
556
+ <div class="container mx-auto px-4">
557
+ <div class="flex flex-col lg:flex-row">
558
+ <div class="lg:w-1/2 lg:pr-12 mb-10 lg:mb-0">
559
+ <h2 class="text-3xl font-bold text-blue-900 mb-6">Contact <span class="text-blue-700">Us</span></h2>
560
+ <p class="text-gray-600 mb-8">Have questions about admissions, programs, or campus life? Reach out to us and we'll be happy to help.</p>
561
+
562
+ <div class="space-y-6">
563
+ <div class="flex items-start">
564
+ <div class="bg-blue-100 text-blue-700 p-3 rounded-full mr-4">
565
+ <i class="fas fa-map-marker-alt"></i>
566
+ </div>
567
+ <div>
568
+ <h4 class="font-semibold text-blue-900 mb-1">Address</h4>
569
+ <p class="text-gray-600">Delhi Technological University<br>Shahbad Daulatpur, Main Bawana Road<br>Delhi - 110042, India</p>
570
+ </div>
571
+ </div>
572
+
573
+ <div class="flex items-start">
574
+ <div class="bg-blue-100 text-blue-700 p-3 rounded-full mr-4">
575
+ <i class="fas fa-phone-alt"></i>
576
+ </div>
577
+ <div>
578
+ <h4 class="font-semibold text-blue-900 mb-1">Phone</h4>
579
+ <p class="text-gray-600">+91 11 2787 1001<br>Admissions Helpline: +91 11 2787 1010</p>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="flex items-start">
584
+ <div class="bg-blue-100 text-blue-700 p-3 rounded-full mr-4">
585
+ <i class="fas fa-envelope"></i>
586
+ </div>
587
+ <div>
588
+ <h4 class="font-semibold text-blue-900 mb-1">Email</h4>
589
+ <p class="text-gray-600">info@dtu.ac.in<br>admissions@dtu.ac.in</p>
590
+ </div>
591
+ </div>
592
+ </div>
593
+
594
+ <div class="mt-8">
595
+ <h4 class="font-semibold text-blue-900 mb-4">Follow Us</h4>
596
+ <div class="flex space-x-4">
597
+ <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center">
598
+ <i class="fab fa-facebook-f"></i>
599
+ </a>
600
+ <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center">
601
+ <i class="fab fa-twitter"></i>
602
+ </a>
603
+ <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center">
604
+ <i class="fab fa-linkedin-in"></i>
605
+ </a>
606
+ <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center">
607
+ <i class="fab fa-instagram"></i>
608
+ </a>
609
+ <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center">
610
+ <i class="fab fa-youtube"></i>
611
+ </a>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <div class="lg:w-1/2">
617
+ <div class="bg-gray-50 rounded-xl p-8">
618
+ <h3 class="text-xl font-semibold text-blue-900 mb-6">Send us a Message</h3>
619
+ <form>
620
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
621
+ <div>
622
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
623
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
624
+ </div>
625
+ <div>
626
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
627
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
628
+ </div>
629
+ <div>
630
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
631
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
632
+ </div>
633
+ <div>
634
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
635
+ <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
636
+ <option>Admissions</option>
637
+ <option>Academics</option>
638
+ <option>Placements</option>
639
+ <option>Research</option>
640
+ <option>Other</option>
641
+ </select>
642
+ </div>
643
+ </div>
644
+ <div class="mt-6">
645
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
646
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea>
647
+ </div>
648
+ <div class="mt-6">
649
+ <button type="submit" class="w-full bg-blue-700 hover:bg-blue-800 text-white px-6 py-3 rounded-md font-medium">Send Message</button>
650
+ </div>
651
+ </form>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </section>
657
+
658
+ <!-- Campus Map Section -->
659
+ <section class="bg-gray-100 py-12">
660
+ <div class="container mx-auto px-4">
661
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg">
662
+ <div class="flex flex-col lg:flex-row">
663
+ <div class="lg:w-1/2 p-8">
664
+ <h2 class="text-2xl font-bold text-blue-900 mb-6">Campus <span class="text-blue-700">Map</span></h2>
665
+ <p class="text-gray-600 mb-6">Explore our 164-acre campus with state-of-the-art facilities including academic blocks, research centers, hostels, sports complex and more.</p>
666
+
667
+ <div class="grid grid-cols-2 gap-4">
668
+ <div class="flex items-center">
669
+ <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
670
+ <i class="fas fa-graduation-cap"></i>
671
+ </div>
672
+ <span class="text-sm font-medium">Academic Blocks</span>
673
+ </div>
674
+ <div class="flex items-center">
675
+ <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
676
+ <i class="fas fa-flask"></i>
677
+ </div>
678
+ <span class="text-sm font-medium">Research Centers</span>
679
+ </div>
680
+ <div class="flex items-center">
681
+ <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
682
+ <i class="fas fa-home"></i>
683
+ </div>
684
+ <span class="text-sm font-medium">Hostels</span>
685
+ </div>
686
+ <div class="flex items-center">
687
+ <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
688
+ <i class="fas fa-utensils"></i>
689
+ </div>
690
+ <span class="text-sm font-medium">Cafeteria</span>
691
+ </div>
692
+ <div class="flex items-center">
693
+ <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
694
+ <i class="fas fa-book"></i>
695
+ </div>
696
+ <span class="text-sm font-medium">Library</span>
697
+ </div>
698
+ <div class="flex items-center">
699
+ <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
700
+ <i class="fas fa-running"></i>
701
+ </div>
702
+ <span class="text-sm font-medium">Sports Complex</span>
703
+ </div>
704
+ </div>
705
+
706
+ <div class="mt-8">
707
+ <button class="bg-blue-700 hover:bg-blue-800 text-white px-6 py-3 rounded-md font-medium">Download Campus Map</button>
708
+ </div>
709
+ </div>
710
+ <div class="lg:w-1/2">
711
+ <img src="https://images.unsplash.com/photo-1576495199011-eb94736d05d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="DTU Campus Map" class="w-full h-full object-cover">
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ </section>
717
+
718
+ <!-- Footer -->
719
+ <footer class="bg-blue-900 text-white pt-16 pb-8">
720
+ <div class="container mx-auto px-4">
721
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
722
+ <!-- About DTU -->
723
+ <div>
724
+ <h3 class="text-xl font-semibold mb-4">About DTU</h3>
725
+ <p class="text-blue-200 mb-4">Delhi Technological University is one of India's premier engineering institutions with a rich legacy of over 80 years in technical education.</p>
726
+ <div class="flex space-x-4">
727
+ <a href="#" class="text-blue-200 hover:text-white">
728
+ <i class="fab fa-facebook-f"></i>
729
+ </a>
730
+ <a href="#" class="text-blue-200 hover:text-white">
731
+ <i class="fab fa-twitter"></i>
732
+ </a>
733
+ <a href="#" class="text-blue-200 hover:text-white">
734
+ <i class="fab fa-linkedin-in"></i>
735
+ </a>
736
+ <a href="#" class="text-blue-200 hover:text-white">
737
+ <i class="fab fa-instagram"></i>
738
+ </a>
739
+ </div>
740
+ </div>
741
+
742
+ <!-- Quick Links -->
743
+ <div>
744
+ <h3 class="text-xl font-semibold mb-4">Quick Links</h3>
745
+ <ul class="space-y-2">
746
+ <li><a href="#" class="text-blue-200 hover:text-white">Home</a></li>
747
+ <li><a href="#" class="text-blue-200 hover:text-white">About Us</a></li>
748
+ <li><a href="#" class="text-blue-200 hover:text-white">Academics</a></li>
749
+ <li><a href="#" class="text-blue-200 hover:text-white">Admissions</a></li>
750
+ <li><a href="#" class="text-blue-200 hover:text-white">Research</a></li>
751
+ <li><a href="#" class="text-blue-200 hover:text-white">Placements</a></li>
752
+ <li><a href="#" class="text-blue-200 hover:text-white">Contact Us</a></li>
753
+ </ul>
754
+ </div>
755
+
756
+ <!-- Important Links -->
757
+ <div>
758
+ <h3 class="text-xl font-semibold mb-4">Important Links</h3>
759
+ <ul class="space-y-2">
760
+ <li><a href="#" class="text-blue-200 hover:text-white">AICTE</a></li>
761
+ <li><a href="#" class="text-blue-200 hover:text-white">UGC</a></li>
762
+ <li><a href="#" class="text-blue-200 hover:text-white">NIRF</a></li>
763
+ <li><a href="#" class="text-blue-200 hover:text-white">DTE Delhi</a></li>
764
+ <li><a href="#" class="text-blue-200 hover:text-white">Alumni Portal</a></li>
765
+ <li><a href="#" class="text-blue-200 hover:text-white">Careers</a></li>
766
+ <li><a href="#" class="text-blue-200 hover:text-white">Sitemap</a></li>
767
+ </ul>
768
+ </div>
769
+
770
+ <!-- Newsletter -->
771
+ <div>
772
+ <h3 class="text-xl font-semibold mb-4">Newsletter</h3>
773
+ <p class="text-blue-200 mb-4">Subscribe to our newsletter to receive updates on news and events.</p>
774
+ <form class="flex">
775
+ <input type="email" placeholder="Your Email" class="px-4 py-2 rounded-l-md w-full text-gray-800">
776
+ <button type="submit" class="bg-blue-700 hover:bg-blue-800 px-4 py-2 rounded-r-md">
777
+ <i class="fas fa-paper-plane"></i>
778
+ </button>
779
+ </form>
780
+ </div>
781
+ </div>
782
+
783
+ <div class="border-t border-blue-800 pt-8">
784
+ <div class="flex flex-col md:flex-row justify-between items-center">
785
+ <div class="mb-4 md:mb-0">
786
+ <p class="text-blue-300">© 2023 Delhi Technological University. All Rights Reserved.</p>
787
+ </div>
788
+ <div class="flex space-x-6">
789
+ <a href="#" class="text-blue-300 hover:text-white">Privacy Policy</a>
790
+ <a href="#" class="text-blue-300 hover:text-white">Terms of Service</a>
791
+ <a href="#" class="text-blue-300 hover:text-white">Accessibility</a>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </footer>
797
+
798
+ <!-- Back to Top Button -->
799
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-700 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-800 transition-all duration-300 hidden">
800
+ <i class="fas fa-arrow-up"></i>
801
+ </button>
802
+
803
+ <script>
804
+ // Mobile Menu Toggle
805
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
806
+ const mobileMenu = document.getElementById('mobile-menu');
807
+
808
+ mobileMenuButton.addEventListener('click', () => {
809
+ mobileMenu.classList.toggle('hidden');
810
+ });
811
+
812
+ // Back to Top Button
813
+ const backToTopButton = document.getElementById('back-to-top');
814
+
815
+ window.addEventListener('scroll', () => {
816
+ if (window.pageYOffset > 300) {
817
+ backToTopButton.classList.remove('hidden');
818
+ } else {
819
+ backToTopButton.classList.add('hidden');
820
+ }
821
+ });
822
+
823
+ backToTopButton.addEventListener('click', () => {
824
+ window.scrollTo({ top: 0, behavior: 'smooth' });
825
+ });
826
+
827
+ // Card hover effects
828
+ const cards = document.querySelectorAll('.card-hover');
829
+
830
+ cards.forEach(card => {
831
+ card.addEventListener('mouseenter', () => {
832
+ card.style.transition = 'all 0.3s ease';
833
+ });
834
+
835
+ card.addEventListener('mouseleave', () => {
836
+ card.style.transition = 'all 0.3s ease';
837
+ });
838
+ });
839
+
840
+ // Department icon animation
841
+ const departmentIcons = document.querySelectorAll('.department-icon');
842
+
843
+ departmentIcons.forEach(icon => {
844
+ icon.addEventListener('mouseenter', () => {
845
+ icon.style.transition = 'all 0.5s ease';
846
+ });
847
+
848
+ icon.addEventListener('mouseleave', () => {
849
+ icon.style.transition = 'all 0.5s ease';
850
+ });
851
+ });
852
+ </script>
853
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JamesToth/dtu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
854
+ </html>