1 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta name="description" content="FiftyDevs Portfolio - See our completed projects and successful case studies"> 8 <meta name="keywords" content="Portfolio, Case Studies, Projects, GHL Solutions"> 9 10 <title>Portfolio - FiftyDevs</title> 11 12 <link rel="stylesheet" href="../css/main.css"> 13 <link rel="stylesheet" href="../css/animations.css"> 14 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet"> 15 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 16 17 <style> 18 .portfolio-hero { 19 min-height: 400px; 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 background: linear-gradient(135deg, var(--dark-secondary) 0%, var(--dark-tertiary) 100%); 24 text-align: center; 25 padding: 100px 20px; 26 margin-top: 70px; 27 } 28 29 .portfolio-hero h1 { 30 font-size: 3rem; 31 margin-bottom: 1rem; 32 } 33 34 .portfolio-container { 35 padding: 80px 0; 36 } 37 38 .portfolio-filters { 39 display: flex; 40 justify-content: center; 41 gap: 1rem; 42 margin-bottom: 3rem; 43 flex-wrap: wrap; 44 } 45 46 .filter-btn { 47 padding: 10px 20px; 48 border: 2px solid var(--border-color); 49 background: transparent; 50 color: var(--text-secondary); 51 border-radius: 50px; 52 cursor: pointer; 53 font-weight: 600; 54 transition: all 0.3s ease; 55 font-family: 'Poppins', sans-serif; 56 } 57 58 .filter-btn.active { 59 background: linear-gradient(135deg, var(--primary-gold), var(--primary-blue)); 60 color: var(--dark-bg); 61 border-color: transparent; 62 } 63 64 .filter-btn:hover:not(.active) { 65 border-color: var(--primary-gold); 66 } 67 68 .portfolio-grid { 69 display: grid; 70 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 71 gap: 2rem; 72 margin-top: 2rem; 73 } 74 75 .portfolio-item { 76 background: linear-gradient(135deg, rgba(37, 155, 253, 0.1), rgba(255, 202, 2, 0.05)); 77 border: 1px solid var(--border-color); 78 border-radius: 20px; 79 overflow: hidden; 80 transition: all 0.3s ease; 81 cursor: pointer; 82 position: relative; 83 } 84 85 .portfolio-item:hover { 86 border-color: var(--primary-blue); 87 transform: translateY(-10px); 88 box-shadow: 0 15px 40px rgba(37, 155, 253, 0.2); 89 } 90 91 .portfolio-image { 92 width: 100%; 93 height: 200px; 94 object-fit: cover; 95 transition: transform 0.3s ease; 96 } 97 98 .portfolio-item:hover .portfolio-image { 99 transform: scale(1.05); 100 } 101 102 .portfolio-overlay { 103 position: absolute; 104 top: 0; 105 left: 0; 106 right: 0; 107 bottom: 0; 108 background: rgba(10, 15, 30, 0.8); 109 display: flex; 110 align-items: center; 111 justify-content: center; 112 opacity: 0; 113 transition: opacity 0.3s ease; 114 } 115 116 .portfolio-item:hover .portfolio-overlay { 117 opacity: 1; 118 } 119 120 .portfolio-overlay-content { 121 text-align: center; 122 color: white; 123 } 124 125 .portfolio-info { 126 padding: 1.5rem; 127 } 128 129 .portfolio-category { 130 color: var(--primary-gold); 131 font-size: 0.85rem; 132 font-weight: 600; 133 margin-bottom: 0.5rem; 134 text-transform: uppercase; 135 } 136 137 .portfolio-title { 138 font-size: 1.2rem; 139 font-weight: 700; 140 margin-bottom: 0.5rem; 141 } 142 143 .portfolio-description { 144 color: var(--text-secondary); 145 font-size: 0.9rem; 146 margin-bottom: 1rem; 147 } 148 149 .portfolio-link { 150 color: var(--primary-blue); 151 font-weight: 600; 152 display: inline-flex; 153 align-items: center; 154 gap: 0.5rem; 155 transition: all 0.3s ease; 156 } 157 158 .portfolio-link:hover { 159 color: var(--primary-gold); 160 gap: 1rem; 161 } 162 163 .hidden { 164 display: none; 165 } 166 167 @media (max-width: 768px) { 168 .portfolio-hero h1 { 169 font-size: 2rem; 170 } 171
172 .portfolio-grid { 173 grid-template-columns: 1fr; 174 } 175 176 .portfolio-filters { 177 justify-content: flex-start; 178 overflow-x: auto; 179 padding-bottom: 1rem; 180 } 181 } 182 </style> 183</head> 184<body> 185 <!-- Navigation --> 186 187<nav class="navbar"> 188 <div class="container nav-container"> 189 <div class="logo"> 190 <img src="/logos/main_logo.png" height="60" /> 191 <span class="brand-name"></span> 192 </div> 193 <button class="mobile-menu-toggle" id="mobileMenuToggle"> 194 <span></span> 195 <span></span> 196 <span></span> 197 </button> 198 <ul class="nav-menu" id="navMenu"> 199 <li><a href="../index.php#hero">Home</a></li> 200 <li><a href="../index.php#services">What We Do</a></li> 201 <li hidden><a href="../index.php#products">Products</a></li> 202 <li><a href="../index.php#engage">How It Works</a></li> 203 <li><a href="calendar.php">Book a Call</a></li> 204 <li class="nav-dropdown" hidden> 205 <button class="nav-dropdown-toggle" type="button" aria-expanded="false"> 206 More <span class="nav-chevron" aria-hidden="true">â¾</span> 207 </button> 208 <ul class="nav-dropdown-menu"> 209 <li><a href="../index.php#about">About Us</a></li> 210 <li hidden><a href="portfolio.php" class="active">Portfolio</a></li> 211 <li hidden><a href="gallery.php">Gallery</a></li> 212 <li hidden><a href="testimonials.php">Testimonials</a></li> 213 <li><a href="../index.php#faq">FAQ</a></li> 214 <li hidden><a href="../index.php#team">Team</a></li> 215 <li><a href="../index.php#contact">Contact</a></li> 216 <li><a href="privacy-policy.php">Privacy Policy</a></li> 217 <li><a href="terms-and-conditions.php">Terms</a></li> 218 </ul> 219 </li> 220 <li><a href="../index.php#contact" class="btn btn-quote">What would it cost me?</a></li> 221 <!-- Calendly badge widget begin --> 222 <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"> 223
223<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
223 224
224<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/fiftydevs/new-meeting', text: 'Schedule time with me', color: '#0069FF', textColor: '#FFFFFF', branding: true }); }</script>
224 225 <!-- Calendly badge widget end --> 226 </ul> 227 </div> 228</nav> 229 230 <!-- Hero Section --> 231 <section class="portfolio-hero"> 232 <div class="container"> 233 <h1 class="animate-fade-in"> 234 Our <span class="text-gradient">Portfolio</span> 235 </h1> 236 <p class="section-subtitle animate-fade-in-delay"> 237 Successful projects that have transformed businesses 238 </p> 239 </div> 240 </section> 241 242 <!-- Portfolio Section --> 243 <section class="portfolio-container"> 244 <div class="container"> 245 <div class="portfolio-filters"> 246 <button class="filter-btn active" 247 onclick="filterPortfolio('All')"> 248 All </button> 249 <button class="filter-btn " 250 onclick="filterPortfolio('Funnel')"> 251 Funnel </button> 252 <button class="filter-btn " 253 onclick="filterPortfolio('Website')"> 254 Website </button> 255 <button class="filter-btn " 256 onclick="filterPortfolio('Automation')"> 257 Automation </button> 258 <button class="filter-btn " 259 onclick="filterPortfolio('Integration')"> 260 Integration </button> 261 <button class="filter-btn " 262 onclick="filterPortfolio('Platform')"> 263 Platform </button> 264 </div> 265 266 <div class="portfolio-grid"> 267 <div class="portfolio-item stagger-item animate-fade-up portfolio-filter-item" data-category="Funnel" data-category-all="All"> 268 <div style="position: relative; height: 200px; overflow: hidden;"> 269 <img src="https://images.unsplash.com/photo-1460925895917-adf4e0c3f1ca?w=500&h=300&fit=crop" alt="High-Converting Sales Funnel" class="portfolio-image"> 270 <div class="portfolio-overlay"> 271 <div class="portfolio-overlay-content"> 272 <a href="https://example-funnel.com" target="_blank" class="btn btn-primary"> 273 View Project ââ â 274 </a> 275 </div> 276 </div> 277 </div> 278 <div class="portfolio-info"> 279 <div class="portfolio-category">Funnel</div> 280 <div class="portfolio-title">High-Converting Sales Funnel</div> 281 <p class="portfolio-description">Custom-built sales funnel that generated $250K in first 30 days for our client</p> 282 <a href="https://example-funnel.com" target="_blank" class="portfolio-link"> 283 Explore <i class="fas fa-arrow-right"></i> 284 </a> 285 </div> 286 </div> 287 <div class="portfolio-item stagger-item animate-fade-up portfolio-filter-item" data-category="Website" data-category-all="All"> 288 <div style="position: relative; height: 200px; overflow: hidden;"> 289 <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=300&fit=crop" alt="Agency Website Redesign" class="portfolio-image"> 290 <div class="portfolio-overlay"> 291 <div class="portfolio-overlay-content"> 292 <a href="https://example-agency.com" target="_blank" class="btn btn-primary"> 293 View Project ââ â 294 </a> 295 </div> 296 </div> 297 </div> 298 <div class="portfolio-info"> 299 <div class="portfolio-category">Website</div> 300 <div class="portfolio-title">Agency Website Redesign</div> 301 <p class="portfolio-description">Complete website overhaul resulting in 150% increase in lead generation</p> 302 <a href="https://example-agency.com" target="_blank" class="portfolio-link"> 303 Explore <i class="fas fa-arrow-right"></i> 304 </a> 305 </div> 306 </div> 307 <div class="portfolio-item stagger-item animate-fade-up portfolio-filter-item" data-category="Automation" data-category-all="All"> 308 <div style="position: relative; height: 200px; overflow: hidden;"> 309 <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=300&fit=crop" alt="GHL Advanced Automation Setup" class="portfolio-image"> 310 <div class="portfolio-overlay"> 311 <div class="portfolio-overlay-content"> 312 <a href="#" target="_blank" class="btn btn-primary"> 313 View Project ââ â 314 </a> 315 </div> 316 </div> 317 </div> 318 <div class="portfolio-info"> 319 <div class="portfolio-category">Automation</div> 320 <div class="portfolio-title">GHL Advanced Automation Setup</div> 321 <p class="portfolio-description">Complex 50-step workflow automation that saves 20 hours per week</p> 322 <a href="#" target="_blank" class="portfolio-link"> 323 Explore <i class="fas fa-arrow-right"></i> 324 </a> 325 </div> 326 </div> 327 <div class="portfolio-item stagger-item animate-fade-up portfolio-filter-item" data-category="Website" data-category-all="All"> 328 <div style="position: relative; height: 200px; overflow: hidden;"> 329 <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=500&h=300&fit=crop" alt="E-Commerce Platform Launch" class="portfolio-image"> 330 <div class="portfolio-overlay"> 331 <div class="portfolio-overlay-content"> 332 <a href="https://example-ecommerce.com" target="_blank" class="btn btn-primary"> 333 View Project ââ â 334 </a> 335 </div> 336 </div> 337 </div> 338 <div class="portfolio-info"> 339 <div class="portfolio-category">Website</div> 340 <div class="portfolio-title">E-Commerce Platform Launch</div> 341 <p class="portfolio-description">Full e-commerce setup with custom integrations and automation</p> 342 <a href="https://example-ecommerce.com" target="_blank" class="portfolio-link"> 343 Explore <i class="fas fa-arrow-right"></i> 344 </a> 345 </div> 346 </div> 347 <div class="portfolio-item stagger-item animate-fade-up portfolio-filter-item" data-category="Integration" data-category-all="All"> 348 <div style="position: relative; height: 200px; overflow: hidden;"> 349 <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=300&fit=crop" alt="AI Chatbot Integration" class="portfolio-image"> 350 <div class="portfolio-overlay"> 351 <div class="portfolio-overlay-content"> 352 <a href="#" target="_blank" class="btn btn-primary"> 353 View Project ââ â 354 </a> 355 </div> 356 </div> 357 </div> 358 <div class="portfolio-info"> 359 <div class="portfolio-category">Integration</div> 360 <div class="portfolio-title">AI Chatbot Integration</div> 361 <p class="portfolio-description">Assistible AI + Closebot setup handling 1000+ customer inquiries daily</p> 362 <a href="#" target="_blank" class="portfolio-link"> 363 Explore <i class="fas fa-arrow-right"></i> 364 </a> 365 </div> 366 </div> 367 <div class="portfolio-item stagger-item animate-fade-up portfolio-filter-item" data-category="Platform" data-category-all="All"> 368 <div style="position: relative; height: 200px; overflow: hidden;"> 369 <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=300&fit=crop" alt="Membership Portal Development" class="portfolio-image"> 370 <div class="portfolio-overlay"> 371 <div class="portfolio-overlay-content"> 372 <a href="https://example-membership.com" target="_blank" class="btn btn-primary"> 373 View Project ââ â 374 </a> 375 </div> 376 </div> 377 </div> 378 <div class="portfolio-info"> 379 <div class="portfolio-category">Platform</div> 380 <div class="portfolio-title">Membership Portal Development</div> 381 <p class="portfolio-description">Complete community and course platform with automated onboarding</p> 382 <a href="https://example-membership.com" target="_blank" class="portfolio-link"> 383 Explore <i class="fas fa-arrow-right"></i> 384 </a> 385 </div> 386 </div> 387 <div class="portfolio-item stagger-item animate-fade-up portfolio-filter-item" data-category="Funnel" data-category-all="All"> 388 <div style="position: relative; height: 200px; overflow: hidden;"> 389 <img src="https://images.unsplash.com/photo-1460925895917-adf4e0c3f1ca?w=500&h=300&fit=crop" alt="Multi-Channel Marketing Funnel" class="portfolio-image"> 390 <div class="portfolio-overlay"> 391 <div class="portfolio-overlay-content"> 392 <a href="#" target="_blank" class="btn btn-primary"> 393 View Project ââ â 394 </a> 395 </div> 396 </div> 397 </div> 398 <div class="portfolio-info"> 399 <div class="portfolio-category">Funnel</div> 400 <div class="portfolio-title">Multi-Channel Marketing Funnel</div> 401 <p class="portfolio-description">Integrated Facebook, Email, SMS automation driving 300% ROI</p> 402 <a href="#" target="_blank" class="portfolio-link"> 403 Explore <i class="fas fa-arrow-right"></i> 404 </a> 405 </div> 406 </div> 407 <div class="portfolio-item stagger-item animate-fade-up portfolio-filter-item" data-category="Integration" data-category-all="All"> 408 <div style="position: relative; height: 200px; overflow: hidden;"> 409 <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=300&fit=crop" alt="Custom N8N Workflow" class="portfolio-image"> 410 <div class="portfolio-overlay"> 411 <div class="portfolio-overlay-content"> 412 <a href="#" target="_blank" class="btn btn-primary"> 413 View Project ââ â 414 </a> 415 </div> 416 </div> 417 </div> 418 <div class="portfolio-info"> 419 <div class="portfolio-category">Integration</div> 420 <div class="portfolio-title">Custom N8N Workflow</div> 421 <p class="portfolio-description">Advanced data transformation pipeline connecting 10+ tools</p> 422 <a href="#" target="_blank" class="portfolio-link"> 423 Explore <i class="fas fa-arrow-right"></i> 424 </a> 425 </div> 426 </div> 427 </div> 428 </div> 429 </section> 430 431 <!-- CTA Section --> 432 <section style="background: linear-gradient(135deg, var(--dark-secondary) 0%, var(--dark-tertiary) 100%); padding: 80px 0; text-align: center;"> 433 <div class="container"> 434 <h2 class="section-title">Start Your Project Today</h2> 435 <p class="section-subtitle">Seen something you like? Let's create something amazing for your business</p> 436 <a href="../index.php#contact" class="btn btn-primary" style="font-size: 1.1rem; padding: 15px 40px;">Get In Touch</a> 437 </div> 438 </section> 439 440 <!-- Footer --> 441 442<footer class="footer"> 443 <div class="container"> 444 <div class="footer-content"> 445 <div class="footer-section"> 446 <h4>FiftyDevs</h4> 447 <p>Your trusted partner for GHL services and agency growth</p> 448 </div> 449 <div class="footer-section"> 450 <h4>Quick Links</h4> 451 <ul> 452 <li><a href="../index.php#services">What we do</a></li> 453 <li hidden><a href="../index.php#products">Products</a></li> 454 <li hidden><a href="portfolio.php">Portfolio</a></li> 455 <li hidden><a href="testimonials.php">Testimonials</a></li> 456 </ul> 457 </div> 458 <div class="footer-section"> 459 <h4>Contact</h4> 460 <ul> 461 <li><a href="https://wa.me/923047074767" target="_blank" rel="noopener">WhatsApp</a></li> 462 <li>
462<a href="mailto:[email protected]">Email</a></li> 463 <li><a href="../index.php#contact">Contact Form</a></li> 464 </ul> 465 </div> 466 </div> 467 <div class="footer-bottom"> 468 <p>© 2026 FiftyDevs. All rights reserved. | <a href="privacy-policy.php">Privacy Policy</a> | <a href="terms-and-conditions.php">Terms and Conditions</a> | <a href="refund-policy.php">Refund Policy</a></p> 469 </div> 470 </div> 471</footer> 472 473
473<script> 474 function filterPortfolio(category) { 475 const items = document.querySelectorAll('.portfolio-filter-item'); 476 const buttons = document.querySelectorAll('.filter-btn'); 477 478 buttons.forEach(btn => btn.classList.remove('active')); 479 event.target.classList.add('active'); 480 481 items.forEach(item => { 482 if (category === 'All' || item.getAttribute('data-category') === category) { 483 item.classList.remove('hidden'); 484 item.style.animation = 'fadeInUp 0.6s ease-out'; 485 } else { 486 item.classList.add('hidden'); 487 } 488 }); 489 } 490 </script>
490 491
491<script src="../js/main.js"></script>
491 492</body> 493</html> 494
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.