Spaces:

trishaeesha
/

quantumlink-qrizer

Running

App Files Files Community

trishaeesha commited on Oct 18, 2025

Commit

b6af923

verified ·

1 Parent(s): a7e1793

create a webpage for tamil culture

Browse files

Files changed (2) hide show

index.html +13 -10
tamilculture.html +225 -0

index.html CHANGED Viewed

@@ -196,16 +196,19 @@
     </div>
     <footer class="text-center py-6 text-gray-400 text-sm mt-12 relative z-10">
         <div class="flex justify-center space-x-6 mb-2">
-            <a href="#" class="text-cyan-300 hover:text-cyan-200 transition-colors">
-                <i data-feather="github"></i>
-            </a>
-            <a href="#" class="text-purple-300 hover:text-purple-200 transition-colors">
-                <i data-feather="twitter"></i>
-            </a>
-            <a href="#" class="text-pink-300 hover:text-pink-200 transition-colors">
-                <i data-feather="linkedin"></i>
-            </a>
-        </div>
         <p class="tracking-wider">POWERED BY <span class="text-cyan-300">QUANTUM MATRIX</span> TECHNOLOGY © 2023</p>
         <p class="mt-1 tracking-wider">SCAN THE <span class="text-purple-300">FUTURE</span> TODAY</p>
     </footer>

     </div>
     <footer class="text-center py-6 text-gray-400 text-sm mt-12 relative z-10">
         <div class="flex justify-center space-x-6 mb-2">
+                        <a href="#" class="text-cyan-300 hover:text-cyan-200 transition-colors">
+                            <i data-feather="github"></i>
+                        </a>
+                        <a href="#" class="text-purple-300 hover:text-purple-200 transition-colors">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="text-pink-300 hover:text-pink-200 transition-colors">
+                            <i data-feather="linkedin"></i>
+                        </a>
+                        <a href="tamilculture.html" class="text-yellow-300 hover:text-yellow-200 transition-colors">
+                            <i data-feather="globe"></i>
+                        </a>
+</div>
         <p class="tracking-wider">POWERED BY <span class="text-cyan-300">QUANTUM MATRIX</span> TECHNOLOGY © 2023</p>
         <p class="mt-1 tracking-wider">SCAN THE <span class="text-purple-300">FUTURE</span> TODAY</p>
     </footer>

tamilculture.html ADDED Viewed

	@@ -0,0 +1,225 @@

+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tamil Culture Heritage</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --tamil-red: #b71c1c;
+            --tamil-gold: #ffd700;
+            --tamil-black: #000000;
+        }
+        body {
+            font-family: 'Noto Sans Tamil', sans-serif;
+            background-color: #f5f5f0;
+            color: #333;
+        }
+        .tamil-title {
+            font-family: 'Noto Sans Tamil', sans-serif;
+            font-weight: 700;
+        }
+        .heritage-card {
+            transition: all 0.3s ease;
+            border: 2px solid var(--tamil-gold);
+            background-color: white;
+        }
+        .heritage-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        .nav-item {
+            position: relative;
+        }
+        .nav-item::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background-color: var(--tamil-red);
+            transition: width 0.3s;
+        }
+        .nav-item:hover::after {
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <header class="bg-gradient-to-b from-red-900 to-red-700 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <div>
+                    <h1 class="text-4xl font-bold tamil-title">
+                        <span class="text-yellow-400">தமிழ்</span> <span class="text-white">பண்பாடு</span>
+                    </h1>
+                    <p class="mt-2 text-yellow-200">5000+ Years of Cultural Heritage</p>
+                </div>
+                <nav class="hidden md:block">
+                    <ul class="flex space-x-8">
+                        <li class="nav-item"><a href="#history" class="text-white hover:text-yellow-300">வரலாறு</a></li>
+                        <li class="nav-item"><a href="#arts" class="text-white hover:text-yellow-300">கலைகள்</a></li>
+                        <li class="nav-item"><a href="#literature" class="text-white hover:text-yellow-300">இலக்கியம்</a></li>
+                        <li class="nav-item"><a href="#festivals" class="text-white hover:text-yellow-300">திருவிழாக்கள்</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 py-12">
+        <!-- Hero Section -->
+        <section class="mb-16">
+            <div class="bg-white rounded-xl shadow-xl overflow-hidden">
+                <div class="md:flex">
+                    <div class="md:w-1/2 p-8 md:p-12">
+                        <h2 class="text-3xl font-bold mb-4 text-red-800 tamil-title">தமிழர் பண்பாடு</h2>
+                        <p class="text-lg mb-6">உலகின் பழமையான நாகரிகங்களில் ஒன்றான தமிழர் பண்பாடு, அதன் வளமான இலக்கியம், இசை, நடனம், கலை மற்றும் கட்டிடக்கலைக்கு பெயர் பெற்றது.</p>
+                        <a href="#explore" class="inline-block bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300">அறிந்து கொள்ளுங்கள்</a>
+                    </div>
+                    <div class="md:w-1/2">
+                        <img src="http://static.photos/culture/1200x630/101" alt="Tamil Culture" class="w-full h-full object-cover">
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- History Section -->
+        <section id="history" class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center text-red-800 tamil-title border-b-2 border-red-800 pb-2">வரலாறு</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="heritage-card rounded-lg overflow-hidden">
+                    <img src="http://static.photos/history/640x360/201" alt="Sangam Period" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-red-700">சங்ககாலம்</h3>
+                        <p>கி.மு. 300 முதல் கி.பி. 300 வரையிலான காலகட்டம். இக்காலத்தில் தமிழ் இலக்கியம் மிகுந்த வளர்ச்சியடைந்தது.</p>
+                    </div>
+                </div>
+                <div class="heritage-card rounded-lg overflow-hidden">
+                    <img src="http://static.photos/architecture/640x360/301" alt="Chola Empire" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-red-700">சோழர் பேரரசு</h3>
+                        <p>9-13ஆம் நூற்றாண்டுகளில் தமிழகத்தை ஆண்ட சோழர்கள் கட்டிய தில்லி திருக்கோவில்கள் உலகப் பாரம்பரியங்களாகும்.</p>
+                    </div>
+                </div>
+                <div class="heritage-card rounded-lg overflow-hidden">
+                    <img src="http://static.photos/people/640x360/401" alt="Modern Era" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-red-700">நவீன யுகம்</h3>
+                        <p>20ஆம் நூற்றாண்டில் தமிழ் இலக்கியம், திரைப்படம் மற்றும் இசையில் புதிய முன்னேற்றங்கள் கண்டது.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Arts Section -->
+        <section id="arts" class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center text-red-800 tamil-title border-b-2 border-red-800 pb-2">கலைகள்</h2>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="bg-white p-8 rounded-xl shadow-md">
+                    <h3 class="text-2xl font-bold mb-4 text-red-700">பரதநாட்டியம்</h3>
+                    <img src="http://static.photos/dance/640x360/501" alt="Bharatanatyam" class="w-full h-64 object-cover rounded-lg mb-4">
+                    <p>2000 ஆண்டுகளுக்கு முந்தைய இந்த பாரம்பரிய நடனம் தமிழ்நாட்டில் தோன்றியது. இது கதைகளை சொல்லும் கலையாகும்.</p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-md">
+                    <h3 class="text-2xl font-bold mb-4 text-red-700">தமிழ் இசை</h3>
+                    <img src="http://static.photos/music/640x360/601" alt="Tamil Music" class="w-full h-64 object-cover rounded-lg mb-4">
+                    <p>தமிழ் இசையானது கருநாடக இசையின் அடிப்படையாகும். தியாகராஜர், முத்துசாமி தீட்சிதர் போன்றவர்கள் தமிழ்நாட்டைச் சேர்ந்தவர்கள்.</p>
+                </div>
+            </div>
+        </section>
+        <!-- Literature Section -->
+        <section id="literature" class="mb-16">
+            <h2 class="text-3xl font-bold mb-8 text-center text-red-800 tamil-title border-b-2 border-red-800 pb-2">இலக்கியம்</h2>
+            <div class="bg-white p-8 rounded-xl shadow-md">
+                <div class="grid md:grid-cols-2 gap-8 items-center">
+                    <div>
+                        <h3 class="text-2xl font-bold mb-4 text-red-700">சங்க இலக்கியம்</h3>
+                        <p class="mb-4">சங்கம் என்பது பழந்தமிழ்ப் புலவர்களின் சங்கங்களாகும். எட்டுத்தொகை, பத்துப்பாட்டு போன்ற நூல்கள் இக்காலத்தில் எழுந்தவை.</p>
+                        <ul class="list-disc pl-5">
+                            <li class="mb-2">திருக்குறள் - திருவள்ளுவர்</li>
+                            <li class="mb-2">சிலப்பதிகாரம் - இளங்கோ அடிகள்</li>
+                            <li class="mb-2">மணிமேகலை - சீத்தலை சாத்தனார்</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <img src="http://static.photos/books/640x360/701" alt="Tamil Literature" class="w-full rounded-lg">
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Festivals Section -->
+        <section id="festivals">
+            <h2 class="text-3xl font-bold mb-8 text-center text-red-800 tamil-title border-b-2 border-red-800 pb-2">திருவிழ��க்கள்</h2>
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="bg-white p-6 rounded-lg shadow-md text-center">
+                    <div class="bg-red-100 p-4 rounded-full inline-block mb-4">
+                        <i data-feather="sun" class="w-8 h-8 text-red-700"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2 text-red-700">பொங்கல்</h3>
+                    <p>தமிழர்களின் முக்கியமான விவசாயத் திருவிழா. சூரியன் வடக்கு நோக்கி செல்லும் தை மாதத்தில் கொண்டாடப்படுகிறது.</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md text-center">
+                    <div class="bg-red-100 p-4 rounded-full inline-block mb-4">
+                        <i data-feather="clock" class="w-8 h-8 text-red-700"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2 text-red-700">தீபாவளி</h3>
+                    <p>இருளை வெளியோட்டும் விழாவாக தீபாவளி கொண்டாடப்படுகிறது. இது நல்லது வெல்லும் என்ற நம்பிக்கையை வெளிப்படுத்துகிறது.</p>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md text-center">
+                    <div class="bg-red-100 p-4 rounded-full inline-block mb-4">
+                        <i data-feather="anchor" class="w-8 h-8 text-red-700"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2 text-red-700">நவராத்திரி</h3>
+                    <p>நவராத்திரி ஒன்பது இரவுகள் மற்றும் பத்தாவது நாள் விஜயதசமி கொண்டாடப்படுகிறது. துர்கா தேவியை வணங்கும் விழா.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="bg-red-900 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <h3 class="text-xl font-bold tamil-title mb-2">தமிழ் பண்பாடு</h3>
+                    <p>5000+ ஆண்டுகளின் பாரம்பரியம்</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-white hover:text-yellow-300">
+                        <i data-feather="facebook"></i>
+                    </a>
+                    <a href="#" class="text-white hover:text-yellow-300">
+                        <i data-feather="twitter"></i>
+                    </a>
+                    <a href="#" class="text-white hover:text-yellow-300">
+                        <i data-feather="instagram"></i>
+                    </a>
+                    <a href="#" class="text-white hover:text-yellow-300">
+                        <i data-feather="youtube"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-red-700 mt-6 pt-6 text-center">
+                <p>&copy; 2023 தமிழ் பண்பாடு - அனைத்து உரிமைகளும் பாதுகாக்கப்பட்டவை</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>