Difference between revisions of "Team:Sponsors"
Line 54: | Line 54: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | <footer> | ||
+ | <style> | ||
+ | #content { | ||
+ | width:auto; | ||
+ | height:auto; | ||
+ | padding:0px 0px 0px 0px; | ||
+ | |||
+ | } | ||
+ | .social-buttons { | ||
+ | height: 90px; | ||
+ | margin: auto; | ||
+ | font-size: 0; | ||
+ | text-align: center; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | } | ||
+ | |||
+ | .social-button { | ||
+ | display: inline-block; | ||
+ | background-color: #2E2E2E; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | line-height: 90px; | ||
+ | margin: 0 10px; | ||
+ | text-align: center; | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | opacity: .99; | ||
+ | border-radius: 38%; | ||
+ | box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25); | ||
+ | -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; | ||
+ | } | ||
+ | .social-button.twitter:before { | ||
+ | background-color: #3CF; | ||
+ | } | ||
+ | .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; | ||
+ | } | ||
+ | h4{ | ||
+ | font-size:20px; | ||
+ | color:white; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .footerinfo{ | ||
+ | color:white; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .jumbotron{ | ||
+ | background-color:#515151; | ||
+ | margin-bottom: -30px; | ||
+ | } | ||
+ | </style> | ||
+ | <div class="jumbotron"> | ||
+ | <div class="container"> | ||
+ | <div class="col-md-4"> | ||
+ | <h4><strong>Location</storng></h4> | ||
+ | <p><div class="footerinfo"> | ||
+ | Bower Building, Wilkins Teaching Laboratory<br> | ||
+ | University of Glasgow <br> | ||
+ | University Avenue <br> | ||
+ | G12 8QQ</div> | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="col-md-4"> | ||
+ | <h4> | ||
+ | <strong>Follow Us On</strong> | ||
+ | </h4> | ||
+ | <p> | ||
+ | <div class="social-buttons"> | ||
+ | <a href="https://www.facebook.com/igemglasgow2015" target="_blank" class="social-button facebook"><i class="fa fa-facebook"></i></a> | ||
+ | <a href="https://twitter.com/2015iGEMglasgow" target="_blank" class="social-button twitter"><i class="fa fa-twitter"></i></a> | ||
+ | </div> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 13:20, 18 August 2015
First featurette heading. It'll blow your mind.
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
Oh yeah, it's that good. See for yourself.
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
And lastly, this one. Checkmate.
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.