--secondary-color: #ff00ff; --accent-color: #00ffcc; --dark-color: #0F0A1E; /* File 2 darker version */ --light-color: #f3f3f9; /* File 2 lighter version */ --glass-bg: rgba(255,255,255,0.09); --glass-bg-hover: rgba(255,255,255,0.15); --glass-border: rgba(255,255,255,0.15); } html { scroll-padding-top: 80px; scroll-behavior: smooth; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background: var(--dark-color); color: var(--light-color); overflow-x: hidden; position: relative; } h1, h2, h3, h4, h5, h6 { font-family: 'Exo 2', sans-serif; } .text-gradient { /* From FIRST file (almost identical to second) */ background: linear-gradient(90deg,var(--primary-color),var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; /* Important for correct rendering */ } .glassmorphism { /* From FIRST file (more general, but sticky nav uses it too) */ background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid var(--glass-border); box-shadow: 0 8px 32px 0 rgba(0,0,0,0.3); transition: all 0.3s ease; } .glassmorphism:hover { /* Hover from SECOND file, applied here */ background: rgba(255, 255, 255, 0.15); box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.5); transform: translateY(-5px); } /* Blob / Psychedelic BG (From Second file) */ .psychedelic-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.25; } .blob { position: absolute; border-radius: 50%; filter: blur(70px); /* FIRST file value */ opacity: 0.35; /* FIRST file value */ animation: float 8s ease-in-out infinite; } .blob-1{top:15%;left:5%;width:350px;height:350px;background:var(--secondary-color);} /* FIRST file positions/sizes */ .blob-2{top:40%;right:15%;width:450px;height:450px;background:var(--primary-color); animation-delay: 1.5s;} /* FIRST file positions/sizes */ .blob-3{bottom:5%;left:25%;width:300px;height:300px;background:var(--accent-color); animation-delay: 3s;} /* FIRST file positions/sizes */ @keyframes float {0%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,-40px) scale(1.03)}66%{transform:translate(-15px,15px) scale(0.97)}100%{transform:translate(0,0) scale(1)}} /* FIRST file animation */ /* Megamenu CSS (From FIRST file) */ .has-mega-menu { position: relative; } .mega-menu-container { position: absolute; top:100%; left:50%; transform: translateX(-50%); width: 720px; background: rgba(15, 10, 30, 0.9); /* ÚJ: Sötét háttér 90% átlátszatlansággal */ backdrop-filter: blur(8px); /* Opcionálisan csökkentheted a blur-t is */ -webkit-backdrop-filter: blur(8px); border-radius:16px; border:1px solid var(--glass-border); box-shadow:0 8px 32px 0 rgba(0,0,0,0.3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.5rem 2rem; z-index: 40; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.25s cubic-bezier(0.4, 0.2, 0.6, 1); } .has-mega-menu:hover .mega-menu-container, .has-mega-menu:focus-within .mega-menu-container { visibility: visible; opacity: 1; pointer-events: auto; } .mega-menu-item { padding: 0.9rem 0.9rem; border-radius: 12px; transition: background .2s; display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer; } .mega-menu-item a { /* Link style for megamenu items */ color: var(--light-color); display: block; text-decoration: none; /* Ensure no underline */ } .mega-menu-item:hover { background: var(--glass-bg-hover); } .mega-menu-title { font-family: 'Exo 2',sans-serif; font-size: 1.07rem; font-weight: 700; color: var(--light-color); display: block; /* Ensures description goes below */ margin-bottom: 0.2rem; } .mega-menu-desc { font-size: 0.87rem; color: #bbb; display: block; } .mega-menu-icon { width: 2.4rem; height: 2.4rem; background: linear-gradient(120deg,var(--primary-color),var(--secondary-color)); display: flex; align-items: center; justify-content: center; border-radius: 80px; color: #fff; font-size: 1.3rem; flex-shrink: 0; box-shadow: 0 2px 10px rgba(102,0,255,0.15); } .mega-menu-indicator { margin-left: 0.25rem; transition: transform 0.3s ease;} .has-mega-menu:hover .mega-menu-indicator, .has-mega-menu:focus-within .mega-menu-indicator { transform: rotate(180deg); } /* Nav Link Style (From FIRST file) */ .nav-link { position: relative; padding-bottom: 5px; margin: 0 15px; color: var(--light-color); font-weight: 500; transition: all 0.3s ease; text-decoration: none; /* Explicit no underline */ } .nav-link::after { content: ''; position: absolute; width: 0%; height: 2px; bottom: 0; left: 0; background: linear-gradient(90deg, var(--accent-color), var(--secondary-color)); transition: all 0.3s ease; } .nav-link:hover { color: var(--accent-color); } .nav-link:hover::after { width: 100%; } /* Mobile menu and Accordion (From FIRST file) */ .mobile-menu { position: fixed; top: 0; right: -100%; /* Initially hidden */ width: 250px; height: 100vh; background: rgba(27, 20, 51, 0.98); /* #1b1433 more transparent version */ backdrop-filter: blur(10px); z-index: 100; transition: right 0.3s ease-in-out; /* Transition controlled by JS */ padding: 50px 20px; /* Override: FIRST file padding */ overflow-y: auto; /* Scroll for long menus */ } /* No .open class needed, JS directly sets 'right' style */ .close-menu { /* FIRST file style */ position: absolute; top: 1.5rem; /* 24px */ right: 1.5rem; /* 24px */ cursor: pointer; } .close-menu i { font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */ color: white; } .accordion-menu { margin-left: 0.7rem; height: 0; overflow: hidden; transition: height .33s cubic-bezier(.4,0,.2,1); } .accordion-menu.active { height: auto; margin-top: 0.2rem; margin-bottom: 0.2rem; } .mobile-submenu-item { padding: 0.4rem 0; opacity: 0.88; transition: opacity .15s; } .mobile-submenu-item a { color:var(--light-color); text-decoration: none;} /* Added no underline */ .mobile-submenu-item:hover {opacity:1;} .mobile-menu-toggle {cursor:pointer; display: flex; align-items: center; justify-content: space-between; width: 100%;} .toggle-icon { transition: transform 0.3s;} .toggle-icon.active { transform: rotate(180deg);} /* Other styles from SECOND file (liquid button, service card, wavy divider, floating, particles, benefits, form, footer wave, matrix, cookie banner etc.) */ .bg-gradient { background: linear-gradient(125deg, #6600ff, #ff00ff, #00ffcc, #ff6600); background-size: 400% 400%; animation: gradient 15s ease infinite; } @keyframes gradient { /* Second file gradient animation */ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .liquid-button { position: relative; z-index: 1; overflow: hidden; padding: 1rem 2.5rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: white; text-align: center; transition: all 0.3s ease; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); background-size: 200% 100%; animation: gradient-shift 3s ease infinite; display: inline-block; /* Added */ text-decoration: none; /* Added */ } .liquid-button::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); z-index: -1; transform: translateX(-100%); transition: all 0.3s ease; } .liquid-button:hover::before { transform: translateX(0); } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .service-card { height: 100%; transition: all 0.3s ease; overflow: hidden; position: relative; } .service-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to bottom right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100% ); transform: rotate(45deg); transition: all 0.3s ease; opacity: 0; } .service-card:hover::after { left: 100%; top: 100%; opacity: 1; } .wavy-divider { position: relative; height: 70px; width: 100%; overflow: hidden; } .wavy-divider svg { position: absolute; width: 100%; height: 100%; } .wavy-divider path { animation: wave 15s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; fill: rgba(102, 0, 255, 0.2); } /* Fill from second file */ @keyframes wave { 0% { d: path("M 0 30 C 180 10, 360 40, 540 30 C 720 20, 900 40, 1080 30 L 1080 70 L 0 70 Z"); } 50% { d: path("M 0 30 C 180 50, 360 20, 540 30 C 720 40, 900 10, 1080 30 L 1080 70 L 0 70 Z"); } 100% { d: path("M 0 30 C 180 10, 360 40, 540 30 C 720 20, 900 40, 1080 30 L 1080 70 L 0 70 Z"); } } .floating { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } #hero { position: relative; overflow: hidden; } #particles-js { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .benefits-item { border-radius: 16px; transition: all 0.3s ease; } .benefits-item:hover { transform: translateY(-8px); } .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-20px) translateX(-50%); } 60% { transform: translateY(-10px) translateX(-50%); } } .glow { text-shadow: 0 0 10px rgba(0, 255, 204, 0.5), 0 0 20px rgba(0, 255, 204, 0.3), 0 0 30px rgba(0, 255, 204, 0.1); } /* Mobile menu toggle icon (From FIRST file, integrated with second file logic) */ .menu-toggle { /* position: fixed; top: 20px; right: 20px; */ /* Removed, positioned within header */ z-index: 101; /* Higher than mobile menu */ cursor: pointer; display: none; /* Initially hidden */ } .menu-toggle i { /* Style for the 'i' element */ font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */ color: white; } @media (max-width: 768px) { .desktop-nav { display: none; } .menu-toggle { display: block; } /* Show on mobile */ .hero-content h1 { font-size: 2.5rem; } .hero-content p { font-size: 1rem; } /* Ensure megamenu container hidden on mobile */ .mega-menu-container { display: none; } } /* Form styling (From Second file) */ .form-input { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 12px; padding: 12px 16px; transition: all 0.3s ease; width: 100%;} /* Added width */ .form-input:focus { background: rgba(255, 255, 255, 0.15); border-color: var(--accent-color); outline: none; box-shadow: 0 0 15px rgba(0, 255, 204, 0.3); } .form-input::placeholder { color: rgba(255, 255, 255, 0.6); } /* Footer wave effect (From Second file) */ .footer-wave { position: absolute; top: -70px; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .footer-wave svg { position: relative; display: block; width: calc(100% + 1.3px); height: 70px; } .footer-wave .shape-fill { fill: rgba(102, 0, 255, 0.2); } /* Second file color */ /* Matrix container styles (From Second file) */ .matrix-container { position: relative; overflow: hidden; } .matrix-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.2; } .matrix-content { position: relative; z-index: 1; padding: 25px; } .matrix-title { font-size: 28px; font-weight: 700; margin-bottom: 20px; color: var(--accent-color); } .matrix-features { list-style: none; padding: 0; margin-bottom: 20px; } .matrix-features li { margin-bottom: 12px; display: flex; align-items: flex-start; } .matrix-features li:before { content: "✓"; color: var(--accent-color); margin-right: 10px; font-weight: bold; } .matrix-icon { width: 50px; height: 50px; background: var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } /* Cookie banner styles (From Second file) */ .cookie-banner { position: fixed; bottom: -200%; left: 0; width: 100%; background-color: rgba(15, 10, 30, 0.95); backdrop-filter: blur(10px); z-index: 9999; padding: 20px; box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.1); visibility: hidden; opacity: 0; transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s; } .cookie-banner.show { bottom: 0; visibility: visible; opacity: 1; } .cookie-content { max-width: 1200px; margin: 0 auto; color: var(--light-color); } .cookie-content h3 { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; margin-bottom: 15px; color: var(--accent-color); } .cookie-categories { margin: 20px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; } .cookie-category { background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .cookie-category label { font-weight: 600; margin-left: 10px; } .category-description { margin-top: 8px; font-size: 0.85rem; opacity: 0.8; } .cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .cookie-button { padding: 10px 20px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: none; font-family: 'Poppins', sans-serif; } .accept-button { background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); color: white; } .save-button { background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); } .reject-button { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.2); } .cookie-button:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .cookie-links { margin-top: 15px; display: flex; gap: 20px; } .cookie-link { color: var(--accent-color); text-decoration: underline; font-size: 0.85rem; } @media (max-width: 768px) { .cookie-buttons { flex-direction: column; } .cookie-button { width: 100%; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinning-logo:hover { animation: spin 5s linear infinite; } /* Hero section typing effect styles (From Second file) */ .myforge-3d { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 rgba(255, 255, 255, 0.15), 0 3px 0 rgba(255, 255, 255, 0.1), 0 4px 5px rgba(0, 0, 0, 0.5), 0 8px 10px rgba(0, 0, 0, 0.25); transition: all 0.3s ease; } .typing-effect-container { position: relative; min-height: 300px; overflow: hidden; width: 100%; height: 100%; } @media (min-width: 768px) { .typing-effect-container { min-height: 360px; } } .typing-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(22, 27, 34, 0.95); font-family: 'Consolas', 'Monaco', monospace; color: rgba(0, 255, 0, 0.8); white-space: pre; line-height: 1.5; text-align: left; display: flex; flex-direction: column; box-sizing: border-box; } .ide-header { display: flex; background: rgba(36, 41, 46, 1); padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; color: #e1e4e8; width: 100%; box-sizing: border-box; } @media (min-width: 768px) { .ide-header { padding: 8px 10px; font-size: 13px; } } .ide-header .file-name { font-weight: bold; margin-right: auto; } .ide-header .controls { display: flex; gap: 15px; } .ide-header .controls span { opacity: 0.7; } .ide-content { padding: 8px 10px; flex: 1; font-size: 12px; line-height: 1.5; width: 100%; box-sizing: border-box; height: calc(100% - 36px); overflow: hidden; position: relative; } @media (min-width: 768px) { .ide-content { padding: 10px 15px; font-size: 14px; line-height: 1.6; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .blinking-cursor { animation: blink 1s infinite; } .matrix-content { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; box-sizing: border-box; } .matrix-icon { margin: 0 auto 15px auto; } .matrix-title { margin-bottom: 15px; text-align: center; } .matrix-features { padding-left: 0; list-style-position: inside; text-align: center; max-width: 80%; margin: 0 auto; } /* Benefits section gradient background fix (From Second file) */ #elonyok.bg-gradient { /* Specific selector */ background: linear-gradient(-45deg, #0f172a, #164e63, #1e3a8a, #115e59, #3b0764, #0f766e, #312e81, #134e4a); background-size: 400% 400%; animation: gradient 15s ease infinite; } #elonyok .text-white, #elonyok .text-gray-200, #elonyok .text-2xl, #elonyok .text-4xl { text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); } #elonyok .glassmorphism { /* Specific selector for benefits */ background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36); } #elonyok .glassmorphism:hover { transform: translateY(-5px); box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45); } #elonyok .glow { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5); } /* --- Ezt keresd meg vagy hozd létre az index_en.html

MyForge Labs

Where digital solutions take shape, with the visual and technological experience of the future!

myforge-services.js
MyForgeEditView
|

Premium Digital Solutions

  • Ultra-fast web hosting on SSD storage
  • 99.9% uptime guarantee
  • Advanced security solutions and SSL
  • Personalized development and support
  • Unique visual experience on all interfaces
  • Outstanding performance optimization
Explore Get in Touch

Cutting-Edge Business Technologies

Discover our services that leverage the latest technologies to create a unique digital presence for your business.

Web Development

Development of modern, responsive websites and webshops that not only look good but also effectively serve your business goals.

  • Responsive design for all devices
  • Performance-optimized development
  • Use of modern technologies

AI Integration

Integrating artificial intelligence solutions into websites and applications that provide a new level of user experience.

  • Chatbot implementation
  • AI-based SEO
  • Predictive analytics

Mobile Apps

Development of native and cross-platform mobile applications for iOS and Android platforms, perfectly tailored to your business needs.

  • Native app development
  • Cross-platform solutions
  • User-friendly UI/UX

Automation

Automating business processes to increase efficiency and reduce costs using modern technologies.

  • Process automation
  • Workflow optimization
  • Real-time monitoring

Security

Complex security solutions to protect digital assets and data in the ever-changing cyberspace.

  • Security audit
  • Penetration testing
  • DDoS protection

Data Management

Implementing efficient database management and big data solutions that help your business gain valuable insights.

  • Database optimization
  • Big Data analysis
  • GDPR compliance

Our Innovative Technologies

  • Application of cutting-edge technologies
  • Cloud-based infrastructure and scalability
  • Agile development methodology
  • DevOps based continuous integration
  • Performance-oriented development
  • Our unique innovation lab

Continuous innovation, long-term values

MyForge Labs focuses not only on present technologies but also on the future. Our philosophy is constant development and preparation for tomorrow's challenges, ensuring our clients always stay one step ahead of the competition.

For businesses of all sizes

  • Packages tailored for micro and small businesses
  • Complex solutions for medium-sized enterprises
  • Flexible development models optimized for startups

Proactive Planning

  • Continuous innovation and trend monitoring
  • Adaptive solutions capable of evolving
  • Creation of technology roadmaps

Why MyForge Labs?

Through our unique approach and innovative mindset, we deliver outstanding value to our clients.

Customized Solutions

We tailor every project to the client's unique needs to create maximum value.

Modern Technologies

We use the latest and most innovative technologies in our projects for future-proofing.

Transparent Communication

Continuous and clear communication throughout every phase of the project, keeping you informed.

Ongoing Support

We provide necessary support and maintenance even after project completion to ensure everything runs smoothly.

Measurable Progress

An ROI-focused approach ensuring digital investments yield measurable business benefits.

Competitive Pricing

Thanks to our efficient operations, we offer top-quality services at affordable prices with transparent pricing.

Get in touch with us!

Contact us to discuss how we can help your business grow digitally.

Address

1134 Budapest, Dévai utca 11.

Hungary

Send us a message