| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SFC Projects - Cyber Team Portfolio</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| cyber: { |
| primary: '#00ff41', |
| dark: '#0d0221', |
| accent: '#008f11', |
| light: '#228b22' |
| } |
| }, |
| animation: { |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'float': 'float 6s ease-in-out infinite', |
| 'glitch': 'glitch 2s infinite', |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| }, |
| glitch: { |
| '0%': { transform: 'translate(0)' }, |
| '20%': { transform: 'translate(-3px, 3px)' }, |
| '40%': { transform: 'translate(-3px, -3px)' }, |
| '60%': { transform: 'translate(3px, 3px)' }, |
| '80%': { transform: 'translate(3px, -3px)' }, |
| '100%': { transform: 'translate(0)' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600&display=swap'); |
| |
| body { |
| font-family: 'Exo 2', sans-serif; |
| background-color: #0d0221; |
| background-image: |
| radial-gradient(circle at 10% 20%, rgba(0, 143, 17, 0.1) 0%, transparent 20%), |
| radial-gradient(circle at 90% 80%, rgba(0, 255, 65, 0.1) 0%, transparent 20%); |
| color: #e0e0e0; |
| overflow-x: hidden; |
| } |
| |
| h1, h2, h3, h4 { |
| font-family: 'Orbitron', sans-serif; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| .cyber-border { |
| position: relative; |
| border: 1px solid transparent; |
| background: linear-gradient(#0d0221, #0d0221) padding-box, |
| linear-gradient(45deg, #00ff41, #008f11, #00ff41) border-box; |
| border-radius: 8px; |
| } |
| |
| .cyber-border::before { |
| content: ''; |
| position: absolute; |
| top: -2px; |
| left: -2px; |
| right: -2px; |
| bottom: -2px; |
| background: linear-gradient(45deg, #00ff41, #008f11, #00ff41); |
| z-index: -1; |
| border-radius: 10px; |
| animation: glitch 3s infinite; |
| } |
| |
| .terminal-text { |
| font-family: 'Courier New', monospace; |
| color: #00ff41; |
| } |
| |
| .glow { |
| text-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 20px #00ff41; |
| } |
| |
| .matrix-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.1; |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiMwZDAyMjEiLz48cGF0aCBkPSJNMTAsMjAgTDIwLDMwIEwyMCw0MCBMMzAsNTAgTDQwLDYwIEw1MCw3MCBMMzAsODAgTDIwLDkwIEwxMCwxMDAgTDAsOTAgTDEwLDgwIEwyMCw3MCBMMzAsNjAgTDQwLDUwIEwzMCw0MCBMMjAsMzAgTDEwLDIwIFoiIGZpbGw9IiMwMGZmNDEiIG9wYWNpdHk9IjAuMSIvPjwvc3ZnPg=='); |
| background-size: 200px; |
| } |
| |
| .skill-bar { |
| height: 8px; |
| background: rgba(0, 255, 65, 0.1); |
| border-radius: 4px; |
| overflow: hidden; |
| } |
| |
| .skill-level { |
| height: 100%; |
| background: linear-gradient(90deg, #008f11, #00ff41); |
| border-radius: 4px; |
| } |
| |
| .project-card { |
| transition: all 0.3s ease; |
| transform: translateY(0); |
| } |
| |
| .project-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 10px 25px rgba(0, 255, 65, 0.2); |
| } |
| |
| .terminal-window { |
| background: rgba(13, 2, 33, 0.8); |
| border: 1px solid #00ff41; |
| box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); |
| } |
| |
| .terminal-header { |
| background: rgba(0, 143, 17, 0.5); |
| height: 30px; |
| border-radius: 8px 8px 0 0; |
| } |
| |
| .terminal-button { |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| margin-right: 5px; |
| } |
| |
| .terminal-content { |
| min-height: 200px; |
| font-family: 'Courier New', monospace; |
| font-size: 14px; |
| line-height: 1.5; |
| } |
| |
| .terminal-cursor { |
| display: inline-block; |
| width: 8px; |
| height: 16px; |
| background: #00ff41; |
| animation: blink 1s infinite; |
| vertical-align: middle; |
| } |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
| |
| .glitch-text { |
| position: relative; |
| } |
| |
| .glitch-text::before, |
| .glitch-text::after { |
| content: attr(data-text); |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .glitch-text::before { |
| left: 2px; |
| text-shadow: -2px 0 #ff00c1; |
| clip: rect(44px, 450px, 56px, 0); |
| animation: glitch-anim 5s infinite linear alternate-reverse; |
| } |
| |
| .glitch-text::after { |
| left: -2px; |
| text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1; |
| clip: rect(44px, 450px, 56px, 0); |
| animation: glitch-anim2 5s infinite linear alternate-reverse; |
| } |
| |
| @keyframes glitch-anim { |
| 0% { clip: rect(42px, 9999px, 44px, 0); } |
| 5% { clip: rect(12px, 9999px, 59px, 0); } |
| 10% { clip: rect(48px, 9999px, 29px, 0); } |
| 15% { clip: rect(42px, 9999px, 73px, 0); } |
| 20% { clip: rect(63px, 9999px, 27px, 0); } |
| 25% { clip: rect(34px, 9999px, 55px, 0); } |
| 30% { clip: rect(86px, 9999px, 73px, 0); } |
| 35% { clip: rect(20px, 9999px, 20px, 0); } |
| 40% { clip: rect(26px, 9999px, 60px, 0); } |
| 45% { clip: rect(25px, 9999px, 66px, 0); } |
| 50% { clip: rect(57px, 9999px, 98px, 0); } |
| 55% { clip: rect(5px, 9999px, 46px, 0); } |
| 60% { clip: rect(82px, 9999px, 31px, 0); } |
| 65% { clip: rect(54px, 9999px, 27px, 0); } |
| 70% { clip: rect(28px, 9999px, 99px, 0); } |
| 75% { clip: rect(45px, 9999px, 69px, 0); } |
| 80% { clip: rect(23px, 9999px, 85px, 0); } |
| 85% { clip: rect(1px, 9999px, 83px, 0); } |
| 90% { clip: rect(72px, 9999px, 11px, 0); } |
| 95% { clip: rect(60px, 9999px, 80px, 0); } |
| 100% { clip: rect(93px, 9999px, 50px, 0); } |
| } |
| |
| @keyframes glitch-anim2 { |
| 0% { clip: rect(65px, 9999px, 100px, 0); } |
| 5% { clip: rect(52px, 9999px, 74px, 0); } |
| 10% { clip: rect(79px, 9999px, 85px, 0); } |
| 15% { clip: rect(75px, 9999px, 5px, 0); } |
| 20% { clip: rect(67px, 9999px, 61px, 0); } |
| 25% { clip: rect(14px, 9999px, 79px, 0); } |
| 30% { clip: rect(1px, 9999px, 66px, 0); } |
| 35% { clip: rect(86px, 9999px, 30px, 0); } |
| 40% { clip: rect(23px, 9999px, 98px, 0); } |
| 45% { clip: rect(85px, 9999px, 72px, 0); } |
| 50% { clip: rect(71px, 9999px, 75px, 0); } |
| 55% { clip: rect(2px, 9999px, 48px, 0); } |
| 60% { clip: rect(30px, 9999px, 16px, 0); } |
| 65% { clip: rect(59px, 9999px, 50px, 0); } |
| 70% { clip: rect(41px, 9999px, 62px, 0); } |
| 75% { clip: rect(2px, 9999px, 82px, 0); } |
| 80% { clip: rect(47px, 9999px, 73px, 0); } |
| 85% { clip: rect(3px, 9999px, 27px, 0); } |
| 90% { clip: rect(26px, 9999px, 55px, 0); } |
| 95% { clip: rect(42px, 9999px, 97px, 0); } |
| 100% { clip: rect(38px, 9999px, 49px, 0); } |
| } |
| </style> |
| </head> |
| <body class="relative"> |
| |
| <div class="matrix-bg"></div> |
| |
| |
| <header class="container mx-auto px-4 py-6 flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <div class="w-12 h-12 rounded-full bg-cyber-accent flex items-center justify-center mr-3"> |
| <i class="fas fa-terminal text-cyber-primary text-xl"></i> |
| </div> |
| <h1 class="text-2xl md:text-3xl font-bold text-cyber-primary glitch-text" data-text="SFC PROJECTS"> |
| SFC PROJECTS |
| </h1> |
| </div> |
| |
| <nav class="flex space-x-6"> |
| <a href="#services" class="text-cyber-primary hover:text-white transition">Services</a> |
| <a href="#projects" class="text-cyber-primary hover:text-white transition">Projects</a> |
| <a href="#skills" class="text-cyber-primary hover:text-white transition">Skills</a> |
| <a href="#contact" class="text-cyber-primary hover:text-white transition">Contact</a> |
| </nav> |
| </header> |
| |
| |
| <section class="container mx-auto px-4 py-12 md:py-24 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-cyber-primary">КИБЕР-КОМАНДА</span> |
| <br>КОТОРАЯ ДЕЛАЕТ РЕЗУЛЬТАТ |
| </h2> |
| <p class="text-xl mb-6 text-gray-300"> |
| Мы не обещаем — мы делаем. Сайты, мобильные приложения, скрипты и автоматизация — мы пишем код, который решает задачи. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#contact" class="px-8 py-3 bg-cyber-primary text-cyber-dark font-bold rounded-lg hover:bg-cyber-light transition transform hover:scale-105"> |
| Напиши нам |
| </a> |
| <a href="#projects" class="px-8 py-3 border border-cyber-primary text-cyber-primary font-bold rounded-lg hover:bg-cyber-dark transition"> |
| Наши проекты |
| </a> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative"> |
| <div class="absolute -top-6 -left-6 w-full h-full border-2 border-cyber-primary rounded-lg animate-pulse-slow"></div> |
| <div class="relative cyber-border p-1 rounded-lg"> |
| <div class="bg-cyber-dark p-6 rounded-lg"> |
| <div class="terminal-window rounded-lg overflow-hidden"> |
| <div class="terminal-header flex items-center px-4"> |
| <div class="flex"> |
| <div class="terminal-button bg-red-500"></div> |
| <div class="terminal-button bg-yellow-500"></div> |
| <div class="terminal-button bg-green-500"></div> |
| </div> |
| </div> |
| <div class="terminal-content p-4"> |
| <p class="mb-2">> <span class="text-cyber-primary">SFC Projects</span> initializing...</p> |
| <p class="mb-2">> Loading cyber capabilities...</p> |
| <p class="mb-2">> <span class="text-cyber-primary">Status:</span> <span class="text-green-400">ACTIVE</span></p> |
| <p class="mb-2">> <span class="text-cyber-primary">Security:</span> <span class="text-green-400">MAX</span></p> |
| <p class="mb-2">> <span class="text-cyber-primary">Projects:</span> <span class="text-cyber-primary">50+</span></p> |
| <p class="mb-2">> <span class="text-cyber-primary">Clients:</span> <span class="text-cyber-primary">200+</span></p> |
| <p class="mt-4">> <span class="text-cyber-primary">Ready for action...</span></p> |
| <div class="terminal-cursor"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="services" class="container mx-auto px-4 py-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-cyber-primary"> |
| Что мы умеем |
| </h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="cyber-border p-6 rounded-lg bg-cyber-dark bg-opacity-50 hover:bg-opacity-70 transition"> |
| <div class="text-cyber-primary text-4xl mb-4"> |
| <i class="fas fa-globe"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">WEB-сайты с нуля</h3> |
| <p class="text-gray-300">Быстрые, надёжные, без дыр. Современные технологии и оптимизация под все устройства.</p> |
| </div> |
| |
| |
| <div class="cyber-border p-6 rounded-lg bg-cyber-dark bg-opacity-50 hover:bg-opacity-70 transition"> |
| <div class="text-cyber-primary text-4xl mb-4"> |
| <i class="fas fa-mobile-alt"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Мобильные приложения</h3> |
| <p class="text-gray-300">Для бизнеса и не только. iOS, Android, кроссплатформенные решения.</p> |
| </div> |
| |
| |
| <div class="cyber-border p-6 rounded-lg bg-cyber-dark bg-opacity-50 hover:bg-opacity-70 transition"> |
| <div class="text-cyber-primary text-4xl mb-4"> |
| <i class="fas fa-code"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Скрипты и решения</h3> |
| <p class="text-gray-300">От автоматизации до защиты. Повышаем эффективность ваших процессов.</p> |
| </div> |
| |
| |
| <div class="cyber-border p-6 rounded-lg bg-cyber-dark bg-opacity-50 hover:bg-opacity-70 transition"> |
| <div class="text-cyber-primary text-4xl mb-4"> |
| <i class="fas fa-user-secret"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Тёмные проекты</h3> |
| <p class="text-gray-300">Да, мы знаем, как работает Рунет. Конфиденциальные решения под ключ.</p> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="skills" class="container mx-auto px-4 py-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-cyber-primary"> |
| Наши навыки |
| </h2> |
| |
| <div class="max-w-3xl mx-auto"> |
| <div class="mb-8"> |
| <div class="flex justify-between mb-2"> |
| <span class="font-bold">Web Development</span> |
| <span>95%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-level" style="width: 95%"></div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex justify-between mb-2"> |
| <span class="font-bold">Mobile Apps</span> |
| <span>90%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-level" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex justify-between mb-2"> |
| <span class="font-bold">Automation & Scripts</span> |
| <span>98%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-level" style="width: 98%"></div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex justify-between mb-2"> |
| <span class="font-bold">Cybersecurity</span> |
| <span>92%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-level" style="width: 92%"></div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex justify-between mb-2"> |
| <span class="font-bold">Dark Web Expertise</span> |
| <span>85%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-level" style="width: 85%"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="projects" class="container mx-auto px-4 py-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-cyber-primary"> |
| Наши проекты |
| </h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="project-card cyber-border rounded-lg overflow-hidden"> |
| <div class="h-48 bg-gradient-to-r from-cyber-dark to-cyber-accent flex items-center justify-center"> |
| <i class="fas fa-shopping-cart text-5xl text-cyber-primary"></i> |
| </div> |
| <div class="p-6 bg-cyber-dark"> |
| <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3> |
| <p class="text-gray-300 mb-4">Полностью автоматизированная платформа для онлайн торговли с интеграцией платежных систем.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-cyber-accent text-xs rounded">React</span> |
| <span class="px-3 py-1 bg-cyber-accent text-xs rounded">Node.js</span> |
| <span class="px-3 py-1 bg-cyber-accent text-xs rounded">MongoDB</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="project-card cyber-border rounded-lg overflow-hidden"> |
| <div class="h-48 bg-gradient-to-r from-cyber-dark to-cyber-accent flex items-center justify-center"> |
| <i class="fas fa-mobile-alt text-5xl text-cyber-primary"></i> |
| </div> |
| <div class="p-6 bg-cyber-dark"> |
| <h3 class="text-xl font-bold mb-2">Banking App</h3> |
| <p class="text-gray-300 mb-4">Мобильное приложение для крупного банка с биометрической аутентификацией.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-cyber-accent text-xs rounded">Flutter</span> |
| <span class="px-3 py-1 bg-cyber-accent text-xs rounded">Firebase</span> |
| <span class="px-3 py-1 bg-cyber-accent text-xs rounded">Security</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="project-card cyber-border rounded-lg overflow-hidden"> |
| <div class="h-48 bg-gradient-to-r from-cyber-dark to-cyber-accent flex items-center justify-center"> |
| <i class="fas fa-robot text-5xl text-cyber-primary"></i> |
| </div> |
| <div class="p-6 bg-cyber-dark"> |
| <h3 class="text-xl font-bold mb-2">Automation Suite</h3> |
| <p class="text-gray-300 mb-4">Комплекс решений для автоматизации бизнес-процессов крупного предприятия.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-cyber-accent text-xs rounded">Python</span> |
| <span class="px-3 py-1 bg-cyber-accent text-xs rounded">AI</span> |
| <span class="px-3 py-1 bg-cyber-accent text-xs rounded">API</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="container mx-auto px-4 py-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-cyber-primary"> |
| Почему мы? |
| </h2> |
| |
| <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="text-center p-6 cyber-border rounded-lg bg-cyber-dark bg-opacity-50"> |
| <div class="text-4xl text-cyber-primary mb-4"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Гибкость</h3> |
| <p class="text-gray-300">Адаптируемся под любые задачи и сроки. Работаем с любыми технологиями.</p> |
| </div> |
| |
| <div class="text-center p-6 cyber-border rounded-lg bg-cyber-dark bg-opacity-50"> |
| <div class="text-4xl text-cyber-primary mb-4"> |
| <i class="fas fa-brain"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Опыт</h3> |
| <p class="text-gray-300">Глубокие знания в области кибербезопасности и разработки.</p> |
| </div> |
| |
| <div class="text-center p-6 cyber-border rounded-lg bg-cyber-dark bg-opacity-50"> |
| <div class="text-4xl text-cyber-primary mb-4"> |
| <i class="fas fa-tachometer-alt"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Скорость</h3> |
| <p class="text-gray-300">Быстрая реализация проектов без потери качества.</p> |
| </div> |
| </div> |
| |
| <div class="max-w-3xl mx-auto mt-16 text-center p-8 cyber-border rounded-lg bg-cyber-dark bg-opacity-50"> |
| <h3 class="text-2xl font-bold mb-4 text-cyber-primary">Мы не боимся сложных задач</h3> |
| <p class="text-xl mb-6">Готов к результату? Свяжитесь с нами и мы реализуем ваш проект на высшем уровне.</p> |
| <a href="#contact" class="px-8 py-3 bg-cyber-primary text-cyber-dark font-bold rounded-lg hover:bg-cyber-light transition transform hover:scale-105 inline-block"> |
| Напиши нам |
| </a> |
| </div> |
| </section> |
| |
| |
| <section id="contact" class="container mx-auto px-4 py-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-cyber-primary"> |
| Свяжитесь с нами |
| </h2> |
| |
| <div class="max-w-4xl mx-auto flex flex-col md:flex-row gap-12"> |
| <div class="md:w-1/2"> |
| <div class="cyber-border p-8 rounded-lg bg-cyber-dark"> |
| <h3 class="text-2xl font-bold mb-6 text-cyber-primary">Telegram</h3> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full bg-cyber-accent flex items-center justify-center mr-4"> |
| <i class="fab fa-telegram-plane text-cyber-primary text-xl"></i> |
| </div> |
| <div> |
| <p class="text-lg">Напишите нам</p> |
| <a href="https://t.me/SFCProjects" target="_blank" class="text-cyber-primary hover:underline"> |
| T.me/SFCProjects |
| </a> |
| </div> |
| </div> |
| <p class="mb-6 text-gray-300"> |
| Быстрая связь, консультации, обсуждение проектов. Мы онлайн 24/7. |
| </p> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-cyber-accent flex items-center justify-center mr-4"> |
| <i class="fas fa-lock text-cyber-primary text-xl"></i> |
| </div> |
| <div> |
| <p class="text-lg">Конфиденциальность</p> |
| <p class="text-gray-300">Все обсуждения защищены</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="cyber-border p-8 rounded-lg bg-cyber-dark"> |
| <h3 class="text-2xl font-bold mb-6 text-cyber-primary">Email</h3> |
| <div class="flex items-center mb-6"> |
| <div class="w-12 h-12 rounded-full bg-cyber-accent flex items-center justify-center mr-4"> |
| <i class="fas fa-envelope text-cyber-primary text-xl"></i> |
| </div> |
| <div> |
| <p class="text-lg">Напишите нам</p> |
| <a href="mailto:contact@sfcprojects.ru" class="text-cyber-primary hover:underline"> |
| contact@sfcprojects.ru |
| </a> |
| </div> |
| </div> |
| <p class="mb-6 text-gray-300"> |
| Для официальных запросов и документооборота. |
| </p> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-cyber-accent flex items-center justify-center mr-4"> |
| <i class="fas fa-shield-alt text-cyber-primary text-xl"></i> |
| </div> |
| <div> |
| <p class="text-lg">Безопасность</p> |
| <p class="text-gray-300">Шифрование всех сообщений</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="container mx-auto px-4 py-12 border-t border-cyber-accent border-opacity-30"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-cyber-accent flex items-center justify-center mr-3"> |
| <i class="fas fa-terminal text-cyber-primary"></i> |
| </div> |
| <h2 class="text-xl font-bold text-cyber-primary">SFC PROJECTS</h2> |
| </div> |
| <p class="mt-2 text-gray-400">Кибер-команда, которая делает результат</p> |
| </div> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-cyber-primary hover:text-white transition"> |
| <i class="fab fa-telegram-plane text-2xl"></i> |
| </a> |
| <a href="#" class="text-cyber-primary hover:text-white transition"> |
| <i class="fab fa-github text-2xl"></i> |
| </a> |
| <a href="#" class="text-cyber-primary hover:text-white transition"> |
| <i class="fab fa-twitter text-2xl"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="mt-8 text-center text-gray-500 text-sm"> |
| <p>© 2023 SFC PROJECTS. Все права защищены. Мы пишем код, который решает задачи.</p> |
| </div> |
| </footer> |
| |
| |
| <div class="fixed bottom-8 right-8 z-50"> |
| <a href="https://t.me/SFCProjects" target="_blank" class="w-16 h-16 rounded-full bg-cyber-primary flex items-center justify-center shadow-lg hover:bg-cyber-light transition transform hover:scale-110 animate-float"> |
| <i class="fab fa-telegram-plane text-cyber-dark text-2xl"></i> |
| </a> |
| </div> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const skillBars = document.querySelectorAll('.skill-level'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| const width = entry.target.style.width; |
| entry.target.style.width = '0'; |
| setTimeout(() => { |
| entry.target.style.transition = 'width 2s ease-in-out'; |
| entry.target.style.width = width; |
| }, 300); |
| } |
| }); |
| }, { threshold: 0.5 }); |
| |
| skillBars.forEach(bar => { |
| observer.observe(bar); |
| }); |
| |
| |
| const terminalLines = document.querySelectorAll('.terminal-content p'); |
| let currentLine = 0; |
| |
| function typeLine() { |
| if (currentLine < terminalLines.length) { |
| const line = terminalLines[currentLine]; |
| const text = line.textContent; |
| line.textContent = ''; |
| line.style.display = 'block'; |
| |
| let i = 0; |
| const typing = setInterval(() => { |
| if (i < text.length) { |
| line.textContent += text.charAt(i); |
| i++; |
| } else { |
| clearInterval(typing); |
| currentLine++; |
| setTimeout(typeLine, 500); |
| } |
| }, 50); |
| } |
| } |
| |
| |
| terminalLines.forEach(line => { |
| line.style.display = 'none'; |
| }); |
| |
| |
| setTimeout(typeLine, 1000); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DanilKZ/sfc123" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
