Home
Omer fils ELENGA
Minimalist iOS 26 Foote

Minimalist iOS 26 Foote

This tailwind example is contributed by Omer fils ELENGA, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author Omer fils ELENGA

138

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Minimalist iOS 26 Footer</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r158/three.min.js"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['-apple-system', 'BlinkMacSystemFont', 'SF Pro Display', 'Inter', 'sans-serif']
          },
          animation: {
            'gradient-shift': 'gradientShift 15s ease infinite',
            'float': 'float 6s ease-in-out infinite'
          },
          keyframes: {
            gradientShift: {
              '0%, 100%': { backgroundPosition: '0% 50%' },
              '50%': { backgroundPosition: '100% 50%' }
            },
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-8px)' }
            }
          }
        }
      }
    }
  </script>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      background: #000;
      color: white;
    }

/* Fond dégradé animé */
    .footer-gradient {
       background-size: 300% 300%;
      animation: gradient-shift 15s ease infinite;
      position: relative;
      overflow: hidden;
    }

/* Three.js canvas */
    .three-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

/* Particules interactives */
    .interactive-particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

/* Carte glassmorphism */
    .glass-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

.glass-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

/* Bouton iOS */
    .ios-btn {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 8px 20px;
      font-size: 15px;
      font-weight: 500;
      color: white;
      transition: all 0.2s ease;
    }

.ios-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.03);
    }

/* Icônes */
    .social-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

.social-icon:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }

/* Animation flottante */
    .float-animation {
      animation: float 6s ease-in-out infinite;
    }

/* Jeu interactif - particules qui suivent la souris */
    .particle {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
      opacity: 0.8;
      pointer-events: none;
      transition: transform 0.2s ease, opacity 0.3s ease;
    }

/* Responsive */
    @media (max-width: 768px) {
      .footer-grid {
        grid-template-columns: 1fr !important;
      }
      .footer-bottom {
        flex-direction: column !important;
        gap: 1rem;
        text-align: center;
      }
      .social-links {
        justify-content: center !important;
      }
    }
  </style>
</head>
<body class="bg-black text-white">

<footer class="footer-gradient relative pt-16 pb-12">
    
    <canvas id="footer-canvas" class="three-canvas"></canvas>
    
    
    <div id="interactive-particles" class="interactive-particles"></div>

<div class="container mx-auto px-4 relative z-10">
      <div class="footer-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
        
        <div class="space-y-6 glass-card p-6 float-animation" style="animation-delay: 0s">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center backdrop-blur-sm">
              <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">O</span>
            </div>
            <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">OmerLinks</span>
          </div>
          <p class="text-gray-300 leading-relaxed">
            Création de solutions innovantes pour un monde numérique en constante évolution.
          </p>
          <div class="social-links flex gap-3">
            <a href="#" class="social-icon hover:bg-blue-500/20">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
            </a>
            <a href="#" class="social-icon hover:bg-sky-500/20">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.32-3.809 2.105-6.112 2.105-.398 0-.79-.023-1.175-.067 2.189 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
            </a>
            <a href="#" class="social-icon hover:bg-pink-500/20">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="social-icon hover:bg-blue-600/20">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
          </div>
        </div>

<div class="space-y-6 glass-card p-6 float-animation" style="animation-delay: 0.2s">
          <h3 class="text-lg font-semibold text-white">Quick Links</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Home
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> About Us
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Services
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Pricing
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Blog
            </a></li>
          </ul>
        </div>

<div class="space-y-6 glass-card p-6 float-animation" style="animation-delay: 0.4s">
          <h3 class="text-lg font-semibold text-white">Services</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Web Development
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Mobile Apps
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> UI/UX Design
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Digital Marketing
            </a></li>
            <li><a href="#" class="text-gray-300 hover:text-white transition flex items-center gap-2">
              <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Cloud Solutions
            </a></li>
          </ul>
        </div>

<div class="space-y-6 glass-card p-6 float-animation" style="animation-delay: 0.6s">
          <h3 class="text-lg font-semibold text-white">Contact Us</h3>
          <address class="not-italic text-gray-300 space-y-2">
            <p class="flex items-start gap-3">
              <svg class="w-5 h-5 text-purple-400 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              <span>123 brazzaville, Congo</span>
            </p>
            <p class="flex items-start gap-3">
              <svg class="w-5 h-5 text-purple-400 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              <span class="hover:text-white transition">
                <a href="mailto:elengaomerfils00@gmail.com" class="hover:underline">my mail</a>
              </span>
            </p>
            <p class="flex items-start gap-3">
              <svg class="w-5 h-5 text-purple-400 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
              <span class="hover:text-white transition">
                <a href="tel:+242050332252" class="hover:underline">+242 05 033 2252 </a>
              </span>
            </p>
          </address>
        </div>
      </div>

<div class="footer-bottom flex flex-col md:flex-row justify-between items-center pt-6 border-t border-white/10">
        <p class="text-gray-400 text-sm">
          © <span id="year"></span> OmerLinks. All rights reserved.
        </p>
        <div class="flex flex-wrap justify-center gap-4 mt-4 md:mt-0">
          <a href="#" class="text-gray-400 hover:text-white text-sm transition flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Privacy Policy
          </a>
          <a href="#" class="text-gray-400 hover:text-white text-sm transition flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Terms of Service
          </a>
          <a href="#" class="text-gray-400 hover:text-white text-sm transition flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Cookies
          </a>
        </div>
      </div>
    </div>
  </footer>

// Initialiser Three.js pour le fond
    function initThreeJS() {
      const canvas = document.getElementById('footer-canvas');
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer({ 
        canvas: canvas,
        alpha: true,
        antialias: true
      });
      
      renderer.setSize(window.innerWidth, 300);
      renderer.setPixelRatio(window.devicePixelRatio);
      
      // Créer des particules
      const particlesGeometry = new THREE.BufferGeometry();
      const particlesCount = 500;
      
      const posArray = new Float32Array(particlesCount * 3);
      for (let i = 0; i < particlesCount * 3; i++) {
        posArray[i] = (Math.random() - 0.5) * 10;
      }
      
      particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
      
      const particlesMaterial = new THREE.PointsMaterial({
        color: 0xffffff,
        size: 0.02,
        transparent: true,
        opacity: 0.8,
        sizeAttenuation: true
      });
      
      const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
      scene.add(particlesMesh);
      
      camera.position.z = 3;
      
      // Animation
      function animate() {
        requestAnimationFrame(animate);
        
        particlesMesh.rotation.x += 0.0002;
        particlesMesh.rotation.y += 0.0005;
        
        renderer.render(scene, camera);
      }
      
      // Gestion du resize
      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / 300;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, 300);
      });
      
      animate();
    }

// Particules interactives (jeu)
    function initInteractiveParticles() {
      const container = document.getElementById('interactive-particles');
      const particleCount = 20;
      const particles = [];
      
      // Créer les particules
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        particle.style.backgroundColor = `hsl(${Math.random() * 60 + 270}, 70%, 60%)`;
        container.appendChild(particle);
        particles.push(particle);
      }
      
      // Suivre la souris
      let mouseX = 0, mouseY = 0;
      
      document.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
        
        particles.forEach((particle, index) => {
          const rect = particle.getBoundingClientRect();
          const particleX = rect.left + rect.width / 2;
          const particleY = rect.top + rect.height / 2;
          
          const dx = mouseX - particleX;
          const dy = mouseY - particleY;
          const distance = Math.sqrt(dx * dx + dy * dy);
          
          if (distance < 150) {
            const angle = Math.atan2(dy, dx);
            const force = (150 - distance) / 150;
            
            particle.style.transform = `
              translate(${Math.cos(angle) * force * 20}px, ${Math.sin(angle) * force * 20}px)
              scale(${1 + force * 0.5})
            `;
            particle.style.opacity = 0.3 + force * 0.7;
          } else {
            particle.style.transform = 'translate(0, 0) scale(1)';
            particle.style.opacity = 0.8;
          }
        });
      });
      
      // Effet de flottaison constant
      function floatParticles() {
        particles.forEach((particle, index) => {
          const baseX = parseFloat(particle.style.left);
          const baseY = parseFloat(particle.style.top);
          
          const offsetX = Math.sin(Date.now() * 0.001 + index) * 2;
          const offsetY = Math.cos(Date.now() * 0.0008 + index) * 1.5;
          
          particle.style.left = `${baseX + offsetX}%`;
          particle.style.top = `${baseY + offsetY}%`;
        });
        
        requestAnimationFrame(floatParticles);
      }
      
      floatParticles();
    }

// Initialiser tout au chargement
    document.addEventListener('DOMContentLoaded', () => {
      initThreeJS();
      initInteractiveParticles();
      
      // Effet de fondu pour les cartes
      const cards = document.querySelectorAll('.glass-card');
      cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
          card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
          card.style.opacity = '1';
          card.style.transform = 'translateY(0)';
        }, 300 + index * 150);
      });
    });
  </script>
</body>
</html>

Related Examples