Iconos sociales

Abrir en el editor Video Publica tu código

Recomendado

14 October 2024

Plantilla de página de inicio de sesión HTML

24 April 2025

<!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>`;
    });
});

Iconos sociales

Recomendado

Formulario de registro

Plantilla de página de inicio de sesión HTML

Un código de Metehan

HTML

CSS

JS

Recomendado

Formulario de registro

Plantilla de página de inicio de sesión HTML

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS