Ícones sociais

2126 Anes_unk

Abrir no Editor Publique Seu Código

Recomendado

23 February 2025

Um código por ha11072004cc

23 August 2025

Modelo HTML de página de login turco

22 August 2025

Mercado de Computadores: Compre Laptops, Desktops e Mais

HTML

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

Recomendado

Um código por ha11072004cc

Modelo HTML de página de login turco

Mercado de Computadores: Compre Laptops, Desktops e Mais

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS