inagiffy

Inagiffy - Newsletter Management Platform

A modern, responsive landing page for a newsletter creation and management platform. Built with HTML, CSS, and vanilla JavaScript.

🚀 Features

• Responsive Design: Fully responsive across all devices
• Modern UI/UX: Clean, professional design with smooth animations
• Dark Mode: Built-in theme switcher
• Interactive Elements:
  • Animated cards
  • Hover effects
  • Parallax scrolling
  • Filter functionality
• Performance Optimized: Fast loading with minimal dependencies
• Accessibility: WCAG compliant with ARIA labels

🛠️ Technologies

• HTML5
• CSS3 (Custom properties, Flexbox, Grid)
• Vanilla JavaScript
• Font Awesome Icons
• Google Fonts

📂 Project Structure

newsletter/
├── index.html
├── styles.css
├── script.js
├── README.md
└── images/
    ├── envelope.png
    ├── tech-case.jpg
    ├── finance-case.jpg
    ├── retail-case.jpg
    ├── user-avatar.jpg
    └── partner-logos/

🎯 Key Sections

1. Hero Section: Dynamic landing with floating elements
2. About Section: Feature highlights with animated cards
3. Case Studies: Filterable success stories
4. Footer: Comprehensive footer with newsletter signup

🚀 Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/inagiffy.git

2. Open index.html in your browser

3. For development:

   • Use a local server (e.g., Live Server for VS Code)
   • Make sure all image paths are correct

💻 Development

To modify the project:

1. Styles: Edit styles.css

   • Variables are defined in :root
   • Mobile styles are at the bottom

2. JavaScript: Edit script.js

   • All event listeners are in DOMContentLoaded
   • Animations and interactions are modular

3. Content: Edit index.html

   • Update text and images
   • Maintain semantic structure

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

⚡ Performance Tips

1. Optimize images before adding
2. Minimize third-party scripts
3. Use WebP format for images where possible
4. Lazy load images below the fold

🎨 Customization

1. Colors: Update variables in :root
2. Fonts: Change Google Fonts link
3. Icons: Use Font Awesome classes
4. Images: Replace in /images directory

📄 License

MIT License - feel free to use for personal or commercial projects.

🙏 Credits

Designed & Developed by Oceed Codes

🤝 Contributing

1. Fork the project
2. Create feature branch
3. Commit changes
4. Push to branch
5. Open pull request

📞 Support

For support, email [email protected] or open an issue on GitHub.