Un code par alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

2 February 2025

Cartes de profondeur de parallaxe

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NOVA | Future is Now</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.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=Orbitron:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
  <div class="noise"></div>
  
  <nav>
    <div class="logo">
      <span>NOVA</span>
      <div class="logo-dot"></div>
    </div>
    <div class="nav-links">
      <a href="#" class="nav-link">Home</a>
      <a href="#" class="nav-link">Features</a>
      <a href="#" class="nav-link">Technology</a>
      <a href="#" class="nav-link">About</a>
    </div>
    <button class="cta-button nav-cta">Contact Us</button>
    <div class="menu-toggle">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </nav>

<main>
    <section class="hero">
      <div class="hero-content">
        <h1 class="glitch" data-text="Future is Now">Future is Now</h1>
        <p class="hero-subtitle">Embrace the technology of tomorrow, today</p>
        <div class="hero-cta">
          <button class="cta-button primary">Explore Now</button>
          <button class="cta-button secondary">Learn More</button>
        </div>
      </div>
      <div class="hero-visual">
        <div class="sphere">
          <div class="rings">
            <div class="ring"></div>
            <div class="ring"></div>
            <div class="ring"></div>
          </div>
        </div>
      </div>
    </section>

<section class="features">
      <h2 class="section-title">Advanced Features</h2>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">
            <i class="fas fa-microchip"></i>
          </div>
          <h3>Quantum Processing</h3>
          <p>Next-generation computing architecture with unprecedented processing power.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <i class="fas fa-brain"></i>
          </div>
          <h3>Neural Interface</h3>
          <p>Direct mind-to-machine connection for intuitive control and communication.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <i class="fas fa-shield-alt"></i>
          </div>
          <h3>Advanced Security</h3>
          <p>Multi-layered protection systems with biometric authentication.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <i class="fas fa-vr-cardboard"></i>
          </div>
          <h3>Immersive Reality</h3>
          <p>Blend physical and digital worlds with holographic projections.</p>
        </div>
      </div>
    </section>

<section class="tech-showcase">
      <div class="tech-content">
        <h2 class="section-title">Revolutionary Technology</h2>
        <p>Our breakthrough innovations are reshaping industries and empowering a new generation of creators, thinkers, and builders.</p>
        <ul class="tech-list">
          <li><span class="tech-highlight">Fusion Core™</span> - Clean energy generation</li>
          <li><span class="tech-highlight">NeuraSense™</span> - Emotion recognition AI</li>
          <li><span class="tech-highlight">QuantumNet™</span> - Unhackable communication</li>
          <li><span class="tech-highlight">BioMatrix™</span> - Advanced material science</li>
        </ul>
        <button class="cta-button tech-cta">Explore Technology</button>
      </div>
      <div class="tech-visual">
        <div class="hex-grid">
          <div class="hex"></div>
          <div class="hex"></div>
          <div class="hex"></div>
          <div class="hex"></div>
          <div class="hex"></div>
          <div class="hex"></div>
          <div class="hex"></div>
        </div>
      </div>
    </section>

<section class="testimonials">
      <h2 class="section-title">What Innovators Say</h2>
      <div class="testimonial-slider">
        <div class="testimonial">
          <div class="testimonial-content">
            <p>"NOVA has revolutionized how we approach artificial intelligence. Their systems think and adapt like nothing we've seen before."</p>
            <div class="testimonial-author">
              <div class="author-image"></div>
              <div class="author-info">
                <h4>Dr. Elena Moreau</h4>
                <span>Chief AI Researcher, TechFuture Institute</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="cta-section">
      <div class="cta-container">
        <h2>Ready to Step into the Future?</h2>
        <p>Join the pioneers shaping tomorrow's world with groundbreaking technology.</p>
        <form class="cta-form">
          <input type="email" placeholder="Enter your email">
          <button type="submit" class="cta-button">Get Early Access</button>
        </form>
      </div>
    </section>
  </main>

<footer>
    <div class="footer-content">
      <div class="footer-logo">
        <span>NOVA</span>
        <div class="logo-dot"></div>
      </div>
      <div class="footer-links">
        <div class="footer-column">
          <h3>Company</h3>
          <a href="#">About Us</a>
          <a href="#">Careers</a>
          <a href="#">Partners</a>
          <a href="#">News</a>
        </div>
        <div class="footer-column">
          <h3>Resources</h3>
          <a href="#">Documentation</a>
          <a href="#">Support</a>
          <a href="#">Community</a>
          <a href="#">Blog</a>
        </div>
        <div class="footer-column">
          <h3>Legal</h3>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Security</a>
          <a href="#">Compliance</a>
        </div>
        <div class="footer-column">
          <h3>Connect</h3>
          <div class="social-icons">
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-github"></i></a>
            <a href="#"><i class="fab fa-discord"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p>© 2023 NOVA Technologies. All rights reserved.</p>
    </div>
  </footer>

CSS

:root {
  --primary-color: #00f0ff;
  --secondary-color: #0077ff;
  --accent-color: #ff00aa;
  --bg-color: #050518;
  --text-color: #ffffff;
  --card-bg: rgba(13, 14, 45, 0.7);
  --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  --font-main: 'Roboto', sans-serif;
  --font-display: 'Orbitron', sans-serif;
  --transition-speed: 0.3s;
  --glow-shadow: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

/* Noise texture overlay */
.noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEaElEQVR4nO2a24tVVRzHP1PalKVUZnQxrYwibgyVCBEVdKNLFyq6SEWvEV1eLErLLpQYZU9ZlEIPURZCoPYfmGRJZIJaVpCVRZcxu0zN+Mvy4Strc9bsfS7n7DPnGJwvLM7hXNZvf85v3X7rB2PHjv3nMR5YA7QDO4DfgQFgGHgg1sBhYDuwGngFmFrOLo/6AtgMXAHKwNfAZuB94B1gPrAQeA9YHX5fAGwCWoEvgG7gZ+BP4GR4ZkXkOA18VyN9A3wK5IFVwOvAm8B7wMfAZ8DXwN6QZn8P34rAHzHOZcBSYDlwICF98wADxHa2G1gUd7aGo15yAOy3UWYZyEPAWGCSMSZrjBkvItLs/t9ojLEqMsT0oQK/EXSJaM7n859OmjTpTl/5LcAm4G5gV4JntKBiwLmHtfV/iLwxMu/evbtr+fLlCx2IF4HbgL4EIM58DF2zzSlyCtgLbA19YlcaeRxdSE7RZ8dOmTJlpwNzFbAwgYdmNyIl4B+3O7VuFiqD7du3bxSRGvfcCmBmSq9YtLLX6Wm5rqCc7vj9AMz1Ffw1ULWHvhVBJ8ZRRbTTtNqCyiYiEXJzjDHfOlCvFQoF3w89BNQleMFOOdFXJlRTGP3JkMvlul0QLgPNEYE2O+FzAqgkZbkgJb+t1xjzuQP1KXC1A3KL0y0NkLf/azG2G/DH2q5zRER2RIA0lsEryuIscOr28MBTka5nA4JQGGOKOkEi0gCsdCAeBubmcrmPFMT9lbaTxnR8m5HRGZoL3OTANAFNK1as2GKM2eNADf5fvKEcRdkXsVkJrM/n863GmL0O2MlqjnJxvOGfbA9o2VeHHKXaVDsQF4CGvkj9kQmgbYxJtIw2Q8Rcu9FQTkFVuxG5qBSl2LPq0KFlQ/O4Tmc9BXcKeA7oBe6qFiDlSJuqWlgRHnIe2AhMjHm+Dvg1sKSG6FytXM9n2zcgZU2nv1wLnpJlbABSBpa64DsAvBBxbN4YawP6I9wbxNg+Y8y3IrJFRCa4Z24JIJwMU3XDavPGjJkwB3Rx68Q2FeY7HTfj4CLQEfLtlVCBFKMaQs82YEu7YI0BU69UBHqCLn3k6tQJsVgaVHTDAZoXBPJu4FTI90pQjUGkxwFpCQvMZQjK2b6+vlZjzBER6QlLH28NgbZzzk8oETkT2NDe7u7ulrARcjLsKb2e3FMLHtEgLANPR5UUtwDXFYvFfSKyP3JIvLq3t7dRRNpCZW73NsPYVRYRuQCsCz7fZhXwTNT3s2fPnhQRgdsQ0lFGRLxiE0lLEREpGmNOeE+2iMgjUd8zxmRF5I6InddXxSMjyHW/S7B9xQWjNTXG1KmICxhRF21OKDp9XYS7QN+YPP9REI/Gg/CbtxBxXrfmzD9hNQViVxNwJ6L3QRwwN8nfCL8jOQlDo62oJzS3eYfGOyaXB1nnHa1cqxXIt5LqmkFdE4I/LfzwqqWoVG5z3YGfJSv8eLyK/zUci8h1FKtQE/5W+HUAAAAASUVORK5CYII=');
  opacity: 0.03;
  pointer-events: none;
  z-index: 100;
}

/* Navigation */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 5%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(5, 5, 24, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

nav.scrolled {
  padding: 1rem 5%;
  background: rgba(5, 5, 24, 0.95);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  color: var(--primary-color);
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
}

.logo-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-color);
  border-radius: 50%;
  margin-left: 4px;
  box-shadow: 0 0 10px var(--accent-color);
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  position: relative;
  transition: color var(--transition-speed);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: width var(--transition-speed);
}

.nav-link:hover {
  color: var(--primary-color);
}

.nav-link:hover::after {
  width: 100%;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 2px;
  background-color: var(--text-color);
  transition: all 0.3s ease;
}

/* Button styles */
.cta-button {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-speed);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.5s ease;
  z-index: -1;
}

.cta-button:hover::before {
  left: 0;
}

.primary {
  background: var(--gradient-primary);
  color: var(--text-color);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.nav-cta {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0.5rem 1.2rem;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.nav-cta:hover {
  background: var(--primary-color);
  color: var(--bg-color);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

/* Hero section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  margin-top: 2rem;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 119, 255, 0.1), transparent 70%);
  z-index: -1;
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

h1 {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: var(--glow-shadow);
  position: relative;
}

/* Glitch effect */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00aa;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: 2px 0 #00f0ff;
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0%, 100% { clip-path: inset(0 0 98% 0); }
  20% { clip-path: inset(33% 0 33% 0); }
  40% { clip-path: inset(50% 0 20% 0); }
  60% { clip-path: inset(70% 0 1% 0); }
  80% { clip-path: inset(80% 0 5% 0); }
}

@keyframes glitch-anim-2 {
  0%, 100% { clip-path: inset(0 0 78% 0); }
  20% { clip-path: inset(15% 0 40% 0); }
  40% { clip-path: inset(63% 0 36% 0); }
  60% { clip-path: inset(44% 0 14% 0); }
  80% { clip-path: inset(3% 0 91% 0); }
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.hero-cta {
  display: flex;
  gap: 1.5rem;
}

.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 3D Sphere with Rings */
.sphere {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 240, 255, 0.8), rgba(0, 119, 255, 0.2));
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 60px rgba(0, 240, 255, 0.6);
  animation: float 8s ease-in-out infinite;
}

.rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring {
  position: absolute;
  border: 2px solid rgba(0, 240, 255, 0.6);
  border-radius: 50%;
  animation: rotate 20s linear infinite;
}

.ring:nth-child(1) {
  width: 240px;
  height: 240px;
  border-color: rgba(0, 240, 255, 0.4);
  animation-duration: 30s;
}

.ring:nth-child(2) {
  width: 320px;
  height: 320px;
  border-color: rgba(0, 119, 255, 0.3);
  animation-direction: reverse;
  animation-duration: 40s;
}

.ring:nth-child(3) {
  width: 420px;
  height: 420px;
  border-color: rgba(255, 0, 170, 0.2);
  animation-duration: 50s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Features section */
.features {
  padding: 7rem 5%;
  background: linear-gradient(to bottom, var(--bg-color), #080830);
}

.section-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 25%;
  width: 50%;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 3px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 2rem;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  border: 1px solid rgba(0, 240, 255, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(0, 240, 255, 0.05), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 240, 255, 0.2);
}

.feature-card:hover::before {
  transform: translateX(100%);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.feature-card p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* Tech showcase section */
.tech-showcase {
  padding: 7rem 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, #080830, #0a0a42);
  position: relative;
  overflow: hidden;
}

.tech-content {
  flex: 1;
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.tech-content p {
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
}

.tech-list {
  list-style: none;
  margin-bottom: 2.5rem;
}

.tech-list li {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 25px;
  color: rgba(255, 255, 255, 0.8);
}

.tech-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

.tech-highlight {
  color: var(--primary-color);
  font-weight: bold;
  position: relative;
}

.tech-highlight::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--primary-color);
  opacity: 0.5;
}

.tech-cta {
  background: var(--gradient-primary);
  color: var(--text-color);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.tech-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  transform: rotate(30deg);
}

.hex {
  width: 80px;
  height: 80px;
  background: rgba(0, 240, 255, 0.1);
  position: relative;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: all 0.5s ease;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.hex:nth-child(odd) {
  animation: pulse 3s infinite alternate;
}

..hex:nth-child(odd) {
  animation: pulse 3s infinite alternate;
}

.hex:nth-child(even) {
  animation: pulse 4s 1s infinite alternate;
}

@keyframes pulse {
  0% {
    background: rgba(0, 240, 255, 0.1);
    transform: scale(1);
  }
  100% {
    background: rgba(0, 119, 255, 0.3);
    transform: scale(1.1);
  }
}

/* Testimonials section */
.testimonials {
  padding: 7rem 5%;
  background: linear-gradient(to bottom, #0a0a42, var(--bg-color));
  position: relative;
}

.testimonial-slider {
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.testimonial {
  background: var(--card-bg);
  border-radius: 15px;
  padding: 3rem;
  border: 1px solid rgba(0, 240, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.testimonial::before {
  content: '"';
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 8rem;
  font-family: serif;
  color: rgba(0, 240, 255, 0.1);
  line-height: 1;
}

.testimonial-content p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient-primary);
  overflow: hidden;
}

.author-info h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.author-info span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* CTA Section */
.cta-section {
  padding: 7rem 5%;
  background: linear-gradient(135deg, rgba(5, 5, 24, 0.9), rgba(10, 10, 66, 0.9));
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="%230077ff" stroke-width="0.5" fill="none" opacity="0.3"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

.cta-container {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.cta-container h2 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-color);
}

.cta-container p {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.cta-form {
  display: flex;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

.cta-form input {
  flex: 1;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: rgba(5, 5, 24, 0.5);
  color: var(--text-color);
  font-family: var(--font-main);
  font-size: 1rem;
  transition: all var(--transition-speed);
}

.cta-form input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.cta-form button {
  background: var(--gradient-primary);
  color: var(--text-color);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

/* Footer */
footer {
  background: rgba(3, 3, 15, 0.9);
  color: var(--text-color);
  padding: 5rem 5% 2rem;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.footer-column h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.footer-column a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 0.8rem;
  transition: color var(--transition-speed);
}

.footer-column a:hover {
  color: var(--primary-color);
}

.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  transition: all var(--transition-speed);
}

.social-icons a:hover {
  background: rgba(0, 240, 255, 0.1);
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

/* Responsive styles */
@media (max-width: 1200px) {
  h1 {
    font-size: 3.5rem;
  }
  
  .hero {
    flex-direction: column;
    text-align: center;
    gap: 3rem;
  }
  
  .hero-cta {
    justify-content: center;
  }
  
  .tech-showcase {
    flex-direction: column;
    gap: 4rem;
    text-align: center;
  }
  
  .tech-content {
    max-width: 100%;
  }
  
  .tech-list li {
    padding-left: 0;
  }
  
  .tech-list li::before {
    display: none;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
  }
  
  .nav-links, .nav-cta {
    display: none;
  }
  
  .menu-toggle {
    display: flex;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .feature-card {
    padding: 1.5rem;
  }
  
  .cta-form {
    flex-direction: column;
  }
  
  .footer-content {
    flex-direction: column;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.5rem;
  }
  
  .hero-cta {
    flex-direction: column;
    gap: 1rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .testimonial {
    padding: 2rem;
  }
  
  .testimonial-content p {
    font-size: 1rem;
  }
}

JS

// Mobile menu toggle
  const menuToggle = document.querySelector('.menu-toggle');
  const navLinks = document.querySelector('.nav-links');
  
  menuToggle.addEventListener('click', function() {
    menuToggle.classList.toggle('active');
    
    if (menuToggle.classList.contains('active')) {
      navLinks.style.display = 'flex';
      navLinks.style.flexDirection = 'column';
      navLinks.style.position = 'absolute';
      navLinks.style.top = '100%';
      navLinks.style.left = '0';
      navLinks.style.width = '100%';
      navLinks.style.padding = '1rem';
      navLinks.style.backgroundColor = 'rgba(5, 5, 24, 0.95)';
      navLinks.style.backdropFilter = 'blur(10px)';
      navLinks.style.textAlign = 'center';
      
      // Animate menu bars
      const bars = document.querySelectorAll('.bar');
      bars[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
      bars[1].style.opacity = '0';
      bars[2].style.transform = 'rotate(-45deg) translate(5px, -5px)';
    } else {
      navLinks.style.display = 'none';
      
      // Reset menu bars
      const bars = document.querySelectorAll('.bar');
      bars[0].style.transform = 'none';
      bars[1].style.opacity = '1';
      bars[2].style.transform = 'none';
    }
  });

// Smooth scrolling for navigation links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      
      const targetId = this.getAttribute('href');
      if (targetId === '#') return;
      
      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
        const offsetPosition = targetPosition - navHeight;
        
        window.scrollTo({
          top: offsetPosition,
          behavior: 'smooth'
        });
        
        // Close mobile menu if open
        if (menuToggle.classList.contains('active')) {
          menuToggle.click();
        }
      }
    });
  });

// Parallax effect for hero section
  const heroVisual = document.querySelector('.hero-visual');
  const rings = document.querySelectorAll('.ring');
  
  window.addEventListener('mousemove', function(e) {
    const x = e.clientX / window.innerWidth;
    const y = e.clientY / window.innerHeight;
    
    heroVisual.style.transform = `translate(${x * 20 - 10}px, ${y * 20 - 10}px)`;
    
    rings.forEach((ring, index) => {
      const factor = (index + 1) * 5;
      ring.style.transform = `translate(${x * factor - factor/2}px, ${y * factor - factor/2}px)`;
    });
  });

// Intersection Observer for fade-in animations
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };
  
  const observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target);
      }
    });
  }, observerOptions);
  
  // Add fade-in animation to sections
  const sections = document.querySelectorAll('section:not(.hero)');
  sections.forEach(section => {
    section.style.opacity = '0';
    section.style.transform = 'translateY(30px)';
    section.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
    observer.observe(section);
  });
  
  // Add visible class to show sections
  document.querySelectorAll('.visible').forEach(el => {
    el.style.opacity = '1';
    el.style.transform = 'translateY(0)';
  });

// Feature cards hover effect
  const featureCards = document.querySelectorAll('.feature-card');
  
  featureCards.forEach(card => {
    card.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-10px)';
      this.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 240, 255, 0.2)';
    });
    
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0)';
      this.style.boxShadow = 'none';
    });
  });

// Form submission (prevent default and show confirmation)
  const ctaForm = document.querySelector('.cta-form');
  
  if (ctaForm) {
    ctaForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const emailInput = this.querySelector('input[type="email"]');
      const email = emailInput.value.trim();
      
      if (isValidEmail(email)) {
        // Create and show confirmation message
        const confirmationMsg = document.createElement('p');
        confirmationMsg.textContent = 'Thank you! You\'ll be notified about early access.';
        confirmationMsg.style.color = 'var(--primary-color)';
        confirmationMsg.style.marginTop = '1rem';
        
        // Replace form with confirmation
        this.innerHTML = '';
        this.appendChild(confirmationMsg);
      } else {
        // Show error for invalid email
        emailInput.style.borderColor = 'red';
        emailInput.style.boxShadow = '0 0 10px rgba(255, 0, 0, 0.3)';
        
        // Reset error styling after 3 seconds
        setTimeout(() => {
          emailInput.style.borderColor = 'rgba(0, 240, 255, 0.3)';
          emailInput.style.boxShadow = 'none';
        }, 3000);
      }
    });
  }

// Simple email validation function
  function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

// Initialize animations for elements that should be visible on load
  setTimeout(() => {
    document.querySelectorAll('section:not(.hero)').forEach(section => {
      const rect = section.getBoundingClientRect();
      if (rect.top < window.innerHeight) {
        section.classList.add('visible');
      }
    });
  }, 100);
});

Un code par alejandrokundrah

Recommandé

Un code par yefersonsotohenao

Un code par fastclass383

Cartes de profondeur de parallaxe

HTML

CSS

JS

Recommandé

Un code par yefersonsotohenao

Un code par fastclass383

Cartes de profondeur de parallaxe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS