PageSourceSearch

https://fiftydevs.com/pages/portfolio.php

html fiftydevs.com collected 2026-10-02 01:28:58 UTC 24,247 bytes, 494 lines download raw bytes

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&amp;h=300&amp;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&amp;h=300&amp;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&amp;h=300&amp;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&amp;h=300&amp;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&amp;h=300&amp;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&amp;h=300&amp;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&amp;h=300&amp;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&amp;h=300&amp;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>&copy; 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.