|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Indian National Centre for Ocean Information Services (INCOIS)</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); |
|
|
} |
|
|
.service-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.marquee { |
|
|
animation: scroll 20s linear infinite; |
|
|
} |
|
|
@keyframes scroll { |
|
|
0% { transform: translateX(0); } |
|
|
100% { transform: translateX(-50%); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div class="bg-blue-900 text-white py-2 px-4"> |
|
|
<div class="container mx-auto flex flex-wrap justify-between items-center"> |
|
|
<div class="text-sm"> |
|
|
भारतीय राष्ट्रीय महासागर सूचना सेवा केन्द्र (पृथ्वी विज्ञान मंत्रालय, भारत सरकार के अधीन एक स्वायत्त निकाय) |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm">A+</span> |
|
|
<span class="text-sm">A</span> |
|
|
<span class="text-sm">A-</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<a href="#"><i data-feather="facebook" class="w-4 h-4"></i></a> |
|
|
<a href="#"><i data-feather="twitter" class="w-4 h-4"></i></a> |
|
|
<a href="#"><i data-feather="youtube" class="w-4 h-4"></i></a> |
|
|
<a href="#"><i data-feather="linkedin" class="w-4 h-4"></i></a> |
|
|
<a href="#"><i data-feather="instagram" class="w-4 h-4"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-4 flex flex-col md:flex-row items-center justify-between"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<img src="https://incois.gov.in/site/assets/images/logo.svg" alt="INCOIS Logo" class="h-16"> |
|
|
<div class="ml-4"> |
|
|
<h1 class="text-xl font-bold text-blue-900">Indian National Centre for Ocean Information Services</h1> |
|
|
<p class="text-sm text-gray-600">Ministry of Earth Sciences, Government of India</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">Login</a> |
|
|
<button class="md:hidden"> |
|
|
<i data-feather="menu" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<nav class="bg-blue-800 text-white hidden md:block"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<ul class="flex flex-wrap"> |
|
|
<li class="hover:bg-blue-700 px-4 py-3"><a href="#" class="flex items-center"><i data-feather="home" class="mr-2 w-4 h-4"></i> Home</a></li> |
|
|
<li class="group relative hover:bg-blue-700 px-4 py-3"> |
|
|
<a href="#" class="flex items-center">About Us <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i></a> |
|
|
<div class="absolute left-0 mt-0 w-64 bg-white text-gray-800 shadow-lg rounded-b z-10 hidden group-hover:block"> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">About INCOIS</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Vision / Mission</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Our Minister</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Our Secretary</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Our Director</a> |
|
|
</div> |
|
|
</li> |
|
|
<li class="group relative hover:bg-blue-700 px-4 py-3"> |
|
|
<a href="#" class="flex items-center">Services <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i></a> |
|
|
<div class="absolute left-0 mt-0 w-64 bg-white text-gray-800 shadow-lg rounded-b z-10 hidden group-hover:block"> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Ecosystem Services</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Multi-Hazard Services</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Forecast / Nowcast Services</a> |
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Climate Services</a> |
|
|
</div> |
|
|
</li> |
|
|
<li class="hover:bg-blue-700 px-4 py-3"><a href="#">Ocean Observations & Data</a></li> |
|
|
<li class="hover:bg-blue-700 px-4 py-3"><a href="#">Applied Research</a></li> |
|
|
<li class="hover:bg-blue-700 px-4 py-3"><a href="#">Missions</a></li> |
|
|
<li class="hover:bg-blue-700 px-4 py-3"><a href="#">ITCOocean</a></li> |
|
|
<li class="hover:bg-blue-700 px-4 py-3"><a href="#">Contact Us</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="relative h-96 overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-black opacity-40"></div> |
|
|
<img src="http://static.photos/nature/1200x630/42" alt="Ocean" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-center px-4"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Advancing Ocean Science for a Sustainable Future</h1> |
|
|
<p class="text-xl text-white mb-6">Providing ocean information services for the safety of life and property at sea</p> |
|
|
<button class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">Explore Our Services</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-blue-50 py-6"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex items-center"> |
|
|
<i data-feather="alert-triangle" class="text-red-500 mr-3 w-6 h-6"></i> |
|
|
<span>Tsunami Warning</span> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex items-center"> |
|
|
<i data-feather="wind" class="text-blue-500 mr-3 w-6 h-6"></i> |
|
|
<span>Cyclone Alerts</span> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex items-center"> |
|
|
<i data-feather="waves" class="text-green-500 mr-3 w-6 h-6"></i> |
|
|
<span>High Wave Alerts</span> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex items-center"> |
|
|
<i data-feather="map" class="text-yellow-500 mr-3 w-6 h-6"></i> |
|
|
<span>Potential Fishing Zones</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-blue-900 mb-12">Our Services</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> |
|
|
<div class="gradient-bg p-6 text-white"> |
|
|
<i data-feather="anchor" class="w-10 h-10 mb-4"></i> |
|
|
<h3 class="text-xl font-bold">Ecosystem Services</h3> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<p class="text-gray-600 mb-4">Providing potential fishing zone advisories, coral bleaching alerts, and other marine ecosystem services.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:underline">Learn More →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> |
|
|
<div class="gradient-bg p-6 text-white"> |
|
|
<i data-feather="alert-octagon" class="w-10 h-10 mb-4"></i> |
|
|
<h3 class="text-xl font-bold">Multi-Hazard Services</h3> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<p class="text-gray-600 mb-4">Early warnings for tsunamis, storm surges, high waves, and other ocean-related hazards.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:underline">Learn More →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> |
|
|
<div class="gradient-bg p-6 text-white"> |
|
|
<i data-feather="cloud-rain" class="w-10 h-10 mb-4"></i> |
|
|
<h3 class="text-xl font-bold">Forecast Services</h3> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<p class="text-gray-600 mb-4">Ocean state forecasts, predicted astronomical tides, and location-specific forecasts.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:underline">Learn More →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-blue-900 mb-8">Latest Updates</h2> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3"> |
|
|
|
|
|
<div class="border-b md:border-b-0 md:border-r border-gray-200 p-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-red-100 p-3 rounded-full mr-4"> |
|
|
<i data-feather="alert-triangle" class="text-red-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg mb-2">Earthquake/Tsunami Bulletin</h3> |
|
|
<p class="text-gray-600 mb-3">Latest updates on seismic activity and tsunami warnings.</p> |
|
|
<a href="#" class="text-blue-600 text-sm font-medium hover:underline">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-b md:border-b-0 md:border-r border-gray-200 p-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i data-feather="wind" class="text-blue-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg mb-2">High Wave Alerts</h3> |
|
|
<p class="text-gray-600 mb-3">Current high wave and swell surge warnings for coastal areas.</p> |
|
|
<a href="#" class="text-blue-600 text-sm font-medium hover:underline">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-yellow-100 p-3 rounded-full mr-4"> |
|
|
<i data-feather="sun" class="text-yellow-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg mb-2">ENSO Bulletin</h3> |
|
|
<p class="text-gray-600 mb-3">Latest El Niño-Southern Oscillation updates and forecasts.</p> |
|
|
<a href="#" class="text-blue-600 text-sm font-medium hover:underline">View Details</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-between mb-8"> |
|
|
<h2 class="text-3xl font-bold text-blue-900">News & Events</h2> |
|
|
<a href="#" class="text-blue-600 font-medium hover:underline mt-4 md:mt-0">View All News →</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition"> |
|
|
<img src="http://static.photos/nature/640x360/1" alt="News" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<div class="text-sm text-blue-600 mb-2">June 15, 2025</div> |
|
|
<h3 class="font-bold text-xl mb-3">INCOIS Conducts Underwater Clean-Up at Palk Bay</h3> |
|
|
<p class="text-gray-600 mb-4">As part of Swachh Sagar Surakshit Sagar & Swachhata Hi Seva2025 to safeguard coral reefs and seagrass habitats.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:underline">Read More →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition"> |
|
|
<img src="http://static.photos/nature/640x360/2" alt="News" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<div class="text-sm text-blue-600 mb-2">June 12, 2025</div> |
|
|
<h3 class="font-bold text-xl mb-3">Clean-Up Drive at Pedda Jaalaripet Beach, Vizag</h3> |
|
|
<p class="text-gray-600 mb-4">INCOIS organizes special clean-up drive ahead of International Coastal Clean-Up Day 2025.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:underline">Read More →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition"> |
|
|
<img src="http://static.photos/nature/640x360/3" alt="Event" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<div class="text-sm text-blue-600 mb-2">Upcoming Event</div> |
|
|
<h3 class="font-bold text-xl mb-3">FIGA-2025 Conference</h3> |
|
|
<p class="text-gray-600 mb-4">Call for Abstract Submission is open now for the First International Conference on Fisheries and Aquaculture.</p> |
|
|
<a href="#" class="text-blue-600 font-medium hover:underline">Register Now →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-blue-900 mb-12">MoES Organizations</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
|
|
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex flex-col items-center"> |
|
|
<img src="https://incois.gov.in/site/theme/images/moes-organization/10.svg" alt="MoES" class="h-16 mb-2"> |
|
|
<span class="text-sm text-center">Ministry of Earth Sciences</span> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex flex-col items-center"> |
|
|
<img src="https://incois.gov.in/site/theme/images/moes-organization/1.svg" alt="NIOT" class="h-16 mb-2"> |
|
|
<span class="text-sm text-center">National Institute of Ocean Technology</span> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex flex-col items-center"> |
|
|
<img src="https://incois.gov.in/site/theme/images/moes-organization/9.svg" alt="IMD" class="h-16 mb-2"> |
|
|
<span class="text-sm text-center">India Meteorological Department</span> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex flex-col items-center"> |
|
|
<img src="https://incois.gov.in/site/theme/images/moes-organization/8.svg" alt="NCPOR" class="h-16 mb-2"> |
|
|
<span class="text-sm text-center">National Centre for Polar and Ocean Research</span> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex flex-col items-center"> |
|
|
<img src="https://incois.gov.in/site/theme/images/moes-organization/6.svg" alt="NCMRWF" class="h-16 mb-2"> |
|
|
<span class="text-sm text-center">National Centre For Medium Range Weather Forecasting</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-blue-900 text-white pt-12 pb-6"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">INCOIS</h3> |
|
|
<p class="mb-4">Indian National Centre for Ocean Information Services (An Autonomous Body under the Ministry of Earth Sciences, Govt. of India)</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#"><i data-feather="facebook" class="w-5 h-5"></i></a> |
|
|
<a href="#"><i data-feather="twitter" class="w-5 h-5"></i></a> |
|
|
<a href="#"><i data-feather="youtube" class="w-5 h-5"></i></a> |
|
|
<a href="#"><i data-feather="linkedin" class="w-5 h-5"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:underline">RTI</a></li> |
|
|
<li><a href="#" class="hover:underline">Tenders</a></li> |
|
|
<li><a href="#" class="hover:underline">Vacancies</a></li> |
|
|
<li><a href="#" class="hover:underline">Sitemap</a></li> |
|
|
<li><a href="#" class="hover:underline">Disclaimer</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Services</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:underline">Ecosystem Services</a></li> |
|
|
<li><a href="#" class="hover:underline">Multi-Hazard Services</a></li> |
|
|
<li><a href="#" class="hover:underline">Forecast Services</a></li> |
|
|
<li><a href="#" class="hover:underline">Climate Services</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Contact Us</h3> |
|
|
<address class="not-italic"> |
|
|
<p class="mb-2">"Ocean Valley", Pragathi Nagar (BO)</p> |
|
|
<p class="mb-2">Nizampet (SO), Hyderabad - 500 090</p> |
|
|
<p class="mb-2">Telangana, India</p> |
|
|
<p class="mb-2">Phone: +91-40-23895000</p> |
|
|
<p>Email: info@incois.gov.in</p> |
|
|
</address> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-blue-800 pt-6 text-center text-sm"> |
|
|
<p>© 2025 Indian National Centre for Ocean Information Services. All Rights Reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init(); |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
