A Code by alejandrokundrah

Open In Editor Publish Your Code Need a Website?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MADE - Progressive Web Development Studio</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
  
  <div class="background-container">
    <div class="floating-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
      <div class="shape shape-5"></div>
    </div>
    <div class="gradient-overlay"></div>
  </div>

<nav class="nav">
    <div class="nav-logo">
      <span class="logo-text">MADE</span>
    </div>
    <div class="nav-menu">
      <a href="#projects" class="nav-link">Projects</a>
      <a href="#studio" class="nav-link">Studio</a>
      <a href="#contact" class="nav-link">Contact</a>
    </div>
  </nav>

<div class="social-links">
    <a href="#" class="social-link" aria-label="Instagram">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
      </svg>
    </a>
    <a href="#" class="social-link" aria-label="Twitter">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
      </svg>
    </a>
    <a href="#" class="social-link" aria-label="LinkedIn">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
      </svg>
    </a>
    <a href="#" class="social-link" aria-label="Dribbble">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 0C5.374 0 0 5.373 0 12s5.374 12 12 12 12-5.373 12-12S18.626 0 12 0zm9.568 7.375c.32 1.031.496 2.131.496 3.275 0 .102-.003.203-.009.305-.447-.106-4.089-.892-7.768.35-.019-.043-.037-.089-.058-.133-.338-.746-.703-1.495-1.084-2.222 4.019-1.69 5.91-4.08 6.423-1.575zM12 2.147c2.763 0 5.285 1.12 7.103 2.926-.447.395-2.053 1.794-5.793 3.283C11.66 5.842 9.87 3.424 9.562 2.969 10.34 2.375 11.136 2.147 12 2.147z"/>
      </svg>
    </a>
  </div>

<main class="main">
    <div class="hero-container">
      
      <div class="decorative-lines">
        <div class="line line-1"></div>
        <div class="line line-2"></div>
        <div class="line line-3"></div>
      </div>

<div class="hero-logo">
        <div class="logo-3d">
          <span class="logo-letter" data-letter="M">M</span>
          <span class="logo-letter" data-letter="A">A</span>
          <span class="logo-letter" data-letter="D">D</span>
          <span class="logo-letter" data-letter="E">E</span>
        </div>
        <div class="logo-reflection"></div>
      </div>

<div class="hero-subtitle">
        <div class="subtitle-line"></div>
        <span class="subtitle-text">A PROGRESSIVE WEB-DEVELOPMENT STUDIO</span>
        <div class="subtitle-line"></div>
      </div>

<div class="hero-cta">
        <button class="cta-button">
          <span class="cta-text">Explore Our Work</span>
          <div class="cta-arrow">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M7 17L17 7M17 7H7M17 7V17"/>
            </svg>
          </div>
        </button>
      </div>
    </div>
  </main>

<div class="scroll-indicator">
    <div class="scroll-line"></div>
    <div class="scroll-dot"></div>
    <span class="scroll-text">SCROLL</span>
  </div>

<div class="custom-cursor">
    <div class="cursor-dot"></div>
    <div class="cursor-ring"></div>
  </div>

CSS

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
  --accent-gold: #fbbf24;
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-gold: linear-gradient(135deg, #fbbf24, #f59e0b);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  cursor: none;
}

/* Background Effects */
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.floating-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: var(--gradient-primary);
  opacity: 0.03;
  animation: float 20s infinite ease-in-out;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.shape-2 {
  width: 200px;
  height: 200px;
  top: 60%;
  right: 20%;
  animation-delay: -5s;
}

.shape-3 {
  width: 150px;
  height: 150px;
  bottom: 20%;
  left: 30%;
  animation-delay: -10s;
}

.shape-4 {
  width: 100px;
  height: 100px;
  top: 30%;
  right: 10%;
  animation-delay: -15s;
}

.shape-5 {
  width: 250px;
  height: 250px;
  bottom: 10%;
  right: 40%;
  animation-delay: -7s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-30px) rotate(120deg);
  }
  66% {
    transform: translateY(30px) rotate(240deg);
  }
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(10, 10, 10, 0.8) 100%);
}

/* Custom Cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

.cursor-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.1s ease;
}

.cursor-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

/* Navigation */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
  z-index: 1000;
  backdrop-filter: blur(20px);
  background: rgba(10, 10, 10, 0.8);
  border-bottom: 1px solid var(--border-color);
}

.nav-logo .logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-menu {
  display: flex;
  gap: 2.5rem;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  position: relative;
}

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

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

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

/* Social Links */
.social-links {
  position: fixed;
  left: 3rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 1000;
}

.social-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(20px);
  background: rgba(17, 17, 17, 0.5);
}

.social-link svg {
  width: 18px;
  height: 18px;
}

.social-link:hover {
  color: var(--text-primary);
  border-color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.1);
  transform: scale(1.1);
}

/* Main Content */
.main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3rem;
}

.hero-container {
  text-align: center;
  position: relative;
  max-width: 1200px;
  width: 100%;
}

/* Decorative Lines */
.decorative-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.line {
  position: absolute;
  background: var(--gradient-primary);
  opacity: 0.1;
}

.line-1 {
  width: 2px;
  height: 200px;
  top: -100px;
  left: 20%;
  animation: lineFloat 8s infinite ease-in-out;
}

.line-2 {
  width: 100px;
  height: 2px;
  top: 50%;
  right: 15%;
  animation: lineFloat 6s infinite ease-in-out reverse;
}

.line-3 {
  width: 2px;
  height: 150px;
  bottom: -75px;
  right: 25%;
  animation: lineFloat 10s infinite ease-in-out;
}

@keyframes lineFloat {
  0%, 100% {
    opacity: 0.1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.3;
    transform: translateY(-20px);
  }
}

/* Hero Logo */
.hero-logo {
  position: relative;
  margin-bottom: 3rem;
}

.logo-3d {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(4rem, 15vw, 12rem);
  font-weight: 700;
  line-height: 0.9;
  display: flex;
  justify-content: center;
  gap: 0.1em;
}

.logo-letter {
  display: inline-block;
  position: relative;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 
    0 10px 20px rgba(99, 102, 241, 0.3),
    0 20px 40px rgba(99, 102, 241, 0.2);
  transform-style: preserve-3d;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: letterReveal 1s ease-out forwards;
  animation-delay: calc(var(--i) * 0.1s);
  opacity: 0;
  transform: translateY(100px) rotateX(-90deg);
}

.logo-letter:nth-child(1) { --i: 0; }
.logo-letter:nth-child(2) { --i: 1; }
.logo-letter:nth-child(3) { --i: 2; }
.logo-letter:nth-child(4) { --i: 3; }

@keyframes letterReveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.logo-letter:hover {
  transform: translateY(-10px) rotateX(15deg) scale(1.05);
  text-shadow: 
    0 15px 30px rgba(99, 102, 241, 0.5),
    0 30px 60px rgba(99, 102, 241, 0.3);
}

.logo-reflection {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(99, 102, 241, 0.1) 0%,
    transparent 100%
  );
  transform: scaleY(-1);
  opacity: 0.3;
  pointer-events: none;
}

/* Hero Subtitle */
.hero-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 4rem;
  opacity: 0;
  animation: fadeInUp 1s ease-out 0.8s forwards;
}

.subtitle-line {
  width: 60px;
  height: 1px;
  background: var(--gradient-gold);
}

.subtitle-text {
  font-size: 0.85rem;
  letter-spacing: 3px;
  color: var(--text-secondary);
  font-weight: 300;
  white-space: nowrap;
}

/* Hero CTA */
.hero-cta {
  opacity: 0;
  animation: fadeInUp 1s ease-out 1.2s forwards;
}

.cta-button {
  background: transparent;
  border: 2px solid var(--accent-primary);
  color: var(--text-primary);
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 50px;
  cursor: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  background: rgba(17, 17, 17, 0.3);
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  transition: left 0.4s ease;
  z-index: -1;
}

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

.cta-button:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.3);
}

.cta-arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.cta-button:hover .cta-arrow {
  transform: translateX(5px) translateY(-5px);
}

/* Scroll Indicator */
.scroll-indicator {
  position: fixed;
  right: 3rem;
  bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 1000;
}

.scroll-line {
  width: 2px;
  height: 60px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--accent-primary) 50%,
    transparent 100%
  );
  position: relative;
}

.scroll-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  animation: scrollPulse 2s infinite ease-in-out;
}

.scroll-text {
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--text-secondary);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-weight: 300;
}

@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .nav {
    padding: 1.5rem 2rem;
  }

.social-links {
    left: 2rem;
    gap: 1rem;
  }

.social-link {
    width: 40px;
    height: 40px;
  }

.main {
    padding: 0 2rem;
  }

.hero-subtitle {
    gap: 1rem;
  }

.subtitle-line {
    width: 40px;
  }

.scroll-indicator {
    right: 2rem;
    bottom: 2rem;
  }
}

@media (max-width: 768px) {
  .nav {
    padding: 1rem 1.5rem;
  }

.nav-menu {
    gap: 1.5rem;
  }

.nav-link {
    font-size: 0.9rem;
  }

.social-links {
    display: none;
  }

.main {
    padding: 0 1.5rem;
  }

.hero-subtitle {
    flex-direction: column;
    gap: 1rem;
  }

.subtitle-text {
    font-size: 0.75rem;
    letter-spacing: 2px;
  }

.cta-button {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
  }

.scroll-indicator {
    right: 1.5rem;
    bottom: 1.5rem;
    scale: 0.8;
  }

.decorative-lines {
    display: none;
  }
}

@media (max-width: 480px) {
  .nav {
    padding: 1rem;
  }

.nav-menu {
    gap: 1rem;
  }

.main {
    padding: 0 1rem;
  }

.hero-container {
    margin-top: 2rem;
  }

.logo-3d {
    gap: 0.05em;
  }

.hero-subtitle {
    margin-bottom: 3rem;
  }

.subtitle-line {
    width: 30px;
  }

.subtitle-text {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
  }
}

JS

document.addEventListener('DOMContentLoaded', function() {
  // Custom Cursor
  const cursor = document.querySelector('.custom-cursor');
  const cursorDot = document.querySelector('.cursor-dot');
  const cursorRing = document.querySelector('.cursor-ring');

let mouseX = 0;
  let mouseY = 0;
  let cursorX = 0;
  let cursorY = 0;

document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

function animateCursor() {
    const speed = 0.2;
    cursorX += (mouseX - cursorX) * speed;
    cursorY += (mouseY - cursorY) * speed;

cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
    requestAnimationFrame(animateCursor);
  }
  animateCursor();

// Cursor hover effects
  const hoverElements = document.querySelectorAll('a, button, .nav-link, .social-link, .logo-letter');

hoverElements.forEach(element => {
    element.addEventListener('mouseenter', () => {
      cursorRing.style.transform = 'translate(-50%, -50%) scale(2)';
      cursorRing.style.borderColor = '#6366f1';
      cursorDot.style.transform = 'translate(-50%, -50%) scale(0)';
    });

element.addEventListener('mouseleave', () => {
      cursorRing.style.transform = 'translate(-50%, -50%) scale(1)';
      cursorRing.style.borderColor = 'rgba(255, 255, 255, 0.5)';
      cursorDot.style.transform = 'translate(-50%, -50%) scale(1)';
    });
  });

// Logo letter hover effects
  const logoLetters = document.querySelectorAll('.logo-letter');

logoLetters.forEach((letter, index) => {
    letter.addEventListener('mouseenter', () => {
      // Add glitch effect
      letter.style.textShadow = `
        2px 0 #ff0000,
        -2px 0 #00ffff,
        0 2px #ffff00,
        0 -2px #ff00ff,
        0 10px 20px rgba(99, 102, 241, 0.5),
        0 20px 40px rgba(99, 102, 241, 0.3)
      `;

// Animate other letters
      logoLetters.forEach((otherLetter, otherIndex) => {
        if (otherIndex !== index) {
          otherLetter.style.transform = `translateY(${Math.random() * 10 - 5}px) rotateX(${Math.random() * 20 - 10}deg)`;
          otherLetter.style.opacity = '0.7';
        }
      });
    });

letter.addEventListener('mouseleave', () => {
      letter.style.textShadow = `
        0 10px 20px rgba(99, 102, 241, 0.3),
        0 20px 40px rgba(99, 102, 241, 0.2)
      `;

// Reset other letters
      logoLetters.forEach((otherLetter, otherIndex) => {
        if (otherIndex !== index) {
          otherLetter.style.transform = 'translateY(0) rotateX(0deg)';
          otherLetter.style.opacity = '1';
        }
      });
    });
  });

// Parallax scrolling effect
  let ticking = false;

function updateParallax() {
    const scrolled = window.pageYOffset;
    const parallaxElements = document.querySelectorAll('.floating-shapes .shape');

parallaxElements.forEach((element, index) => {
      const speed = 0.5 + (index * 0.1);
      const yPos = -(scrolled * speed);
      element.style.transform = `translateY(${yPos}px) rotate(${scrolled * 0.1}deg)`;
    });

ticking = false;
  }

function requestTick() {
    if (!ticking) {
      requestAnimationFrame(updateParallax);
      ticking = true;
    }
  }

window.addEventListener('scroll', requestTick);

// Smooth scrolling for navigation links
  document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', (e) => {
      const href = link.getAttribute('href');
      if (href.startsWith('#')) {
        e.preventDefault();
        const target = document.querySelector(href);
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      }
    });
  });

// CTA button click effect
  const ctaButton = document.querySelector('.cta-button');

ctaButton.addEventListener('click', (e) => {
    // Create ripple effect
    const ripple = document.createElement('div');
    const rect = ctaButton.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = e.clientX - rect.left - size / 2;
    const y = e.clientY - rect.top - size / 2;

ripple.style.cssText = `
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: scale(0);
      animation: ripple 0.6s linear;
      width: ${size}px;
      height: ${size}px;
      left: ${x}px;
      top: ${y}px;
      pointer-events: none;
    `;

ctaButton.appendChild(ripple);

setTimeout(() => {
      ripple.remove();
    }, 600);
  });

// Add CSS for ripple animation
  const style = document.createElement('style');
  style.textContent = `
    @keyframes ripple {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }
  `;
  document.head.appendChild(style);

// Intersection Observer for scroll animations
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };

// Observe elements for scroll animations
  const animateElements = document.querySelectorAll('.hero-subtitle, .hero-cta');
  animateElements.forEach(el => observer.observe(el));

// Dynamic background color based on scroll
  window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;
    const maxScroll = document.body.scrollHeight - window.innerHeight;
    const scrollProgress = scrolled / maxScroll;

const hue = 240 + (scrollProgress * 60); // From blue to purple
    document.documentElement.style.setProperty(
      '--accent-primary', 
      `hsl(${hue}, 70%, 60%)`
    );
  });

// Add typing effect to subtitle
  const subtitleText = document.querySelector('.subtitle-text');
  const originalText = subtitleText.textContent;

function typeWriter(text, element, speed = 100) {
    element.textContent = '';
    let i = 0;

function type() {
      if (i < text.length) {
        element.textContent += text.charAt(i);
        i++;
        setTimeout(type, speed);
      }
    }

type();
  }

// Start typing effect after initial animation
  setTimeout(() => {
    typeWriter(originalText, subtitleText, 50);
  }, 1500);

// Add floating animation to scroll indicator
  const scrollIndicator = document.querySelector('.scroll-indicator');
  let scrollIndicatorAnimation;

function animateScrollIndicator() {
    scrollIndicator.style.transform = 'translateY(-10px)';
    setTimeout(() => {
      scrollIndicator.style.transform = 'translateY(0)';
    }, 1000);
  }

scrollIndicatorAnimation = setInterval(animateScrollIndicator, 3000);

// Hide scroll indicator when scrolling
  let scrollTimeout;
  window.addEventListener('scroll', () => {
    if (window.pageYOffset > 100) {
      scrollIndicator.style.opacity = '0.3';
    } else {
      scrollIndicator.style.opacity = '1';
    }

clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(() => {
      if (window.pageYOffset === 0) {
        scrollIndicator.style.opacity = '1';
      }
    }, 1000);
  });

// Add magnetic effect to social links
  const socialLinks = document.querySelectorAll('.social-link');

socialLinks.forEach(link => {
    link.addEventListener('mousemove', (e) => {
      const rect = link.getBoundingClientRect();
      const x = e.clientX - rect.left - rect.width / 2;
      const y = e.clientY - rect.top - rect.height / 2;

link.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px) scale(1.1)`;
    });

link.addEventListener('mouseleave', () => {
      link.style.transform = 'translate(0, 0) scale(1)';
    });
  });

// Performance optimization: Reduce animations on mobile
  const isMobile = window.innerWidth <= 768;

if (isMobile) {
    // Disable complex animations on mobile for better performance
    document.querySelectorAll('.floating-shapes .shape').forEach(shape => {
      shape.style.animation = 'none';
    });

// Simplify cursor on mobile
    cursor.style.display = 'none';
    document.body.style.cursor = 'auto';
  }

// Add resize listener to handle responsive changes
  window.addEventListener('resize', () => {
    const newIsMobile = window.innerWidth <= 768;

if (newIsMobile !== isMobile) {
      location.reload(); // Reload to apply mobile optimizations
    }
  });

// Preload hover states for smooth transitions
  const preloadImages = () => {
    const images = [
      // Add any image URLs that need preloading
    ];

images.forEach(src => {
      const img = new Image();
      img.src = src;
    });
  };

preloadImages();

console.log('MADE Studio - Creative Web Development');
});

A Code by alejandrokundrah

Recommended

Text Art

Loader with CSS

système de dons avec plusieurs montants

HTML

CSS

JS

Recommended

Text Art

Loader with CSS

système de dons avec plusieurs montants

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS