| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Delhi Technological University | Premier Engineering Institution</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | scroll-behavior: smooth; |
| | } |
| | |
| | .hero-gradient { |
| | background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%); |
| | } |
| | |
| | .news-marquee { |
| | animation: scroll 25s linear infinite; |
| | } |
| | |
| | @keyframes scroll { |
| | 0% { transform: translateX(0); } |
| | 100% { transform: translateX(-50%); } |
| | } |
| | |
| | .card-hover:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | } |
| | |
| | .department-card:hover .department-icon { |
| | transform: rotateY(180deg); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50"> |
| | |
| | <div class="bg-yellow-500 text-black py-2 px-4"> |
| | <div class="container mx-auto flex items-center justify-between"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-bullhorn"></i> |
| | <span class="font-semibold">Announcements:</span> |
| | </div> |
| | <div class="overflow-hidden whitespace-nowrap"> |
| | <div class="news-marquee inline-block whitespace-nowrap"> |
| | <span class="mx-8">Admissions 2023-24 now open! Last date: June 30</span> |
| | <span class="mx-8">Campus placement drive by Google on July 15</span> |
| | <span class="mx-8">DTU ranked #1 Engineering College in Delhi by NIRF 2023</span> |
| | <span class="mx-8">New research center for AI inaugurated</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <header class="bg-white shadow-md sticky top-0 z-50"> |
| | <div class="container mx-auto px-4 py-3"> |
| | <div class="flex items-center justify-between"> |
| | |
| | <div class="flex items-center space-x-4"> |
| | <img src="https://dtu.ac.in/Images/logo.png" alt="DTU Logo" class="h-16"> |
| | <div> |
| | <h1 class="text-2xl font-bold text-blue-900">DELHI TECHNOLOGICAL UNIVERSITY</h1> |
| | <p class="text-sm text-gray-600">Formerly Delhi College of Engineering</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="hidden lg:flex items-center space-x-6"> |
| | <a href="#" class="text-blue-800 hover:text-blue-600 font-medium">Academics</a> |
| | <a href="#" class="text-blue-800 hover:text-blue-600 font-medium">Research</a> |
| | <a href="#" class="text-blue-800 hover:text-blue-600 font-medium">Admissions</a> |
| | <a href="#" class="text-blue-800 hover:text-blue-600 font-medium">Campus Life</a> |
| | <button class="bg-blue-700 hover:bg-blue-800 text-white px-4 py-2 rounded-md font-medium">Apply Now</button> |
| | </div> |
| | |
| | |
| | <button id="mobile-menu-button" class="lg:hidden text-gray-700"> |
| | <i class="fas fa-bars text-2xl"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div id="mobile-menu" class="hidden lg:hidden mt-4 pb-4"> |
| | <a href="#" class="block py-2 text-blue-800 hover:text-blue-600 font-medium">Academics</a> |
| | <a href="#" class="block py-2 text-blue-800 hover:text-blue-600 font-medium">Research</a> |
| | <a href="#" class="block py-2 text-blue-800 hover:text-blue-600 font-medium">Admissions</a> |
| | <a href="#" class="block py-2 text-blue-800 hover:text-blue-600 font-medium">Campus Life</a> |
| | <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> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <section class="hero-gradient text-white py-16"> |
| | <div class="container mx-auto px-4"> |
| | <div class="flex flex-col lg:flex-row items-center"> |
| | <div class="lg:w-1/2 mb-10 lg:mb-0"> |
| | <h1 class="text-4xl md:text-5xl font-bold mb-6">Shaping Tomorrow's <span class="text-yellow-300">Technology Leaders</span></h1> |
| | <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> |
| | <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| | <button class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-3 rounded-md font-semibold">Explore Programs</button> |
| | <button class="border-2 border-white hover:bg-white hover:text-blue-800 px-6 py-3 rounded-md font-semibold">Virtual Tour</button> |
| | </div> |
| | </div> |
| | <div class="lg:w-1/2"> |
| | <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"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-white py-12"> |
| | <div class="container mx-auto px-4"> |
| | <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
| | <a href="#" class="bg-blue-50 hover:bg-blue-100 rounded-lg p-6 text-center transition-all duration-300 card-hover"> |
| | <div class="text-blue-700 mb-3"> |
| | <i class="fas fa-graduation-cap text-3xl"></i> |
| | </div> |
| | <h3 class="font-semibold text-blue-900">Admissions</h3> |
| | <p class="text-sm text-gray-600 mt-1">Explore our programs and admission process</p> |
| | </a> |
| | <a href="#" class="bg-blue-50 hover:bg-blue-100 rounded-lg p-6 text-center transition-all duration-300 card-hover"> |
| | <div class="text-blue-700 mb-3"> |
| | <i class="fas fa-flask text-3xl"></i> |
| | </div> |
| | <h3 class="font-semibold text-blue-900">Research</h3> |
| | <p class="text-sm text-gray-600 mt-1">Cutting-edge research initiatives</p> |
| | </a> |
| | <a href="#" class="bg-blue-50 hover:bg-blue-100 rounded-lg p-6 text-center transition-all duration-300 card-hover"> |
| | <div class="text-blue-700 mb-3"> |
| | <i class="fas fa-briefcase text-3xl"></i> |
| | </div> |
| | <h3 class="font-semibold text-blue-900">Placements</h3> |
| | <p class="text-sm text-gray-600 mt-1">Career opportunities for students</p> |
| | </a> |
| | <a href="#" class="bg-blue-50 hover:bg-blue-100 rounded-lg p-6 text-center transition-all duration-300 card-hover"> |
| | <div class="text-blue-700 mb-3"> |
| | <i class="fas fa-calendar-alt text-3xl"></i> |
| | </div> |
| | <h3 class="font-semibold text-blue-900">Events</h3> |
| | <p class="text-sm text-gray-600 mt-1">Upcoming academic and cultural events</p> |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-gray-50 py-16"> |
| | <div class="container mx-auto px-4"> |
| | <div class="flex flex-col lg:flex-row items-center"> |
| | <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
| | <h2 class="text-3xl font-bold text-blue-900 mb-6">About <span class="text-blue-700">DTU</span></h2> |
| | <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> |
| | <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> |
| | <div class="flex flex-wrap gap-4"> |
| | <div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[150px]"> |
| | <div class="text-blue-700 text-2xl font-bold mb-1">50+</div> |
| | <div class="text-gray-600 text-sm">Years of Excellence</div> |
| | </div> |
| | <div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[150px]"> |
| | <div class="text-blue-700 text-2xl font-bold mb-1">10K+</div> |
| | <div class="text-gray-600 text-sm">Students</div> |
| | </div> |
| | <div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[150px]"> |
| | <div class="text-blue-700 text-2xl font-bold mb-1">500+</div> |
| | <div class="text-gray-600 text-sm">Faculty Members</div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="lg:w-1/2"> |
| | <div class="relative rounded-xl overflow-hidden shadow-lg"> |
| | <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"> |
| | <div class="absolute inset-0 bg-blue-900 opacity-20"></div> |
| | <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6"> |
| | <h3 class="text-white text-xl font-semibold">Our Campus</h3> |
| | <p class="text-gray-200">Spread over 164 acres with world-class infrastructure</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-white"> |
| | <div class="container mx-auto px-4"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-3xl font-bold text-blue-900 mb-4">Our <span class="text-blue-700">Departments</span></h2> |
| | <p class="text-gray-600 max-w-2xl mx-auto">DTU offers undergraduate, postgraduate and doctoral programs across various engineering and technology disciplines.</p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="p-6"> |
| | <div class="flex items-center mb-4"> |
| | <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"> |
| | <i class="fas fa-laptop-code"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-blue-900">Computer Engineering</h3> |
| | </div> |
| | <p class="text-gray-600 mb-4">Comprehensive program covering algorithms, systems, AI and software development.</p> |
| | <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| | Learn More <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="p-6"> |
| | <div class="flex items-center mb-4"> |
| | <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"> |
| | <i class="fas fa-bolt"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-blue-900">Electrical Engineering</h3> |
| | </div> |
| | <p class="text-gray-600 mb-4">Focus on power systems, electronics, control systems and renewable energy.</p> |
| | <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| | Learn More <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="p-6"> |
| | <div class="flex items-center mb-4"> |
| | <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"> |
| | <i class="fas fa-robot"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-blue-900">Mechanical Engineering</h3> |
| | </div> |
| | <p class="text-gray-600 mb-4">Covers design, manufacturing, thermal sciences and robotics.</p> |
| | <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| | Learn More <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="p-6"> |
| | <div class="flex items-center mb-4"> |
| | <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"> |
| | <i class="fas fa-atom"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-blue-900">Civil Engineering</h3> |
| | </div> |
| | <p class="text-gray-600 mb-4">Infrastructure development, construction technology and environmental engineering.</p> |
| | <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| | Learn More <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="p-6"> |
| | <div class="flex items-center mb-4"> |
| | <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"> |
| | <i class="fas fa-dna"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-blue-900">Biotechnology</h3> |
| | </div> |
| | <p class="text-gray-600 mb-4">Interdisciplinary program combining biology with engineering principles.</p> |
| | <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| | Learn More <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="p-6"> |
| | <div class="flex items-center mb-4"> |
| | <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"> |
| | <i class="fas fa-chart-line"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-blue-900">Management Studies</h3> |
| | </div> |
| | <p class="text-gray-600 mb-4">Business administration with focus on technology management.</p> |
| | <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| | Learn More <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="text-center mt-10"> |
| | <button class="bg-blue-700 hover:bg-blue-800 text-white px-6 py-3 rounded-md font-medium">View All Departments</button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-gray-50"> |
| | <div class="container mx-auto px-4"> |
| | <div class="flex flex-col lg:flex-row"> |
| | <div class="lg:w-1/2 lg:pr-8 mb-10 lg:mb-0"> |
| | <h2 class="text-3xl font-bold text-blue-900 mb-6">Latest <span class="text-blue-700">News</span></h2> |
| | |
| | <div class="space-y-6"> |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="p-6"> |
| | <div class="flex items-center mb-2"> |
| | <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Announcement</span> |
| | <span class="text-gray-500 text-sm ml-3">June 15, 2023</span> |
| | </div> |
| | <h3 class="text-xl font-semibold text-blue-900 mb-2">DTU partners with IIT Delhi for joint research initiative</h3> |
| | <p class="text-gray-600 mb-3">The collaboration will focus on artificial intelligence and sustainable energy solutions with funding of ₹5 crores.</p> |
| | <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| | Read More <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="p-6"> |
| | <div class="flex items-center mb-2"> |
| | <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">Achievement</span> |
| | <span class="text-gray-500 text-sm ml-3">June 10, 2023</span> |
| | </div> |
| | <h3 class="text-xl font-semibold text-blue-900 mb-2">DTU students win national robotics competition</h3> |
| | <p class="text-gray-600 mb-3">Team RoboDTU secured first position in the All India Technical Festival held at IIT Bombay.</p> |
| | <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> |
| | Read More <i class="fas fa-arrow-right ml-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6"> |
| | <button class="text-blue-700 hover:text-blue-900 font-medium flex items-center"> |
| | View All News <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="lg:w-1/2 lg:pl-8"> |
| | <h2 class="text-3xl font-bold text-blue-900 mb-6">Upcoming <span class="text-blue-700">Events</span></h2> |
| | |
| | <div class="space-y-6"> |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="flex"> |
| | <div class="bg-blue-700 text-white p-4 flex flex-col items-center justify-center min-w-[80px]"> |
| | <div class="text-2xl font-bold">25</div> |
| | <div class="text-sm">JUN</div> |
| | </div> |
| | <div class="p-4 flex-1"> |
| | <h3 class="text-xl font-semibold text-blue-900 mb-1">Annual Tech Fest - Techspardha</h3> |
| | <p class="text-gray-600 mb-2">Three-day technical festival featuring competitions, workshops and guest lectures.</p> |
| | <div class="flex items-center text-sm text-gray-500"> |
| | <i class="fas fa-clock mr-2"></i> |
| | <span>9:00 AM - 5:00 PM</span> |
| | <i class="fas fa-map-marker-alt ml-4 mr-2"></i> |
| | <span>Main Auditorium</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="flex"> |
| | <div class="bg-blue-700 text-white p-4 flex flex-col items-center justify-center min-w-[80px]"> |
| | <div class="text-2xl font-bold">05</div> |
| | <div class="text-sm">JUL</div> |
| | </div> |
| | <div class="p-4 flex-1"> |
| | <h3 class="text-xl font-semibold text-blue-900 mb-1">Placement Preparation Workshop</h3> |
| | <p class="text-gray-600 mb-2">Interactive sessions with industry experts on resume building and interview skills.</p> |
| | <div class="flex items-center text-sm text-gray-500"> |
| | <i class="fas fa-clock mr-2"></i> |
| | <span>2:00 PM - 4:00 PM</span> |
| | <i class="fas fa-map-marker-alt ml-4 mr-2"></i> |
| | <span>Career Development Center</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 card-hover"> |
| | <div class="flex"> |
| | <div class="bg-blue-700 text-white p-4 flex flex-col items-center justify-center min-w-[80px]"> |
| | <div class="text-2xl font-bold">15</div> |
| | <div class="text-sm">JUL</div> |
| | </div> |
| | <div class="p-4 flex-1"> |
| | <h3 class="text-xl font-semibold text-blue-900 mb-1">Alumni Meet 2023</h3> |
| | <p class="text-gray-600 mb-2">Reunion event for DTU alumni with networking opportunities and campus tour.</p> |
| | <div class="flex items-center text-sm text-gray-500"> |
| | <i class="fas fa-clock mr-2"></i> |
| | <span>10:00 AM - 8:00 PM</span> |
| | <i class="fas fa-map-marker-alt ml-4 mr-2"></i> |
| | <span>University Grounds</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6"> |
| | <button class="text-blue-700 hover:text-blue-900 font-medium flex items-center"> |
| | View All Events <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-white"> |
| | <div class="container mx-auto px-4"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-3xl font-bold text-blue-900 mb-4">What Our <span class="text-blue-700">Students Say</span></h2> |
| | <p class="text-gray-600 max-w-2xl mx-auto">Hear from our students about their experiences at DTU.</p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-yellow-400 text-xl mr-1"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | </div> |
| | </div> |
| | <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> |
| | <div class="flex items-center"> |
| | <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <h4 class="font-semibold text-blue-900">Priya Sharma</h4> |
| | <p class="text-sm text-gray-600">Computer Engineering, Batch of 2022</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-yellow-400 text-xl mr-1"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | </div> |
| | </div> |
| | <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> |
| | <div class="flex items-center"> |
| | <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <h4 class="font-semibold text-blue-900">Rahul Verma</h4> |
| | <p class="text-sm text-gray-600">Electrical Engineering, Batch of 2021</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 rounded-xl p-8 transition-all duration-300 card-hover"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-yellow-400 text-xl mr-1"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star-half-alt"></i> |
| | </div> |
| | </div> |
| | <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> |
| | <div class="flex items-center"> |
| | <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <h4 class="font-semibold text-blue-900">Ananya Patel</h4> |
| | <p class="text-sm text-gray-600">Mechanical Engineering, Batch of 2023</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-gray-100"> |
| | <div class="container mx-auto px-4"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-3xl font-bold text-blue-900 mb-4">Our <span class="text-blue-700">Placement Partners</span></h2> |
| | <p class="text-gray-600 max-w-2xl mx-auto">DTU students are placed in top companies across the globe.</p> |
| | </div> |
| | |
| | <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8"> |
| | <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg"> |
| | <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"> |
| | </div> |
| | <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg"> |
| | <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"> |
| | </div> |
| | <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg"> |
| | <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"> |
| | </div> |
| | <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg"> |
| | <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"> |
| | </div> |
| | <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg"> |
| | <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"> |
| | </div> |
| | <div class="bg-white p-6 rounded-lg flex items-center justify-center h-24 transition-all duration-300 hover:shadow-lg"> |
| | <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"> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-12 bg-blue-800 rounded-xl p-8 text-white"> |
| | <div class="flex flex-col lg:flex-row items-center"> |
| | <div class="lg:w-2/3 mb-6 lg:mb-0"> |
| | <h3 class="text-2xl font-bold mb-3">Placement Statistics 2023</h3> |
| | <p class="opacity-90">DTU continues its legacy of excellent placement records with top companies offering competitive packages.</p> |
| | </div> |
| | <div class="lg:w-1/3"> |
| | <div class="grid grid-cols-3 gap-4 text-center"> |
| | <div> |
| | <div class="text-3xl font-bold">95%</div> |
| | <div class="text-sm opacity-80">Placement Rate</div> |
| | </div> |
| | <div> |
| | <div class="text-3xl font-bold">₹28L</div> |
| | <div class="text-sm opacity-80">Highest Package</div> |
| | </div> |
| | <div> |
| | <div class="text-3xl font-bold">₹12L</div> |
| | <div class="text-sm opacity-80">Average Package</div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-white"> |
| | <div class="container mx-auto px-4"> |
| | <div class="flex flex-col lg:flex-row"> |
| | <div class="lg:w-1/2 lg:pr-12 mb-10 lg:mb-0"> |
| | <h2 class="text-3xl font-bold text-blue-900 mb-6">Contact <span class="text-blue-700">Us</span></h2> |
| | <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> |
| | |
| | <div class="space-y-6"> |
| | <div class="flex items-start"> |
| | <div class="bg-blue-100 text-blue-700 p-3 rounded-full mr-4"> |
| | <i class="fas fa-map-marker-alt"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-blue-900 mb-1">Address</h4> |
| | <p class="text-gray-600">Delhi Technological University<br>Shahbad Daulatpur, Main Bawana Road<br>Delhi - 110042, India</p> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="bg-blue-100 text-blue-700 p-3 rounded-full mr-4"> |
| | <i class="fas fa-phone-alt"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-blue-900 mb-1">Phone</h4> |
| | <p class="text-gray-600">+91 11 2787 1001<br>Admissions Helpline: +91 11 2787 1010</p> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="bg-blue-100 text-blue-700 p-3 rounded-full mr-4"> |
| | <i class="fas fa-envelope"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-semibold text-blue-900 mb-1">Email</h4> |
| | <p class="text-gray-600">info@dtu.ac.in<br>admissions@dtu.ac.in</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-8"> |
| | <h4 class="font-semibold text-blue-900 mb-4">Follow Us</h4> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center"> |
| | <i class="fab fa-facebook-f"></i> |
| | </a> |
| | <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center"> |
| | <i class="fab fa-linkedin-in"></i> |
| | </a> |
| | <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center"> |
| | <i class="fab fa-instagram"></i> |
| | </a> |
| | <a href="#" class="bg-blue-100 text-blue-700 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center"> |
| | <i class="fab fa-youtube"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="lg:w-1/2"> |
| | <div class="bg-gray-50 rounded-xl p-8"> |
| | <h3 class="text-xl font-semibold text-blue-900 mb-6">Send us a Message</h3> |
| | <form> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
| | <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"> |
| | </div> |
| | <div> |
| | <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
| | <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"> |
| | </div> |
| | <div> |
| | <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> |
| | <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"> |
| | </div> |
| | <div> |
| | <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> |
| | <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| | <option>Admissions</option> |
| | <option>Academics</option> |
| | <option>Placements</option> |
| | <option>Research</option> |
| | <option>Other</option> |
| | </select> |
| | </div> |
| | </div> |
| | <div class="mt-6"> |
| | <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
| | <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> |
| | </div> |
| | <div class="mt-6"> |
| | <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> |
| | </div> |
| | </form> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-gray-100 py-12"> |
| | <div class="container mx-auto px-4"> |
| | <div class="bg-white rounded-xl overflow-hidden shadow-lg"> |
| | <div class="flex flex-col lg:flex-row"> |
| | <div class="lg:w-1/2 p-8"> |
| | <h2 class="text-2xl font-bold text-blue-900 mb-6">Campus <span class="text-blue-700">Map</span></h2> |
| | <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> |
| | |
| | <div class="grid grid-cols-2 gap-4"> |
| | <div class="flex items-center"> |
| | <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3"> |
| | <i class="fas fa-graduation-cap"></i> |
| | </div> |
| | <span class="text-sm font-medium">Academic Blocks</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3"> |
| | <i class="fas fa-flask"></i> |
| | </div> |
| | <span class="text-sm font-medium">Research Centers</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3"> |
| | <i class="fas fa-home"></i> |
| | </div> |
| | <span class="text-sm font-medium">Hostels</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3"> |
| | <i class="fas fa-utensils"></i> |
| | </div> |
| | <span class="text-sm font-medium">Cafeteria</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3"> |
| | <i class="fas fa-book"></i> |
| | </div> |
| | <span class="text-sm font-medium">Library</span> |
| | </div> |
| | <div class="flex items-center"> |
| | <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3"> |
| | <i class="fas fa-running"></i> |
| | </div> |
| | <span class="text-sm font-medium">Sports Complex</span> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-8"> |
| | <button class="bg-blue-700 hover:bg-blue-800 text-white px-6 py-3 rounded-md font-medium">Download Campus Map</button> |
| | </div> |
| | </div> |
| | <div class="lg:w-1/2"> |
| | <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"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-blue-900 text-white pt-16 pb-8"> |
| | <div class="container mx-auto px-4"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> |
| | |
| | <div> |
| | <h3 class="text-xl font-semibold mb-4">About DTU</h3> |
| | <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> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="text-blue-200 hover:text-white"> |
| | <i class="fab fa-facebook-f"></i> |
| | </a> |
| | <a href="#" class="text-blue-200 hover:text-white"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | <a href="#" class="text-blue-200 hover:text-white"> |
| | <i class="fab fa-linkedin-in"></i> |
| | </a> |
| | <a href="#" class="text-blue-200 hover:text-white"> |
| | <i class="fab fa-instagram"></i> |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div> |
| | <h3 class="text-xl font-semibold mb-4">Quick Links</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-blue-200 hover:text-white">Home</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">About Us</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">Academics</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">Admissions</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">Research</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">Placements</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">Contact Us</a></li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div> |
| | <h3 class="text-xl font-semibold mb-4">Important Links</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="text-blue-200 hover:text-white">AICTE</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">UGC</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">NIRF</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">DTE Delhi</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">Alumni Portal</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">Careers</a></li> |
| | <li><a href="#" class="text-blue-200 hover:text-white">Sitemap</a></li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div> |
| | <h3 class="text-xl font-semibold mb-4">Newsletter</h3> |
| | <p class="text-blue-200 mb-4">Subscribe to our newsletter to receive updates on news and events.</p> |
| | <form class="flex"> |
| | <input type="email" placeholder="Your Email" class="px-4 py-2 rounded-l-md w-full text-gray-800"> |
| | <button type="submit" class="bg-blue-700 hover:bg-blue-800 px-4 py-2 rounded-r-md"> |
| | <i class="fas fa-paper-plane"></i> |
| | </button> |
| | </form> |
| | </div> |
| | </div> |
| | |
| | <div class="border-t border-blue-800 pt-8"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="mb-4 md:mb-0"> |
| | <p class="text-blue-300">© 2023 Delhi Technological University. All Rights Reserved.</p> |
| | </div> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-blue-300 hover:text-white">Privacy Policy</a> |
| | <a href="#" class="text-blue-300 hover:text-white">Terms of Service</a> |
| | <a href="#" class="text-blue-300 hover:text-white">Accessibility</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | |
| | <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"> |
| | <i class="fas fa-arrow-up"></i> |
| | </button> |
| |
|
| | <script> |
| | |
| | const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| | const mobileMenu = document.getElementById('mobile-menu'); |
| | |
| | mobileMenuButton.addEventListener('click', () => { |
| | mobileMenu.classList.toggle('hidden'); |
| | }); |
| | |
| | |
| | const backToTopButton = document.getElementById('back-to-top'); |
| | |
| | window.addEventListener('scroll', () => { |
| | if (window.pageYOffset > 300) { |
| | backToTopButton.classList.remove('hidden'); |
| | } else { |
| | backToTopButton.classList.add('hidden'); |
| | } |
| | }); |
| | |
| | backToTopButton.addEventListener('click', () => { |
| | window.scrollTo({ top: 0, behavior: 'smooth' }); |
| | }); |
| | |
| | |
| | const cards = document.querySelectorAll('.card-hover'); |
| | |
| | cards.forEach(card => { |
| | card.addEventListener('mouseenter', () => { |
| | card.style.transition = 'all 0.3s ease'; |
| | }); |
| | |
| | card.addEventListener('mouseleave', () => { |
| | card.style.transition = 'all 0.3s ease'; |
| | }); |
| | }); |
| | |
| | |
| | const departmentIcons = document.querySelectorAll('.department-icon'); |
| | |
| | departmentIcons.forEach(icon => { |
| | icon.addEventListener('mouseenter', () => { |
| | icon.style.transition = 'all 0.5s ease'; |
| | }); |
| | |
| | icon.addEventListener('mouseleave', () => { |
| | icon.style.transition = 'all 0.5s ease'; |
| | }); |
| | }); |
| | </script> |
| | <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> |
| | </html> |
