Welcome to the Wild Hub Gallery, a showcase of Sri Lanka's rich wildlife diversity. This project features a dynamic image slider of various animal species native to Sri Lanka, accompanied by detailed descriptions and a customizable user interface.
Features
1. Header Section
• Logo and Navigation: A fixed navbar at the top with a logo and navigation links to different sections of the site, including Home, Gallery, Shop, Feedback, Sitemap, and About Us.
• Customization Button: A button to toggle a customization panel where users can select different fonts and background colors.
2. Slider Section
• Image Slider: A main slider that transitions through different animal images with descriptions. Each slide includes a title, a brief description, and a "See more" button linking to a detailed content page.
• Navigation Arrows: Left and right arrows to navigate through the slider manually.
• Thumbnail Images: A row of clickable thumbnails that allows users to jump directly to any slide.
3. Customization Panel
• Font Selection: A dropdown menu to select different fonts for the site.
• Background Color: An input to choose a background color for the page.
• Apply Button: Applies the selected font and background color to the site.
4. Footer Section
• Copyright and Credits: A footer with copyright information and the name of the page editor.
Technologies Used
• HTML: For structuring the content of the web page.
• CSS: For styling the web page, including Google Fonts integration for diverse typography.
• JavaScript: For functionality such as the image slider, customization panel, and dynamic content display.
How to Use
-
Navigation: Use the navbar to navigate between different sections of the site.
-
Image Slider: Use the navigation arrows or click on thumbnails to browse through different animal images.
-
Customization: Click on the "Customize" button to open the customization panel, select your desired font and background color, and click "Apply" to see the changes.
-
See More: Click on the "See more" buttons within the slider to visit detailed content pages about each animal.
Code Highlights
HTML Structure
• The header includes a logo and navigation links wrapped in a div with the class navbar.
• The slider section contains a div with the class slider, which houses the list of image items and navigation arrows.
• A customization panel is included within the navbar's list items.
CSS Styles
• Fonts: Multiple Google Fonts are imported for typography customization.
• Layout: Flexbox and grid systems are used for layout management.
• Transitions: Smooth transitions and animations are applied for a polished user experience.
JavaScript Functionality
• Slider Navigation: JavaScript is used to handle the logic for navigating the slider items and updating the active item class.
• Customization Panel: Event listeners manage the opening of the customization panel and applying user-selected styles to the page.
• Dynamic Content Display: Ensures content visibility changes and smooth transitions for elements like the "See more" buttons.