Difference between revisions of "Team:Glasgow/test"
Line 1: | Line 1: | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<style> | <style> | ||
− | + | * { | |
− | + | margin: 0; | |
+ | padding: 0; | ||
+ | color: inherit; | ||
+ | box-sizing: inherit; | ||
} | } | ||
− | + | *:focus { | |
− | + | outline: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | html { | |
− | + | box-sizing: border-box; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | body { | |
− | + | background-color: #ecf0f1; | |
− | + | ||
} | } | ||
− | . | + | .social-buttons { |
− | + | height: 90px; | |
− | + | margin: auto; | |
− | + | font-size: 0; | |
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
} | } | ||
− | . | + | .social-button { |
− | + | display: inline-block; | |
− | + | background-color: #fff; | |
− | + | width: 90px; | |
− | + | height: 90px; | |
− | + | line-height: 90px; | |
− | + | margin: 0 10px; | |
− | + | text-align: center; | |
− | + | position: relative; | |
− | + | overflow: hidden; | |
− | + | opacity: .99; | |
+ | border-radius: 28%; | ||
+ | box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05); | ||
+ | -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); | ||
+ | transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); | ||
} | } | ||
− | + | .social-button:before { | |
− | . | + | content: ''; |
− | + | background-color: #000; | |
− | + | width: 120%; | |
− | + | height: 120%; | |
− | + | position: absolute; | |
− | + | top: 90%; | |
− | + | left: -110%; | |
− | + | -webkit-transform: rotate(45deg); | |
− | + | -ms-transform: rotate(45deg); | |
+ | transform: rotate(45deg); | ||
+ | -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); | ||
+ | transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); | ||
} | } | ||
− | + | .social-button .fa { | |
− | . | + | font-size: 38px; |
− | + | vertical-align: middle; | |
− | + | -webkit-transform: scale(0.8); | |
− | + | -ms-transform: scale(0.8); | |
− | + | transform: scale(0.8); | |
− | + | -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); | |
− | + | transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); | |
} | } | ||
− | + | .social-button.facebook:before { | |
− | . | + | background-color: #3B5998; |
− | + | ||
} | } | ||
− | + | .social-button.facebook .fa { | |
− | + | color: #3B5998; | |
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | color:# | + | |
− | + | ||
} | } | ||
− | + | .social-button.twitter:before { | |
− | . | + | background-color: #3CF; |
− | color: # | + | } |
+ | .social-button.twitter .fa { | ||
+ | color: #3CF; | ||
+ | } | ||
+ | .social-button.google:before { | ||
+ | background-color: #DC4A38; | ||
+ | } | ||
+ | .social-button.google .fa { | ||
+ | color: #DC4A38; | ||
+ | } | ||
+ | .social-button.dribbble:before { | ||
+ | background-color: #F26798; | ||
+ | } | ||
+ | .social-button.dribbble .fa { | ||
+ | color: #F26798; | ||
+ | } | ||
+ | .social-button.skype:before { | ||
+ | background-color: #00AFF0; | ||
+ | } | ||
+ | .social-button.skype .fa { | ||
+ | color: #00AFF0; | ||
+ | } | ||
+ | .social-button:hover:before { | ||
+ | top: -10%; | ||
+ | left: -10%; | ||
+ | } | ||
+ | .social-button:hover .fa { | ||
+ | color: #fff; | ||
+ | -webkit-transform: scale(1); | ||
+ | -ms-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | .social-button:focus { | ||
+ | opacity: .85; | ||
} | } | ||
− | |||
+ | |||
+ | </style> | ||
<body> | <body> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <div class="social-buttons"><a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a><a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a><a href="#" class="social-button google"><i class="fa fa-google"></i></a><a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a><a href="#" class="social-button skype"><i class="fa fa-skype"></i></a> | ||
+ | </div> | ||
</body> | </body> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
</html> | </html> |
Revision as of 14:07, 12 September 2015