A Pen by Derek Hartley on CodePen.
Created
September 28, 2015 01:39
-
-
Save DJHartley/8962c5424f36375150ea to your computer and use it in GitHub Desktop.
qOqxqg
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
| <link href='http://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <nav class="social"> | |
| <ul> | |
| <li><a href="http://twitter.com/gian_michelle">Twitter <i class="fa fa-twitter"></i></a></li> | |
| <li><a href="http://facebook.com/gian.michelle">Facebook <i class="fa fa-facebook"></i></a></li> | |
| <li><a href="http://dribbble.com/gian_michelle">Dribbble <i class="fa fa-dribbble"></i></a></li> | |
| <li><a href="http://behance.net">Behance <i class="fa fa-behance"></i></a></li> | |
| </ul> | |
| </nav> | |
| <div class="me"> | |
| <p>Created by: <p><h1>Gian Di Serafino</h1><p> for <span>Informartion architecture</span></p> | |
| </div> |
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
| a { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .me { | |
| width: 400px; | |
| margin: 90px auto; | |
| } | |
| .me p, | |
| .me h1 { | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| text-align: center; | |
| } | |
| .me p { | |
| font-weight: 200; | |
| } | |
| .me span { | |
| font-weight: bold; | |
| } | |
| .social { | |
| position: fixed; | |
| top: 20px; | |
| } | |
| .social ul { | |
| padding: 0px; | |
| -webkit-transform: translate(-270px, 0); | |
| -moz-transform: translate(-270px, 0); | |
| -ms-transform: translate(-270px, 0); | |
| -o-transform: translate(-270px, 0); | |
| transform: translate(-270px, 0); | |
| } | |
| .social ul li { | |
| display: block; | |
| margin: 5px; | |
| background: rgba(0, 0, 0, 0.36); | |
| width: 300px; | |
| text-align: right; | |
| padding: 10px; | |
| -webkit-border-radius: 0 30px 30px 0; | |
| -moz-border-radius: 0 30px 30px 0; | |
| border-radius: 0 30px 30px 0; | |
| -webkit-transition: all 1s; | |
| -moz-transition: all 1s; | |
| -ms-transition: all 1s; | |
| -o-transition: all 1s; | |
| transition: all 1s; | |
| } | |
| .social ul li:hover { | |
| -webkit-transform: translate(110px, 0); | |
| -moz-transform: translate(110px, 0); | |
| -ms-transform: translate(110px, 0); | |
| -o-transform: translate(110px, 0); | |
| transform: translate(110px, 0); | |
| background: rgba(255, 255, 255, 0.4); | |
| } | |
| .social ul li:hover a { | |
| color: #000; | |
| } | |
| .social ul li:hover i { | |
| color: #fff; | |
| background: rgba(0, 0, 0, 0.36); | |
| -webkit-transform: rotate(360deg); | |
| -moz-transform: rotate(360deg); | |
| -ms-transform: rotate(360deg); | |
| -o-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| -webkit-transition: all 1s; | |
| -moz-transition: all 1s; | |
| -ms-transition: all 1s; | |
| -o-transition: all 1s; | |
| transition: all 1s; | |
| } | |
| .social ul li i { | |
| margin-left: 10px; | |
| color: #000; | |
| background: #fff; | |
| padding: 10px; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| font-size: 20px; | |
| background: #ffffff; | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| body { | |
| background: #25343F; | |
| color: #fff; | |
| font-family: 'Raleway', sans-serif; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment