🐶 Tindog — Matching Pairs for Paws

Tindog Banner

Tindog is a playful, high-conversion landing page design for a fictional social networking app tailored specifically for dogs. Built as a tribute to modern mobile-first design, it utilizes Bootstrap 5 and custom CSS3 animations to create an engaging, high-energy user experience that mimics the aesthetic of leading social platforms.

This project serves as a showcase of responsive layout mastery, typography pairing, and front-end design fundamentals.

🛠️ Technology Stack

✨ Features at a Glance

📱 Responsive Mastery

Mobile-First Architecture: Designed from the ground up to look incredible on small screens, using Bootstrap’s fluid grid system.
Adaptive Navbar: A custom navigation system that collapses into a sleek mobile menu, ensuring accessibility across all devices.
Fixed/Elastic Layouts: Strategic use of CSS layout principles to handle various viewport sizes without breaking the visual hierarchy.

🎨 Premium Visual Design

High-Impact Hero Section: Featuring layered iPhone mockups and bold call-to-action buttons (App Store/Play Store).
Interactive Testimonial Slider: A clean, animated carousel showcasing “user” feedback from satisfied pups around the world.
Custom Iconography: Integration of Font Awesome for a professional, intuitive visual language.

⚡ Conversion Focused

Pricing Strategy Section: Dedicated layout for comparing “subscription” plans, demonstrating clean data presentation.
Social Proof Integration: Logos of major “publications” (TechCrunch, Mashable) to simulate brand authority.
Strategic CTAs: Carefully placed buttons designed to guide the user towards the app download.

📁 Project Structure

tindog/
├── index.html           # Core semantic structure
├── css/
│   └── styles.css       # Custom overrides & animations
├── images/              # Optimized product mockups & assets
└── README.md            # Project documentation

🚀 Installation & Setup

1. Prerequisites

A modern web browser (Chrome, Safari, Firefox)

2. Manual Setup

Clone the repository:

git clone https://github.com/leonardoo210399/tindog.git

Navigate to the project folder:
```
cd tindog
```
Open index.html in your browser.

3. Usage

Scroll through the landing page to observe the responsive transitions and animations. Click the “Pricing” links to see the layout shifts.

📄 License

Distributed under the MIT License.

Designed & Developed by Aditya (aka aditya-2129)

Tindog Project