आधुनिक सामाजिक

214 kevekıbhack

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

20 May 2025

आधुनिक ग्लासमोर्फिज्म लॉगिन फॉर्म html, css में

17 May 2025

आधुनिक वेब साइट

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>

आधुनिक सामाजिक

अनुशंसित

आधुनिक ग्लासमोर्फिज्म लॉगिन फॉर्म html, css में

आधुनिक वेब साइट

HTML

CSS

JS

अनुशंसित

आधुनिक ग्लासमोर्फिज्म लॉगिन फॉर्म html, css में

आधुनिक वेब साइट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS