Un set moderno e reattivo di icone social animate, con effetti hover, colori personalizzati per ogni piattaforma e supporto alla modalità scura.
Perfetto per portfolio, landing page, blog e siti personali.
👉 Visualizza la demo su GitHub Pages
Il file
docs/index.htmlè un esempio completo già funzionante, usato anche come demo.
- ✅ Layout flessibile con Flexbox
- 🔍 Icone animate con effetto zoom al passaggio del mouse
- 🎨 Cerchio colorato con transizione fluida
- 🌈 Gradienti e colori personalizzati per ogni social network
- 🌚 Supporto alla modalità scura
- ♿ Migliorata accessibilità con
aria-label - 💡 Solo HTML + CSS – nessuna dipendenza da JavaScript
├── docs/
│ └── index.html # Esempio completo (usato per GitHub Pages)
├── social.css # Foglio di stile principale
└── README.md # Questo file
<link href="https://cdn.jsdelivr.net/gh/PredestinatoNew/Social_HTML/social.css" rel="stylesheet" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" /><ul class="social-icons">
<li id="github">
<a href="https://www.github.com/YOUR_ID/" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
</li>
<!-- Aggiungi altri social duplicando questo blocco -->
</ul>Per attivare la modalità scura, aggiungi la classe dark-mode al tag <body>:
<body class="dark-mode">🔁 Un pulsante per attivare/disattivare il tema è già incluso nella demo (docs/index.html).
Il tema supporta i seguenti social con stili personalizzati:
- YouTube
- Discord
- GitHub
- Twitter (X)
- TikTok
- Snapchat
- Telegram
- Medium
- Twitch
- Threads
Sei libero di usarlo citando almeno nel codice "Codice di PredestinatoNew" accanto all'importazione del CSS ma è anche apprezzata l'attribuzione nella pagina frontend. Rispetta inoltre anche la licenza MIT.
Le contribuzioni sono benvenute!
Se vuoi aiutare a migliorare il progetto:
- Apri una Pull Request
- Oppure segnala un Issue
PredestinatoNew