Inspired by a Codrops Article.
A Pen by Ben Gallagher on CodePen.
Barbara Seidel beseidel
A Pen by Pixmill – Büro für Web on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <footer class="section"> | |
| <div class="container"> | |
| <p>John Doe ©2016 website.com</p> | |
| <ul> | |
| <li><a target="_blank" class="facebook" href="https://www.facebook.com/"><i class="fa fa-fw fa-2x fa-inverse fa-facebook"></i></a></li> |
beseidel
/ animated-social-media-links.markdown
Created
July 21, 2019 17:55
Animated social media links
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #SocialShare | |
| .top-left | |
| a.facebook(title='share with: facebook', href='#') | |
| i.margin-top-5.fa.fa-facebook | |
| span.shareCount 99.5K | |
| a.twitter(title='share with: twitter', href='#') | |
| i.margin-top-5.fa.fa-twitter | |
| span.shareCount 83.9K | |
| a.google-plus(title='share with: google-plus', href='#') | |
| i.fa.fa-google-plus |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--SVG, I nomrally include an svg file using PHP. For this pen I've dropped it inline below --> | |
| <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> | |
| <symbol id="icon-behance" viewBox="0 0 64 39.509"> | |
| <title>Behance</title> | |
| <desc>Link to Behance</desc> | |
| <path fill="#FFFFFF" d="M25.66,17.86c1.295-0.662,2.275-1.395,2.94-2.196c1.187-1.429,1.786-3.319,1.786-5.674 | |
| c0-2.282-0.59-4.242-1.77-5.885C26.659,1.438,23.327,0.07,18.63,0H0v38.542h17.37c1.957,0,3.771-0.172,5.445-0.521 | |
| c1.674-0.344,3.125-0.994,4.356-1.936c1.088-0.814,1.998-1.832,2.727-3.029c1.143-1.82,1.717-3.871,1.717-6.148 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container social-wrapper"> | |
| <i id="facebook" class="fa fa-facebook-square fa-5x fa-social"></i> | |
| <i id="twitter" class="fa fa-twitter-square fa-5x fa-social"></i> | |
| <i id="codepen" class="fa fa-codepen fa-5x fa-social"></i> | |
| <i id="fcc" class="fa fa-free-code-camp fa-5x fa-social"></i> | |
| <i id="github" class="fa fa-github-square fa-5x fa-social"></i> | |
| <i id="instagram" class="fa fa-instagram fa-5x fa-social"></i> | |
| <i id="linkedin" class="fa fa-linkedin-square fa-5x fa-social"></i> | |
| <i id="meetup" class="fa fa-meetup fa-5x fa-social"></i> | |
| <i id="twitch" class="fa fa-twitch fa-5x fa-social"></i> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="myproject"> | |
| <h1>Space<span id="projet">Land</span></h1> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="canvas"></canvas> |