social moderne

957 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 July 2023

Icônes sociales HTML

5 February 2025

page de connexion futuriste moderne

25 March 2025

Un code par andrej.social.network

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Social Media Icons - Webleb</title>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Animated social media icons with hover effects">
  
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  
  
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  
  <style>
    /* Base Styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }
    
    /* Social Icons Container */
    .wrapper {
      display: flex;
      list-style: none;
      gap: 25px;
    }
    
    /* Icon Base Styles */
    .icon {
      position: relative;
      background: #fff;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .icon:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    }
    
    .icon span {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    
    .icon span i {
      font-size: 24px;
      color: #fff;
      transition: all 0.3s ease;
    }
    
    /* Tooltip */
    .icon::before {
      content: attr(data-tooltip);
      position: absolute;
      top: 0;
      font-size: 14px;
      background: #fff;
      color: #000;
      padding: 5px 10px;
      border-radius: 25px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
    }
    
    .icon:hover::before {
      opacity: 1;
      top: -40px;
    }
    
    /* Individual Icon Colors and Effects */
    .icon.facebook {
      background: #1877f2;
    }
    
    .icon.facebook:hover span {
      background: #1877f2;
    }
    
    .icon.facebook span {
      background: linear-gradient(45deg, #1877f2, #0d5fd3);
    }
    
    .icon.youtube {
      background: #ff0000;
    }
    
    .icon.youtube:hover span {
      background: #ff0000;
    }
    
    .icon.youtube span {
      background: linear-gradient(45deg, #ff0000, #cc0000);
    }
    
    .icon.tiktok {
      background: #000000;
    }
    
    .icon.tiktok:hover span {
      background: #000000;
    }
    
    .icon.tiktok span {
      background: linear-gradient(45deg, #000000, #333333);
    }
    
    .icon.instagram {
      background: #e4405f;
    }
    
    .icon.instagram:hover span {
      background: #e4405f;
    }
    
    .icon.instagram span {
      background: linear-gradient(45deg, #e4405f, #c13584);
    }
    
    /* Animation */
    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
    }
    
    .icon {
      animation: float 3s ease-in-out infinite;
    }
    
    .icon:nth-child(1) {
      animation-delay: 0s;
    }
    
    .icon:nth-child(2) {
      animation-delay: 0.2s;
    }
    
    .icon:nth-child(3) {
      animation-delay: 0.4s;
    }
    
    .icon:nth-child(4) {
      animation-delay: 0.6s;
    }
    
    /* Responsive Design */
    @media (max-width: 600px) {
      .wrapper {
        flex-direction: column;
      }
      
      .icon {
        width: 50px;
        height: 50px;
      }
      
      .icon span i {
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
  <ul class="wrapper">
    <li class="icon facebook" data-tooltip="Facebook">
      <span><i class="fab fa-facebook-f"></i></span>
    </li>
    <li class="icon youtube" data-tooltip="YouTube">
      <span><i class="fab fa-youtube"></i></span>
    </li>
    <li class="icon tiktok" data-tooltip="TikTok">
      <span><i class="fab fa-tiktok"></i></span>
    </li>
    <li class="icon instagram" data-tooltip="Instagram">
      <span><i class="fab fa-instagram"></i></span>
    </li>
  </ul>
  
  <script>
    // Optional JavaScript for additional interactivity
    document.querySelectorAll('.icon').forEach(icon => {
      icon.addEventListener('click', () => {
        // Add your click handlers here
        const platform = icon.getAttribute('data-tooltip');
        console.log(`Clicked ${platform} icon`);
        
        // Example: Open social media links
        /*
        const links = {
          'Facebook': 'https://facebook.com',
          'YouTube': 'https://youtube.com',
          'TikTok': 'https://tiktok.com',
          'Instagram': 'https://instagram.com'
        };
        window.open(links[platform], '_blank');
        */
      });
    });
  </script>
</body>
</html>

social moderne

Recommandé

Icônes sociales HTML

page de connexion futuriste moderne

Un code par andrej.social.network

HTML

CSS

JS

Recommandé

Icônes sociales HTML

page de connexion futuriste moderne

Un code par andrej.social.network

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS