diff --git a/Domains/Frontend/MiniProjects/ExploreNashik/README.md b/Domains/Frontend/MiniProjects/ExploreNashik/README.md new file mode 100644 index 00000000..065cfb40 --- /dev/null +++ b/Domains/Frontend/MiniProjects/ExploreNashik/README.md @@ -0,0 +1,60 @@ +# 🌟 Explore Nashik - Static Website + +**Contributor:** [Tanmay-Kad](https://github.com/Tanmay-Kad) + +This project is a **simple, responsive, single-page static website** about Nashik District, famously known as the *"Wine Capital of India."* + +--- + +## 📝 Description + +The website provides an overview of Nashik, highlighting its importance, history, and key attractions. It is built as a **single-page application** with smooth scrolling navigation between sections. + +--- + +## 🚀 Features + +- **Header & Navigation:** A sticky navigation bar that highlights the active section on scroll. +- **Mobile Responsive:** A fully responsive design with a collapsible mobile menu. + +### Sections: + +1. **Home:** A full-screen hero section with a background image. +2. **About:** A brief introduction to Nashik's history, geography (Godavari River), and cultural importance (Kumbh Mela). +3. **Tourist Attractions:** A card-based layout showcasing 6 popular destinations (Trimbakeshwar, Sula Vineyards, Pandav Leni, etc.). +4. **Festivals & Culture:** Information on local festivals, food, and culture. +5. **Gallery:** A responsive image grid. +6. **Contact:** A simple, styled HTML contact form. +7. **Back to Top:** A JavaScript-powered "Back to Top" button that appears on scroll. + +--- + +## 🛠️ Technologies Used + +- **HTML5:** For the core structure and content. +- **Tailwind CSS (CDN):** For all styling and layout, ensuring a modern, utility-first, and responsive design. +- **JavaScript (ES6+):** For all interactivity, including: + - Mobile menu toggle + - "Back to Top" button visibility and smooth scroll + - Active navigation link highlighting based on scroll position (using `IntersectionObserver`) + +--- + +## 💻 How to Use + +### 1. Single-File Version + +If you are using the single `index.html` file (where CSS and JS are embedded): + +- Simply open the `index.html` file in any modern web browser. + +### 2. Multi-File Version (index.html, style.css, script.js) + +If you are using the split files: + +1. Ensure all three files (`index.html`, `style.css`, and `script.js`) are in the same directory. +2. Open the `index.html` file in any modern web browser. + +--- + + diff --git a/Domains/Frontend/MiniProjects/ExploreNashik/index.html b/Domains/Frontend/MiniProjects/ExploreNashik/index.html new file mode 100644 index 00000000..e8923a7b --- /dev/null +++ b/Domains/Frontend/MiniProjects/ExploreNashik/index.html @@ -0,0 +1,288 @@ + + + + + + Explore Nashik – The Wine Capital of India + + + + + + + + + + + +
+ + + +
+ +
+ +
+
+ Hero image of Sula Vineyards in Nashik +
+
+ +
+

+ Explore Nashik +

+

+ Where Culture Meets Nature +

+ + Discover More + +
+
+ +
+
+

About Nashik

+
+
+

+ Nashik, located in the northwest region of Maharashtra, India, is a city steeped in history and mythology. It is famously known as the "Wine Capital of India" due to the presence of numerous vineyards and wineries, including the renowned Sula Vineyards. +

+

+ The city is situated on the banks of the sacred Godavari River, which originates from Trimbakeshwar, nearby. Nashik holds immense religious significance as it is one of the four locations where the Kumbh Mela, a mass Hindu pilgrimage, is held every 12 years. +

+

+ Its history is deeply connected to the epic Ramayana, with sites like Panchavati believed to be the place where Lord Rama, Sita, and Lakshmana spent their exile. Today, Nashik is a vibrant blend of ancient tradition and modern development, balancing its spiritual heritage with a booming agricultural and industrial economy, especially known for its grapes and onions. +

+
+
+ View of the Godavari River Ghat in Nashik +
+
+
+
+ +
+
+

Tourist Attractions

+
+ +
+ Trimbakeshwar Temple +
+

Trimbakeshwar Temple

+

An ancient Hindu temple and one of the twelve Jyotirlingas, located at the source of the Godavari River.

+
+
+ +
+ Sula Vineyards +
+

Sula Vineyards

+

India's most famous winery, offering wine-tasting tours and a beautiful view of the surrounding vineyards.

+
+
+ +
+ Pandav Leni Caves +
+

Pandav Leni Caves

+

A group of 24 rock-cut Buddhist caves dating back to the 1st century BCE, offering panoramic city views.

+
+
+ +
+ Anjaneri Hills +
+

Anjaneri Hills

+

Believed to be the birthplace of Lord Hanuman, this spot is a popular trekking destination with stunning views.

+
+
+ +
+ Muktidham Temple +
+

Muktidham Temple

+

A unique temple made of pure white marble, featuring replicas of all 12 Jyotirlingas and verses from the Gita.

+
+
+ +
+ Kalaram Temple +
+

Kalaram Temple

+

A prominent Hindu shrine dedicated to Lord Rama, built entirely of black stone in the Panchavati area.

+
+
+ +
+
+
+ +
+
+

Festivals & Culture

+
+

+ Nashik's culture is a rich tapestry of traditions, spirituality, and gastronomy. The primary language spoken is Marathi, with Hindi and English widely understood. +

+

+ The city comes alive during its vibrant festivals. The grandest of all is the Kumbh Mela, held once every twelve years, attracting millions of devotees. Other major celebrations include Gudi Padwa (Marathi New Year) and Ramnavami, celebrated with great fervor, especially in the Panchavati area. +

+

+ The local cuisine, or "Nashik food," is known for its unique flavors. Don't miss trying Misal Pav (a spicy sprout curry), Vada Pav, and the local specialty, Chivda. Being the wine capital, wine tourism and food pairings have also become an integral part of the local culture. +

+
+
+
+ + + +
+
+

Get In Touch

+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+
+
+
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/ExploreNashik/script.js b/Domains/Frontend/MiniProjects/ExploreNashik/script.js new file mode 100644 index 00000000..324eb6ae --- /dev/null +++ b/Domains/Frontend/MiniProjects/ExploreNashik/script.js @@ -0,0 +1,75 @@ +document.addEventListener('DOMContentLoaded', function() { + + // --- Mobile Menu Toggle --- + const menuBtn = document.getElementById('menu-btn'); + const mobileMenu = document.getElementById('mobile-menu'); + const menuIconOpen = document.getElementById('menu-icon-open'); + const menuIconClose = document.getElementById('menu-icon-close'); + + menuBtn.addEventListener('click', () => { + const isOpen = !mobileMenu.classList.contains('hidden'); + mobileMenu.classList.toggle('hidden'); + menuIconOpen.classList.toggle('hidden', !isOpen); + menuIconClose.classList.toggle('hidden', isOpen); + }); + + // Close mobile menu when a link is clicked + mobileMenu.querySelectorAll('a.nav-link').forEach(link => { + link.addEventListener('click', () => { + mobileMenu.classList.add('hidden'); + menuIconOpen.classList.remove('hidden'); + menuIconClose.classList.add('hidden'); + }); + }); + + // --- Back to Top Button --- + const toTopBtn = document.getElementById('to-top-btn'); + + window.addEventListener('scroll', () => { + if (window.scrollY > 300) { + toTopBtn.classList.remove('opacity-0', 'translate-y-4'); + } else { + toTopBtn.classList.add('opacity-0', 'translate-y-4'); + } + }); + + toTopBtn.addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); + + // --- Active Nav Link on Scroll --- + const sections = document.querySelectorAll('section[id]'); + const navLinks = document.querySelectorAll('a.nav-link'); + + const observerOptions = { + root: null, // viewport + rootMargin: '0px', + threshold: 0.4 // 40% of the section must be visible + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const sectionId = entry.target.id; + + // Remove 'active' from all links + navLinks.forEach(link => { + link.classList.remove('active'); + // Match link's data-section (or href) to the sectionId + if (link.dataset.section === sectionId || link.getAttribute('href') === `#${sectionId}`) { + link.classList.add('active'); + } + }); + } + }); + }, observerOptions); + + // Observe each section + sections.forEach(section => { + observer.observe(section); + }); + +}); \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/ExploreNashik/style.css b/Domains/Frontend/MiniProjects/ExploreNashik/style.css new file mode 100644 index 00000000..47f1bcd9 --- /dev/null +++ b/Domains/Frontend/MiniProjects/ExploreNashik/style.css @@ -0,0 +1,54 @@ +/* Apply smooth scrolling */ +html { + scroll-behavior: smooth; +} +/* Apply Inter font family */ +body { + font-family: "Inter", sans-serif; + color: #374151; /* gray-700 */ +} +/* Custom class for section titles */ +.section-title { + font-size: 2rem; /* 32px */ + font-weight: 700; + text-align: center; + color: #052e16; /* green-950 */ + margin-bottom: 3rem; /* mb-12 */ +} +@media (min-width: 768px) { + .section-title { + font-size: 2.5rem; /* 40px */ + } +} + +/* Base styles for nav links */ +.nav-link { + display: block; + padding: 0.5rem 0; + font-weight: 500; + color: #374151; /* gray-700 */ + transition: color 0.3s ease; + border-bottom: 2px solid transparent; +} +.nav-link:hover { + color: #166534; /* green-800 */ +} +/* Active nav link styling (handled by JS) */ +.nav-link.active { + color: #15803D; /* green-700 */ + font-weight: 700; + border-bottom-color: #15803D; +} + +/* Mobile nav link styles */ +#mobile-menu .nav-link { + padding: 0.75rem 1rem; /* p-3 px-4 */ + border-bottom: 1px solid #E5E7EB; /* border-gray-200 */ +} +#mobile-menu .nav-link:last-child { + border-bottom: none; +} +#mobile-menu .nav-link.active { + background-color: #F0FDF4; /* green-50 */ + border-bottom-color: #E5E7EB; /* border-gray-200 */ +} \ No newline at end of file