A modern, responsive landing page for a project management SaaS product. Built with HTML5, CSS3, Tailwind CSS, and JavaScript.

Portfolio Project - Professional landing page showcase for frontend development skills.

• ✅ Modern, clean design with bold color scheme
• ✅ Fully responsive (mobile, tablet, desktop)
• ✅ Smooth animations and transitions
• ✅ Interactive hover effects
• ✅ Professional typography (Syne + DM Sans)

• Hero Section - Eye-catching headline with CTA buttons
• Stats Section - Social proof with animated counters
• Features Section - 6 feature cards with icons and 3D tilt effects
• Pricing Section - 3-tier pricing table (Starter, Pro, Enterprise)
• CTA Section - Final conversion section
• Footer - Complete footer with links and back-to-top button

• 📱 Mobile hamburger menu with smooth slide-in animation
• 🔢 Animated number counters on scroll
• 🎨 3D card tilt effects on hover
• 💧 Button ripple animations
• 🌊 Parallax background effect
• ✨ Scroll-triggered animations
• 🎮 Easter egg (Konami code)

• HTML5 - Semantic markup
• CSS3 - Custom styles and animations
• Tailwind CSS - Utility-first CSS framework (via CDN)
• JavaScript - Interactive functionality
• Google Fonts - Syne & DM Sans

prismly-landing-page/
├── index.html          # Main HTML file
├── styles.css          # Custom CSS styles
├── script.js           # JavaScript functionality
└── README.md           # Project documentation

• A modern web browser (Chrome, Firefox, Safari, Edge)
• No build tools or dependencies required!

1. Download the files

   • Download the ZIP file or clone the repository
   • Extract to your desired location

2. Open in browser

   # Simply open index.html in your browser
   # Or use a local server:
   python -m http.server 8000
   # Then visit: http://localhost:8000

3. That's it! 🎉

Edit the CSS variables in styles.css:

:root {
    --primary: #E85A2A;           /* Main brand color */
    --primary-dark: #D14922;      /* Darker shade */
    --secondary: #004E89;         /* Accent color */
    --dark: #1A1A2E;              /* Text color */
    --light: #F8F9FA;             /* Background */
}

1. Company Name - Search and replace "Prismly" in all files
2. Hero Text - Edit the <h1> tag in index.html
3. Features - Modify the feature cards section
4. Pricing - Update pricing tiers and features
5. Images - Replace Unsplash URLs with your own

Replace the text logo in navigation:

<!-- Before -->
<div class="logo">Prismly</div>

<!-- After -->
<img src="your-logo.png" alt="Logo" class="logo">

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

• Fast loading (< 2 seconds)
• Minimal dependencies (only Tailwind CDN)
• Optimized images
• Clean, efficient code

Modern, spacious layout with smooth animations

Optimized for iPad and tablet devices

Touch-friendly with hamburger menu

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ⚠️ IE11 (not supported)

None currently. If you find any bugs, feel free to report them!

Possible improvements for future versions:

• Dark mode toggle
• Multi-language support
• Blog section
• Testimonials carousel
• Video integration
• Newsletter signup
• Live chat widget

Perfect for:

• Portfolio Projects - Showcase your frontend skills
• Client Work - Template for SaaS landing pages
• Learning - Study modern web design patterns
• Startups - Quick landing page for product launches

If you want to learn how this was built:

• HTML & CSS Basics
• Tailwind CSS Docs
• JavaScript Fundamentals
• CSS Animations

This project is free to use for personal and commercial purposes.

Feel free to:

• ✅ Use for client work
• ✅ Modify and customize
• ✅ Learn from the code
• ✅ Share with others

Abiodun Oluwafunmibi

• Portfolio: funmibitech.netlify.app
• Email: funmibitech@gmail.com

• Design inspiration from modern SaaS landing pages
• Icons: Emoji (native browser support)
• Fonts: Google Fonts (Syne, DM Sans)
• Images: Unsplash

Need help or have questions?

• Check the code comments
• Review the customization guide above
• Contact: funmibitech@gmail.com

Built with ❤️ by Abiodun Oluwafunmibi

Tech Stack:

• HTML5
• CSS3
• Tailwind CSS
• JavaScript
• Love and Coffee ☕

Last Updated: February 2026