Welcome to Fiorellino, a beautifully designed website for showcasing breathtaking floral arrangements for weddings, corporate events, and special celebrations. This project is built to provide an elegant and user-friendly experience for visitors, highlighting the services, testimonials, blog posts, and more.
Check out the live version of the website here:
https://sandhya80.github.io/Fiorellino/
- Live Demo
- Homepage Screenshot
- Features
- Technologies Used
- AI Influence on Workflow
- Color Palette
- Folder Structure
- How to Run the Project
- Screenshots
- Functionalities and User Benefits
- Bug Fixes
- Validation Methods
- Validation Screenshots
- Performance
- Limitations
- Future Enhancements
- License
- Credits
- Contact
- JavaScript Integration
- Homepage: A visually appealing landing page with a banner, featured services, testimonials, and blog snippets.
- Homepage Carousel: A responsive carousel showcasing featured floral arrangements and highlights.
- About Us Carousel: A team carousel on the About Us page, fully responsive and perfectly rounded for all viewports.
- Services Section: Detailed pages for various services like weddings, corporate events, private events, and more.
- Testimonials: A scrollable section showcasing client reviews and ratings.
- Blog Section: Latest blog posts with links to a dedicated blog page.
- Contact Us: A call-to-action section for booking consultations.
- Responsive Design: Fully responsive and optimized for all devices (mobile, tablet, and desktop).
- Footer: Includes company links, ethics, services, customer support, and social media icons.
- Login/Registration Pop-up: A custom login and registration modal for "My Account" accessible from the footer, allowing users to register or log in with a notification for activation code sent on registration.
- HTML5: For structuring the content.
- CSS3: For styling and layout.
- Bootstrap 5: For responsive design and prebuilt components.
- Font Awesome: For icons.
- Google Fonts: For typography.
- JavaScript: For interactivity and functionality.
AI tools like GitHub Copilot significantly enhanced the development process by streamlining bug fixes, optimizing performance, and improving accessibility and SEO. It provided intelligent code suggestions, automated repetitive tasks, and ensured adherence to best practices, resulting in a more efficient workflow and a polished final product.
The Fiorellino website uses the following color palette to create an elegant and visually appealing design:
| Color Name | Hex Code | Usage |
|---|---|---|
| Floral Pink | #FFC0CB |
Highlights, buttons, and accents |
| Pastel Green | #98FB98 |
Backgrounds and subtle sections |
| Ivory White | #FFFFF0 |
Main background color |
| Charcoal Gray | #333333 |
Text and headings |
| Soft Gold | #FFD700 |
Decorative elements and icons |
| Light Lavender | #E6E6FA |
Secondary backgrounds and hover effects |
| Deep Burgundy | #800020 |
Footer background and strong accents |
This palette ensures a cohesive and elegant aesthetic, reflecting the brand's floral and sophisticated theme.
Fiorellino/
├── index.html # Homepage
├── about.html # About Us page
├── blog.html # Blog page
├── contactUs.html # Contact Us page
├── services/ # Folder for service-specific pages
│ ├── wedding.html
│ ├── corporate-events.html
│ ├── private-events.html
│ ├── holy-communions.html
│ └── funeral-flowers.html
├── css/ # Stylesheets
│ ├── styles.css
│ ├── blog.css
│ └── responsive.css
├── assets/ # Images and other assets
│ ├── homepage_imgs/
│ ├── blog_imgs/
│ └── service_imgs/
└── js/ # JavaScript files
└── script.js
```plaintext
---
## How to Run the Project
1. Clone the repository:
```bash
git clone https://github.com/sandhya80.github.io/fiorellino.git
cd fiorellino
- Open
index.htmlin your browser to view the website.
For Small Screens:
Homepage banner for small screens:
Homepage/services for small screens:
For Medium Screens:
Homepage banner for medium screens:
Homepage/services for medium screens:
For Large Screens:
Homepage banner for large screens:
Homepage/services for large screens:
- Visually Appealing Banner: Captures user attention with a high-quality floral image and a call-to-action button for quick navigation.
- Featured Services Section: Highlights key services like weddings, corporate events, and private celebrations, making it easy for users to explore offerings.
- Homepage Carousel: Engages users with a dynamic, responsive carousel of featured floral arrangements.
- About Us Carousel: Introduces the team with a responsive, perfectly rounded carousel for all viewports.
- Testimonials Section: Displays client reviews in a scrollable format, building trust and credibility with potential customers.
- Blog Snippets: Showcases the latest blog posts with links to detailed articles, keeping users engaged with fresh content.
- Responsive Design: Ensures seamless browsing across devices (mobile, tablet, and desktop), enhancing user experience.
- Quick Contact Section: Includes a "Contact Us" call-to-action for easy booking of consultations or inquiries.
- Login/Registration Pop-up: Allows users to log in or register for a "My Account" directly from the footer, with a notification for activation code sent on registration.
These features provide an intuitive and engaging experience, helping users quickly find the information they need.
Several issues were identified and resolved in the Fiorellino Blog Page with the help of GitHub Copilot to enhance performance, accessibility, best practices, and SEO:
-
Performance Improvements:
- Added
loading="lazy"to all images to enable lazy loading, reducing initial page load time. - Used
deferfor non-critical JavaScript files to prevent render-blocking.
- Added
-
Accessibility Fixes:
- Added descriptive
altattributes to all images for better screen reader support. - Ensured proper ARIA roles for navigation elements.
- Added descriptive
-
Best Practices:
- Replaced
<link>tags in the footer with<a>tags for proper functionality. - Added
rel="noopener noreferrer"to external links to prevent security vulnerabilities.
- Replaced
-
SEO Enhancements:
- Added structured data (
JSON-LD) for the blog page to improve search engine visibility. - Optimized meta tags with relevant keywords and descriptions.
- Added structured data (
These fixes ensure a faster, more user-friendly, and SEO-optimized experience for visitors across all devices.
To ensure the Fiorellino website adheres to modern web standards and delivers an optimal user experience, the following validation methods were used:
- HTML Validation: Verified using W3C Markup Validation Service to ensure semantic and error-free HTML code.
- CSS Validation: Checked with W3C CSS Validation Service to confirm proper syntax and compatibility.
- Performance Testing: Conducted using Google Lighthouse to optimize loading times, reduce render-blocking resources, and improve overall performance.
- Accessibility Testing: Evaluated with Lighthouse and Wave Accessibility Tool to ensure compliance with WCAG standards.
- Best Practices: Assessed through Lighthouse to adhere to modern web development standards and security practices.
- SEO Validation: Optimized and tested with Lighthouse to ensure proper meta tags, structured data, and search engine visibility.
These validation methods guarantee a high-quality, user-friendly, and accessible website for all users.
Below are the screenshots showcasing the validation results for HTML and CSS:
-
HTML Validation: Verified using W3C Markup Validation Service.
-
CSS Validation: Checked with W3C CSS Validation Service.
-
JS Validation: JavaScript was validated using JSHint and ESLint for code quality and error checking.
This project is optimized for fast loading times and smooth user experience across all devices. Below are the performance metrics and screenshots showcasing the results:
- Performance Score: Achieved a high performance score on Google Lighthouse.
- Accessibility: Ensures accessibility for all users.
- Best Practices: Adheres to modern web development standards.
- SEO: Optimized for search engines.
-
Lighthouse Performance Report:
For Smaller Screen (Mobile devices - on Incognito mode):
For Larger Screen (Tablet & Desktop - with Chrome extensions):
-
Page Load Time:
-
Mobile Responsiveness Test:
- The website currently lacks e-commerce functionality for purchasing floral arrangements and event packages.
- User accounts and personalized features, such as order tracking, are not yet implemented.
- The blog section does not include interactive features like commenting or social sharing.
- Multilingual support is unavailable, limiting accessibility for a global audience.
- No AI-powered recommendations are in place to suggest floral arrangements based on user preferences.
- The absence of a calendar-based event booking system restricts scheduling consultations directly on the website.
- Newsletter subscription functionality is not yet integrated for user engagement.
These limitations will be addressed in future updates to enhance the website's functionality and user experience.
- E-commerce Integration: Add an online store for purchasing floral arrangements and event packages.
- User Accounts: Enable user registration and login for personalized experiences and order tracking.
- Advanced Blog Features: Include a commenting system and social sharing options for blog posts.
- Multilingual Support: Provide content in multiple languages to cater to a global audience.
- AI-Powered Recommendations: Implement AI to suggest floral arrangements based on user preferences and occasions.
- Event Booking System: Add a calendar-based booking system for scheduling consultations and events.
- Newsletter Subscription: Allow users to subscribe to newsletters for updates and promotions.
These enhancements aim to improve user engagement, functionality, and global reach.
This project is licensed strictly for educational purposes only. Any commercial use, redistribution, or modification of this project is prohibited without prior permission.
- Bootstrap: For providing responsive design and prebuilt components. Visit Bootstrap
- Unsplash: For the beautiful images used in the project. Visit Unsplash
- GitHub Copilot: For bug fixes and overall performance enhancements.
For any inquiries or feedback, feel free to reach out:
Email: [email protected]
Thank you for visiting Fiorellino!
The project now includes a dedicated JavaScript file:
js/script.js
- Handles opening and closing of the login/register modal from the footer.
- Allows switching between login and registration sections within the modal.
- Closes the modal when clicking outside the modal content.
- Demo form submissions for login and registration, with alert feedback.
- Enables interactive flipping of service cards on the Services page.
- Ensures only one card is flipped at a time for a clean user experience.
- Handles the display of a "Thank You" modal upon successful newsletter subscription form submission.
- Implements a search bar in the navbar.
- Highlights the first matching keyword found on the page.
- Alerts the user if no results are found.
- Handles form validation and submission for the booking form.
- Displays a confirmation modal upon successful submission.
- Resets the form after submission and provides validation feedback if the form is incomplete.
/js
└── script.js
- All JavaScript logic is included via
js/script.jsand is automatically loaded on each page. - No additional configuration is required.
- Bootstrap for modal and UI components.
- Font Awesome for icons.
For more details on each feature, please refer to the code comments in js/script.js.