Instantly share code, notes, and snippets.
Created
March 20, 2022 11:58
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save mariamihai/c804e6bc73a309fa5cfe776737915fb9 to your computer and use it in GitHub Desktop.
Create social media links with the site specific background color
This file contains 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> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Socials</title> | |
| <style> | |
| .container { | |
| height: 50px; | |
| width: 250px; | |
| display: flex; | |
| padding: 5px | |
| } | |
| .icon-wrapper { | |
| height: 30px; | |
| width: 30px; | |
| background-color: transparent; | |
| text-align: center; | |
| padding: 5px; | |
| margin-left: .2em; | |
| margin-right: .2em; | |
| text-decoration: none; | |
| line-height: 30px; | |
| } | |
| .type2 .icon-wrapper { | |
| background-color: black; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: black; | |
| } | |
| a:visited { | |
| color: black; | |
| } | |
| .type2 a { | |
| text-decoration: none; | |
| color: white; | |
| } | |
| .type2 a:visited { | |
| color: white; | |
| } | |
| .icon:before { | |
| font-family: FontAwesome, sans-serif; | |
| font-size: 20px; | |
| width: 100%; | |
| height: 100%; | |
| font-weight: normal; | |
| } | |
| .facebook .icon:before { | |
| content: '\f09a'; | |
| } | |
| .twitter .icon:before { | |
| content: '\f099'; | |
| } | |
| .youtube .icon:before { | |
| content: '\f167'; | |
| } | |
| .instagram .icon:before { | |
| content: '\f16d'; | |
| } | |
| .linkedin .icon:before { | |
| content: '\f0e1'; | |
| } | |
| .icon-wrapper:hover * { | |
| color: white; | |
| } | |
| .icon-wrapper.facebook:hover { | |
| background-color: #305891; | |
| } | |
| .icon-wrapper.twitter:hover { | |
| background-color: #2ca8d2; | |
| } | |
| .icon-wrapper.youtube:hover { | |
| background-color: #e62d27; | |
| } | |
| .icon-wrapper.instagram:hover { | |
| background-color: #DD287B; | |
| } | |
| .icon-wrapper.linkedin:hover { | |
| background-color: #007bb6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <a href=""> | |
| <div class="icon-wrapper facebook"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| <a href=""> | |
| <div class="icon-wrapper twitter"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| <a href=""> | |
| <div class="icon-wrapper youtube"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| <a href=""> | |
| <div class="icon-wrapper instagram"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| <a href=""> | |
| <div class="icon-wrapper linkedin"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="container type2"> | |
| <a href=""> | |
| <div class="icon-wrapper facebook"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| <a href=""> | |
| <div class="icon-wrapper twitter"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| <a href=""> | |
| <div class="icon-wrapper youtube"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| <a href=""> | |
| <div class="icon-wrapper instagram"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| <a href=""> | |
| <div class="icon-wrapper linkedin"> | |
| <span class="icon" /> | |
| </div> | |
| </a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment