Icônes sociales

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 November 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Icons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Social Icons</h1>
    <button class="toggle-button" id="toggle-mode">
        <i class="fas fa-moon"></i>
    </button>

<div class="info-card" id="info-card">
        <h3>Social Media</h3>
        <p>Select a platform to connect with us!</p>
    </div>

<div class="footer">
        <p>Created by <a href="#">Anes</a></p>
    </div>

CSS

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #0a1d3d, #0e2a57);
    color: #e0e0e0;
    transition: background 0.5s ease, color 0.5s ease;
}

.light-mode {
    background: linear-gradient(135deg, #2a2e3b, #3b3f4f);
    color: #ddd;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    letter-spacing: 1px;
    transition: color 0.3s;
}

.toggle-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s;
}

.toggle-button:hover {
    transform: scale(1.2);
}

.social-icons {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 35px;
    transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.icon:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.icon::before {
    content: '';
    position: absolute;
    width: 300%;
    height: 300%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: transform 0.3s;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
}

.icon:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.icon i {
    position: relative;
    z-index: 1;
    transition: color 0.3s, transform 0.3s;
}

.icon.facebook { color: #3b5998; }
.icon.twitter { color: #1da1f2; }
.icon.instagram { color: #e1306c; }
.icon.linkedin { color: #0077b5; }
.icon.pinterest { color: #bd081c; }
.icon.snapchat { color: #fffc00; }
.icon.tiktok { color: #69c9d0; }
.icon.reddit { color: #ff4500; }
.icon.youtube { color: #ff0000; }
.icon.whatsapp { color: #25d366; }
.icon.discord { color: #7289da; }

.info-card {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    width: 220px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.icon:hover ~ .info-card {
    opacity: 1;
}

h3 {
    margin: 0;
    font-size: 1.5em;
}

p {
    margin: 5px 0 0;
    font-size: 1em;
}

.footer {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
    font-size: 0.8em;
}

.footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.footer a:hover {
    color: #1da1f2;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0.2;
    background: rgba(255, 255, 255, 0.2);
    animation: float 6s infinite;
}

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

.bubble:nth-child(1) { width: 100px; height: 100px; left: 20%; top: 50%; }
.bubble:nth-child(2) { width: 120px; height: 120px; left: 60%; top: 70%; animation-duration: 8s; }
.bubble:nth-child(3) { width: 80px; height: 80px; left: 80%; top: 30%; animation-duration: 5s; }
.bubble:nth-child(4) { width: 150px; height: 150px; left: 40%; top: 20%; animation-duration: 10s; }

JS

const toggleButton = document.getElementById('toggle-mode');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('light-mode');
    toggleButton.innerHTML = body.classList.contains('light-mode') ? 
        '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
});

document.querySelectorAll('.icon').forEach(icon => {
    icon.addEventListener('mouseover', function() {
        const platform = this.classList[1];
        let platformName;

switch(platform) {
            case 'facebook':
                platformName = 'Facebook: Connect with friends and the world.';
                break;
            case 'twitter':
                platformName = 'Twitter: Join the conversation.';
                break;
            case 'instagram':
                platformName = 'Instagram: Share your moments.';
                break;
            case 'linkedin':
                platformName = 'LinkedIn: Connect professionally.';
                break;
            case 'pinterest':
                platformName = 'Pinterest: Discover and save creative ideas.';
                break;
            case 'snapchat':
                platformName = 'Snapchat: Share your snaps with friends.';
                break;
            case 'tiktok':
                platformName = 'TikTok: Create and share short videos.';
                break;
            case 'reddit':
                platformName = 'Reddit: Dive into anything.';
                break;
            case 'youtube':
                platformName = 'YouTube: Watch and share videos.';
                break;
            case 'whatsapp':
                platformName = 'WhatsApp: Chat with friends and family.';
                break;
            case 'discord':
                platformName = 'Discord: Chat and meet with communities.';
                break;
        }

document.getElementById('info-card').innerHTML = `<h3>${platform.charAt(0).toUpperCase() + platform.slice(1)}</h3><p>${platformName}</p>`;
    });
});

Icônes sociales

Recommandé

sœur solaire

Un code de Metehan

ki ok jour du New Jersey

HTML

CSS

JS

Recommandé

sœur solaire

Un code de Metehan

ki ok jour du New Jersey

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS