Redes sociales en francés

795 Skyrreum

Abrir en el editor Publica tu código

Recomendado

16 October 2025

Ejemplo de elemento de carga animado CSS

20 August 2025

Plantilla HTML para blog de diseño moderno

10 February 2026

Juegos desbloqueados: juega juegos en línea gratis en la escuela

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icônes sociales</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>Icônes sociales</h1>
    <button class="toggle-button" id="toggle-mode">
        <i class="fas fa-moon"></i>
    </button>

<div class="info-card" id="info-card">
        <h3>Réseaux sociaux</h3>
        <p>Sélectionnez une plateforme pour vous connecter avec nous!</p>
    </div>

<div class="footer">
        <p>Modifié par <a href="#">Skyrreum</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.snapchat { color: #fffc00; }
.icon.tiktok { color: #69c9d0; }
.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; }

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 'snapchat':
                platformName = 'Snapchat: Share your snaps with friends.';
                break;
            case 'tiktok':
                platformName = 'TikTok: Create and share short videos.';
                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>`;
    });
});