Spaces:
Running
Running
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crucible Labs - Where Steel Meets Stars</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Reset and Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| /* Steel's Colors */ | |
| --steel-primary: #D4A574; | |
| --steel-secondary: #B8860B; | |
| --steel-accent: #FFD700; | |
| --steel-dark: #8B6914; | |
| /* Tarek's Colors */ | |
| --tarek-primary: #00CED1; | |
| --tarek-secondary: #4682B4; | |
| --tarek-accent: #00FFFF; | |
| --tarek-dark: #191970; | |
| /* Shared Colors */ | |
| --bg-primary: #0A0A0F; | |
| --bg-secondary: #141420; | |
| --text-primary: #FFFFFF; | |
| --text-secondary: #B0B0B0; | |
| --border-glow: rgba(255, 255, 255, 0.1); | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* Main Container */ | |
| .main-container { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| /* Animated Background */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 50%, rgba(212, 165, 116, 0.1) 0%, transparent 40%), | |
| radial-gradient(circle at 80% 50%, rgba(0, 206, 209, 0.1) 0%, transparent 40%); | |
| pointer-events: none; | |
| z-index: -2; | |
| } | |
| /* Particle Animation Background */ | |
| .particles { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .particle { | |
| position: absolute; | |
| width: 2px; | |
| height: 2px; | |
| border-radius: 50%; | |
| opacity: 0; | |
| animation: float 15s infinite; | |
| } | |
| .particle.steel { | |
| background: var(--steel-accent); | |
| box-shadow: 0 0 6px var(--steel-accent); | |
| } | |
| .particle.tarek { | |
| background: var(--tarek-accent); | |
| box-shadow: 0 0 6px var(--tarek-accent); | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| opacity: 0; | |
| transform: translateY(100vh) scale(0); | |
| } | |
| 10% { | |
| opacity: 1; | |
| transform: translateY(90vh) scale(1); | |
| } | |
| 90% { | |
| opacity: 1; | |
| transform: translateY(10vh) scale(1); | |
| } | |
| } | |
| /* Header Styles */ | |
| .header { | |
| position: relative; | |
| padding: 60px 0; | |
| text-align: center; | |
| background: linear-gradient(180deg, rgba(20, 20, 32, 0.8) 0%, rgba(10, 10, 15, 0.8) 100%); | |
| border-bottom: 2px solid transparent; | |
| background-clip: padding-box; | |
| overflow: hidden; | |
| } | |
| .header::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--steel-primary) 0%, var(--tarek-primary) 100%); | |
| animation: borderFlow 3s ease-in-out infinite; | |
| } | |
| @keyframes borderFlow { | |
| 0%, 100% { transform: translateX(-100%); } | |
| 50% { transform: translateX(100%); } | |
| } | |
| .logo-container { | |
| display: inline-block; | |
| position: relative; | |
| margin-bottom: 30px; | |
| } | |
| .logo { | |
| font-family: 'Bebas Neue', cursive; | |
| font-size: 5rem; | |
| font-weight: 900; | |
| letter-spacing: 0.1em; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .logo-steel { | |
| background: linear-gradient(135deg, var(--steel-primary) 0%, var(--steel-accent) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: 0 0 30px rgba(212, 165, 116, 0.5); | |
| } | |
| .logo-tarek { | |
| background: linear-gradient(135deg, var(--tarek-primary) 0%, var(--tarek-accent) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: 0 0 30px rgba(0, 206, 209, 0.5); | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| color: var(--text-secondary); | |
| margin-top: 10px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| } | |
| /* Navigation */ | |
| .nav { | |
| position: sticky; | |
| top: 0; | |
| background: rgba(10, 10, 15, 0.95); | |
| backdrop-filter: blur(10px); | |
| padding: 20px 0; | |
| z-index: 1000; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .nav-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| display: flex; | |
| justify-content: center; | |
| gap: 40px; | |
| flex-wrap: wrap; | |
| } | |
| .nav-link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| padding: 5px 10px; | |
| } | |
| .nav-link::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--steel-primary) 0%, var(--tarek-primary) 100%); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover { | |
| color: var(--text-primary); | |
| } | |
| .nav-link:hover::before { | |
| width: 100%; | |
| } | |
| /* Container */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 60px 20px; | |
| } | |
| /* Section Styles */ | |
| .section { | |
| margin-bottom: 100px; | |
| opacity: 0; | |
| transform: translateY(30px); | |
| animation: fadeInUp 0.8s ease forwards; | |
| } | |
| @keyframes fadeInUp { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .section-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 3rem; | |
| margin-bottom: 40px; | |
| text-align: center; | |
| position: relative; | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| .section-title span { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .section-title::before, | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| width: 100px; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3)); | |
| } | |
| .section-title::before { | |
| left: 20%; | |
| } | |
| .section-title::after { | |
| right: 20%; | |
| background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent); | |
| } | |
| /* About Section */ | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| } | |
| .about-text { | |
| font-size: 1.1rem; | |
| line-height: 1.8; | |
| color: var(--text-secondary); | |
| } | |
| .about-visual { | |
| position: relative; | |
| height: 400px; | |
| background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .fusion-orb { | |
| width: 200px; | |
| height: 200px; | |
| position: relative; | |
| animation: pulse 4s ease-in-out infinite; | |
| } | |
| .fusion-orb::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 50%; | |
| height: 100%; | |
| background: radial-gradient(circle at left center, var(--steel-primary) 0%, transparent 70%); | |
| filter: blur(20px); | |
| } | |
| .fusion-orb::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 50%; | |
| height: 100%; | |
| background: radial-gradient(circle at right center, var(--tarek-primary) 0%, transparent 70%); | |
| filter: blur(20px); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| /* Models Section */ | |
| .models-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 30px; | |
| margin-top: 40px; | |
| } | |
| .model-card { | |
| background: rgba(20, 20, 32, 0.6); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| padding: 30px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .model-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary)); | |
| border-radius: 15px; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: -1; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .model-card:hover::before { | |
| opacity: 1; | |
| } | |
| .model-card-inner { | |
| position: relative; | |
| background: var(--bg-secondary); | |
| border-radius: 13px; | |
| padding: 25px; | |
| height: 100%; | |
| } | |
| .model-name { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| background: linear-gradient(135deg, var(--steel-accent), var(--tarek-accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .model-description { | |
| color: var(--text-secondary); | |
| margin-bottom: 20px; | |
| line-height: 1.6; | |
| } | |
| .model-stats { | |
| display: flex; | |
| gap: 20px; | |
| margin-top: auto; | |
| } | |
| .stat { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .stat-value { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.2rem; | |
| color: var(--text-primary); | |
| } | |
| .stat-label { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| } | |
| /* Team Section */ | |
| .team-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 60px; | |
| margin-top: 60px; | |
| } | |
| .team-member { | |
| position: relative; | |
| padding: 40px; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| /* Steel's Card Style */ | |
| .team-member.steel { | |
| background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(139, 105, 20, 0.05) 100%); | |
| border: 2px solid var(--steel-dark); | |
| box-shadow: 0 0 30px rgba(212, 165, 116, 0.2); | |
| } | |
| .team-member.steel::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%); | |
| animation: rotate 20s linear infinite; | |
| } | |
| /* Tarek's Card Style */ | |
| .team-member.tarek { | |
| background: linear-gradient(135deg, rgba(0, 206, 209, 0.1) 0%, rgba(25, 25, 112, 0.05) 100%); | |
| border: 2px solid var(--tarek-dark); | |
| box-shadow: 0 0 30px rgba(0, 206, 209, 0.2); | |
| } | |
| .team-member.tarek::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="50" cy="50" r="2" fill="rgba(0,255,255,0.5)"/><circle cx="150" cy="150" r="2" fill="rgba(0,255,255,0.5)"/><circle cx="100" cy="100" r="3" fill="rgba(0,206,209,0.7)"/></svg>') repeat; | |
| animation: twinkle 3s ease-in-out infinite; | |
| } | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: 0.3; } | |
| 50% { opacity: 1; } | |
| } | |
| .member-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .member-avatar { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| margin-bottom: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: 'Bebas Neue', cursive; | |
| font-size: 3rem; | |
| } | |
| .member-avatar img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .steel .member-avatar { | |
| background: linear-gradient(135deg, var(--steel-primary), var(--steel-dark)); | |
| box-shadow: 0 0 30px rgba(212, 165, 116, 0.5); | |
| color: var(--bg-primary); | |
| } | |
| .tarek .member-avatar { | |
| background: linear-gradient(135deg, var(--tarek-primary), var(--tarek-dark)); | |
| box-shadow: 0 0 30px rgba(0, 206, 209, 0.5); | |
| color: var(--bg-primary); | |
| } | |
| .member-name { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| } | |
| .steel .member-name { | |
| color: var(--steel-accent); | |
| text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); | |
| } | |
| .tarek .member-name { | |
| color: var(--tarek-accent); | |
| text-shadow: 0 0 20px rgba(0, 255, 255, 0.5); | |
| } | |
| .member-role { | |
| color: var(--text-secondary); | |
| margin-bottom: 20px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| .member-bio { | |
| line-height: 1.8; | |
| color: var(--text-secondary); | |
| margin-bottom: 20px; | |
| } | |
| .member-links { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .member-link { | |
| padding: 8px 20px; | |
| border-radius: 25px; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| } | |
| .steel .member-link { | |
| background: rgba(212, 165, 116, 0.2); | |
| color: var(--steel-accent); | |
| border: 1px solid var(--steel-primary); | |
| } | |
| .steel .member-link:hover { | |
| background: rgba(212, 165, 116, 0.3); | |
| box-shadow: 0 0 15px rgba(212, 165, 116, 0.5); | |
| } | |
| .tarek .member-link { | |
| background: rgba(0, 206, 209, 0.2); | |
| color: var(--tarek-accent); | |
| border: 1px solid var(--tarek-primary); | |
| } | |
| .tarek .member-link:hover { | |
| background: rgba(0, 206, 209, 0.3); | |
| box-shadow: 0 0 15px rgba(0, 206, 209, 0.5); | |
| } | |
| /* Community Section */ | |
| .community-content { | |
| text-align: center; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .community-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 40px; | |
| margin: 60px 0; | |
| } | |
| .community-stat { | |
| padding: 30px; | |
| background: rgba(20, 20, 32, 0.6); | |
| border-radius: 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .community-stat:hover { | |
| transform: translateY(-5px); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .stat-number { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 3rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .join-button { | |
| display: inline-block; | |
| padding: 15px 40px; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary)); | |
| border-radius: 50px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| margin-top: 40px; | |
| } | |
| .join-button:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 30px rgba(255, 255, 255, 0.3); | |
| } | |
| .join-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transition: left 0.5s ease; | |
| } | |
| .join-button:hover::before { | |
| left: 100%; | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: rgba(10, 10, 15, 0.9); | |
| padding: 40px 0; | |
| text-align: center; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| margin-top: 100px; | |
| } | |
| .footer-text { | |
| color: var(--text-secondary); | |
| margin-bottom: 20px; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 30px; | |
| flex-wrap: wrap; | |
| } | |
| .footer-link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-link:hover { | |
| color: var(--text-primary); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .logo { | |
| font-size: 3rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| gap: 40px; | |
| } | |
| .models-grid, | |
| .team-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .community-stats { | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .nav-container { | |
| gap: 20px; | |
| } | |
| } | |
| /* Featured Models Banner */ | |
| .featured-banner { | |
| background: linear-gradient(135deg, rgba(212, 165, 116, 0.1), rgba(0, 206, 209, 0.1)); | |
| border: 2px solid transparent; | |
| background-clip: padding-box; | |
| border-radius: 20px; | |
| padding: 40px; | |
| margin-bottom: 60px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .featured-banner::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 20px; | |
| padding: 2px; | |
| background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| } | |
| .featured-title { | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 2rem; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| background: linear-gradient(135deg, var(--steel-accent), var(--tarek-accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="main-container"> | |
| <!-- Particle Background --> | |
| <div class="particles" id="particles"></div> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="logo-container"> | |
| <h1 class="logo"> | |
| <span class="logo-steel">CRUCIBLE</span> | |
| <span class="logo-tarek">LABS</span> | |
| </h1> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container"> | |
| <!-- About Section --> | |
| <section id="about" class="section"> | |
| <h2 class="section-title"><span>About Crucible Labs</span></h2> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <p>Welcome to Crucible Labs, where the belief is that the best ideas come from the crucible of collaboration.</p> | |
| </div> | |
| <div class="about-visual"> | |
| <div class="fusion-orb"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Models --> | |
| <section id="featured" class="section"> | |
| <div class="featured-banner"> | |
| <h3 class="featured-title">🔥 Featured Experiments 🌟</h3> | |
| <div class="models-grid"> | |
| <!--<div class="model-card"> | |
| <div class="model-card-inner"> | |
| <h4 class="model-name"> </h4> | |
| <p class="model-description"> </p> | |
| <div class="model-stats"> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Parameters</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label"> </span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value">12K</span> | |
| <span class="stat-label">Downloads</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-card"> | |
| <div class="model-card-inner"> | |
| <h4 class="model-name"> </h4> | |
| <p class="model-description"> </p> | |
| <div class="model-stats"> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Parameters</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Rating</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Downloads</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div>--> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Models Section --> | |
| <section id="models" class="section"> | |
| <h2 class="section-title"><span>Our Models</span></h2> | |
| <div class="models-grid"> | |
| <!--<div class="model-card"> | |
| <div class="model-card-inner"> | |
| <h4 class="model-name"> </h4> | |
| <p class="model-description"> </p> | |
| <div class="model-stats"> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Parameters</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Rating</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Downloads</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-card"> | |
| <div class="model-card-inner"> | |
| <h4 class="model-name"> </h4> | |
| <p class="model-description"> </p> | |
| <div class="model-stats"> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Parameters</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Rating</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Downloads</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-card"> | |
| <div class="model-card-inner"> | |
| <h4 class="model-name"> </h4> | |
| <p class="model-description"> </p> | |
| <div class="model-stats"> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label"> </span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label">Rating</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-value"> </span> | |
| <span class="stat-label"> </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div>--> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section id="team" class="section"> | |
| <h2 class="section-title"><span>Team</span></h2> | |
| <div class="team-grid"> | |
| <div class="team-member steel"> | |
| <div class="member-content"> | |
| <div class="member-avatar"> | |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/64545af5ec40bbbd01242ca6/0DigVMV0L5YCnyluoEOiX.jpeg" alt="Steelskull"> | |
| </div> | |
| <h3 class="member-name">Steelskull</h3> | |
| <p class="member-role">Paramancer</p> | |
| <p class="member-bio"> | |
| </p> | |
| <div class="member-links"> | |
| <a href="https://huggingface.co/Steelskull" class="member-link" target="_blank">HuggingFace</a> | |
| <a href="https://ko-fi.com/steelskull" class="member-link" target="_blank">Ko-fi</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-member tarek"> | |
| <div class="member-content"> | |
| <div class="member-avatar">T</div> | |
| <h3 class="member-name">Tarek07</h3> | |
| <p class="member-role">Mad-Lad</p> | |
| <p class="member-bio"> | |
| </p> | |
| <div class="member-links"> | |
| <a href="https://huggingface.co/Tarek07" class="member-link" target="_blank">HuggingFace</a> | |
| <a href="https://ko-fi.com/tarek07" class="member-link" target="_blank">Ko-fi</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <p class="footer-text">© 2025 Crucible Labs. Forged with passion, powered by innovation.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Create particle effect | |
| function createParticles() { | |
| const particlesContainer = document.getElementById('particles'); | |
| const particleCount = 50; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = `particle ${Math.random() > 0.5 ? 'steel' : 'tarek'}`; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.animationDelay = Math.random() * 15 + 's'; | |
| particle.style.animationDuration = (15 + Math.random() * 10) + 's'; | |
| particlesContainer.appendChild(particle); | |
| } | |
| } | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Intersection Observer for fade-in animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -100px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.animationDelay = '0.2s'; | |
| entry.target.style.animationPlayState = 'running'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all sections | |
| document.querySelectorAll('.section').forEach(section => { | |
| section.style.animationPlayState = 'paused'; | |
| observer.observe(section); | |
| }); | |
| // Initialize particles | |
| createParticles(); | |
| // Add hover effect to model cards | |
| document.querySelectorAll('.model-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-10px) scale(1.02)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0) scale(1)'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |