Spaces:
Running
Running
| <html lang="pl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Nowoczesna strona internetowa z innowacyjnymi rozwi膮zaniami"> | |
| <meta name="keywords" content="nowoczesna strona, technologia, innowacje"> | |
| <meta name="author" content="Twoja Firma"> | |
| <title>Nowoczesna Strona - Innowacje na Wyci膮gni臋cie R臋ki</title> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <nav class="navbar"> | |
| <div class="nav-container"> | |
| <div class="nav-logo"> | |
| <h2>TechFlow</h2> | |
| </div> | |
| <ul class="nav-menu"> | |
| <li class="nav-item"> | |
| <a href="#home" class="nav-link">Strona g艂贸wna</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#about" class="nav-link">O nas</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#services" class="nav-link">Us艂ugi</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#portfolio" class="nav-link">Portfolio</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a href="#contact" class="nav-link">Kontakt</a> | |
| </li> | |
| <li class="nav-item"> | |
| <button class="theme-toggle" id="themeToggle"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </li> | |
| </ul> | |
| <div class="hamburger"> | |
| <span class="bar"></span> | |
| <span class="bar"></span> | |
| <span class="bar"></span> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <main> | |
| <section id="home" class="hero"> | |
| <div class="hero-container"> | |
| <div class="hero-content"> | |
| <h1 class="hero-title"> | |
| Przysz艂o艣膰 <span class="gradient-text">Technologii</span> Dzi艣 | |
| </h1> | |
| <p class="hero-subtitle"> | |
| Odkryj innowacyjne rozwi膮zania, kt贸re przekszta艂caj膮 艣wiat cyfrowy | |
| </p> | |
| <div class="hero-buttons"> | |
| <button class="btn btn-primary">Zacznij teraz</button> | |
| <button class="btn btn-secondary">Dowiedz si臋 wi臋cej</button> | |
| </div> | |
| </div> | |
| <div class="hero-image"> | |
| <div class="floating-card"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scroll-indicator"> | |
| <div class="scroll-arrow"></div> | |
| </div> | |
| </section> | |
| <section id="about" class="about"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">O Nas</h2> | |
| <p class="section-subtitle">Poznaj nasz膮 pasj臋 do innowacji</p> | |
| </div> | |
| <div class="about-grid"> | |
| <div class="about-card"> | |
| <div class="card-icon"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <h3>Innowacje</h3> | |
| <p>Stale poszukujemy nowych rozwi膮za艅 i technologii, kt贸re wyznaczaj膮 nowe standardy w bran偶y.</p> | |
| </div> | |
| <div class="about-card"> | |
| <div class="card-icon"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3>Do艣wiadczenie</h3> | |
| <p>Lata praktyki i setki zrealizowanych projekt贸w to gwarancja najwy偶szej jako艣ci us艂ug.</p> | |
| </div> | |
| <div class="about-card"> | |
| <div class="card-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Bezpiecze艅stwo</h3> | |
| <p>Twoje dane s膮 dla nas priorytetem. Stosujemy najnowsze standardy ochrony informacji.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="services" class="services"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Nasze Us艂ugi</h2> | |
| <p class="section-subtitle">Kompleksowe rozwi膮zania dla Twojego biznesu</p> | |
| </div> | |
| <div class="services-grid"> | |
| <div class="service-item"> | |
| <div class="service-number">01</div> | |
| <h3>Web Development</h3> | |
| <p>Tworzymy nowoczesne, responsywne strony internetowe dostosowane do Twoich potrzeb.</p> | |
| <a href="#" class="service-link">Dowiedz si臋 wi臋cej <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| <div class="service-item"> | |
| <div class="service-number">02</div> | |
| <h3>Mobile Apps</h3> | |
| <p>Rozwijamy innowacyjne aplikacje mobilne na platformy iOS i Android.</p> | |
| <a href="#" class="service-link">Dowiedz si臋 wi臋cej <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| <div class="service-item"> | |
| <div class="service-number">03</div> | |
| <h3>UI/UX Design</h3> | |
| <p>Projektujemy intuicyjne interfejsy, kt贸re u偶ytkownicy pokochaj膮 od pierwszego wejrzenia.</p> | |
| <a href="#" class="service-link">Dowiedz si臋 wi臋cej <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| <div class="service-item"> | |
| <div class="service-number">04</div> | |
| <h3>Cloud Solutions</h3> | |
| <p>Oferujemy skalowalne rozwi膮zania chmurowe dla firm ka偶dej wielko艣ci.</p> | |
| <a href="#" class="service-link">Dowiedz si臋 wi臋cej <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="portfolio" class="portfolio"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Portfolio</h2> | |
| <p class="section-subtitle">Nasze najnowsze realizacje</p> | |
| </div> | |
| <div class="portfolio-filter"> | |
| <button class="filter-btn active" data-filter="all">Wszystko</button> | |
| <button class="filter-btn" data-filter="web">Strony</button> | |
| <button class="filter-btn" data-filter="mobile">Aplikacje</button> | |
| <button class="filter-btn" data-filter="design">Design</button> | |
| </div> | |
| <div class="portfolio-grid"> | |
| <div class="portfolio-item" data-category="web"> | |
| <div class="portfolio-image"> | |
| <img src="https://picsum.photos/seed/project1/400/300.jpg" alt="Projekt 1"> | |
| <div class="portfolio-overlay"> | |
| <div class="portfolio-info"> | |
| <h3>E-commerce Platform</h3> | |
| <p>Nowoczesna platforma sprzeda偶owa</p> | |
| <a href="#" class="portfolio-link">Zobacz projekt</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item" data-category="mobile"> | |
| <div class="portfolio-image"> | |
| <img src="https://picsum.photos/seed/project2/400/300.jpg" alt="Projekt 2"> | |
| <div class="portfolio-overlay"> | |
| <div class="portfolio-info"> | |
| <h3>Fitness App</h3> | |
| <p>Aplikacja mobilna do trening贸w</p> | |
| <a href="#" class="portfolio-link">Zobacz projekt</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item" data-category="design"> | |
| <div class="portfolio-image"> | |
| <img src="https://picsum.photos/seed/project3/400/300.jpg" alt="Projekt 3"> | |
| <div class="portfolio-overlay"> | |
| <div class="portfolio-info"> | |
| <h3>Brand Identity</h3> | |
| <p>Pe艂na identyfikacja wizualna</p> | |
| <a href="#" class="portfolio-link">Zobacz projekt</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item" data-category="web"> | |
| <div class="portfolio-image"> | |
| <img src="https://picsum.photos/seed/project4/400/300.jpg" alt="Projekt 4"> | |
| <div class="portfolio-overlay"> | |
| <div class="portfolio-info"> | |
| <h3>Corporate Website</h3> | |
| <p>Strona korporacyjna z CMS</p> | |
| <a href="#" class="portfolio-link">Zobacz projekt</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item" data-category="mobile"> | |
| <div class="portfolio-image"> | |
| <img src="https://picsum.photos/seed/project5/400/300.jpg" alt="Projekt 5"> | |
| <div class="portfolio-overlay"> | |
| <div class="portfolio-info"> | |
| <h3>Banking App</h3> | |
| <p>Aplikacja bankowa nowej generacji</p> | |
| <a href="#" class="portfolio-link">Zobacz projekt</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item" data-category="design"> | |
| <div class="portfolio-image"> | |
| <img src="https://picsum.photos/seed/project6/400/300.jpg" alt="Projekt 6"> | |
| <div class="portfolio-overlay"> | |
| <div class="portfolio-info"> | |
| <h3>UI Kit Design</h3> | |
| <p>Zestaw komponent贸w UI</p> | |
| <a href="#" class="portfolio-link">Zobacz projekt</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="stats" class="stats"> | |
| <div class="container"> | |
| <div class="stats-grid"> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="150">0</div> | |
| <div class="stat-label">Zrealizowanych projekt贸w</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="98">0</div> | |
| <div class="stat-label">Zadowolonych klient贸w</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="12">0</div> | |
| <div class="stat-label">Lat do艣wiadczenia</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" data-target="24">0</div> | |
| <div class="stat-label">Cz艂onk贸w zespo艂u</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="contact"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Skontaktuj si臋 z nami</h2> | |
| <p class="section-subtitle">Ch臋tnie odpowiemy na wszystkie pytania</p> | |
| </div> | |
| <div class="contact-grid"> | |
| <div class="contact-info"> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h4>Adres</h4> | |
| <p>ul. Warszawska 123<br>00-001 Warszawa</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h4>Telefon</h4> | |
| <p>+48 123 456 789</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h4>Email</h4> | |
| <p>kontakt@techflow.pl</p> | |
| </div> | |
| </div> | |
| <div class="social-links"> | |
| <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="contact-form"> | |
| <form id="contactForm"> | |
| <div class="form-group"> | |
| <input type="text" id="name" name="name" placeholder="Twoje imi臋" required> | |
| </div> | |
| <div class="form-group"> | |
| <input type="email" id="email" name="email" placeholder="Tw贸j email" required> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" id="subject" name="subject" placeholder="Temat" required> | |
| </div> | |
| <div class="form-group"> | |
| <textarea id="message" name="message" rows="5" placeholder="Twoja wiadomo艣膰" required></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary btn-full">Wy艣lij wiadomo艣膰</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>TechFlow</h3> | |
| <p>Innowacje, kt贸re zmieniaj膮 przysz艂o艣膰</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Szybkie linki</h4> | |
| <ul> | |
| <li><a href="#home">Strona g艂贸wna</a></li> | |
| <li><a href="#about">O nas</a></li> | |
| <li><a href="#services">Us艂ugi</a></li> | |
| <li><a href="#portfolio">Portfolio</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Us艂ugi</h4> | |
| <ul> | |
| <li><a href="#">Web Development</a></li> | |
| <li><a href="#">Mobile Apps</a></li> | |
| <li><a href="#">UI/UX Design</a></li> | |
| <li><a href="#">Cloud Solutions</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Newsletter</h4> | |
| <p>Zapisz si臋, aby otrzymywa膰 najnowsze informacje</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="Tw贸j email"> | |
| <button type="submit"><i class="fas fa-paper-plane"></i></button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2024 TechFlow. Wszystkie prawa zastrze偶one.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="assets/js/script.js"></script> | |
| </body> | |
| </html> |