Line 6: | Line 6: | ||
<footer> | <footer> | ||
+ | |||
<style> | <style> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | .social- | + | #content { |
− | display: inline-block; | + | 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:before { | + | |
− | + | .social-button { | |
− | + | display: inline-block; | |
− | + | background-color: #2E2E2E; | |
− | + | width: 40px; | |
− | + | height: 40px; | |
− | + | line-height: 0vh; | |
− | + | 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); |
− | .social-button .fa { | + | -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; |
− | .social-button.facebook:before { | + | top: 90%; |
− | + | left: -110%; | |
− | } | + | -webkit-transform: rotate(45deg); |
− | .social-button.facebook .fa { | + | -ms-transform: rotate(45deg); |
− | + | transform: rotate(45deg); | |
− | } | + | -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); |
− | .social-button.twitter:before { | + | transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); |
− | + | } | |
− | } | + | |
− | .social-button.twitter .fa { | + | .social-button .fa { |
− | + | color: black; | |
− | } | + | font-size: 38px; |
− | .social-button.instagram:before { | + | vertical-align: middle; |
− | + | -webkit-transform: scale(0.8); | |
− | } | + | -ms-transform: scale(0.8); |
− | .social-buton.instagram .fa { | + | 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:hover:before { | + | } |
− | + | ||
− | + | .social-button.facebook:before { | |
− | } | + | background-color: #3B5998; |
− | .social-button:hover .fa { | + | } |
− | + | .social-button.facebook .fa { | |
− | + | color: #3B5998; | |
− | + | } | |
− | + | .social-button.twitter:before { | |
− | } | + | background-color: #3CF; |
− | .social-button:focus { | + | } |
− | + | .social-button.twitter .fa { | |
− | } | + | color: #3CF; |
− | h4{ | + | } |
− | font-size:20px; | + | .social-button.instagram:before { |
− | color:white; | + | background-color: #e30255 |
− | text-align:center; | + | } |
− | } | + | .social-buton.instagram .fa { |
− | .footerinfo{ | + | color: #e30255 |
− | color:white; | + | } |
− | text-align:center; | + | .social-button:hover:before { |
− | } | + | top: -10%; |
− | .jumbotron{ | + | left: -10%; |
− | background-color:#414141; | + | } |
− | + | .social-button:hover .fa { | |
− | } | + | color: #fff; |
− | </style> | + | -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:#414141; | ||
+ | margin-bottom: -30px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <body> | ||
+ | |||
<div class="jumbotron"> | <div class="jumbotron"> | ||
− | <div class="container"> | + | <div class="container-fluid"> |
− | <div class="row"> | + | |
− | + | <div class="row"> | |
− | + | <div class="col-sm-4"> | |
− | + | <br> | |
− | + | <br> | |
− | + | <h4><strong>Location</strong></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-sm-4"> | ||
+ | <br> | ||
+ | <br> | ||
+ | <h4><strong>Follow Us On</strong></h4> | ||
+ | <p><div class="social-buttons"> | ||
+ | <a href="https://www.facebook.com/glasgowigem2017" target="_blank" class="social-button facebook"><i class="fa fa- | ||
+ | facebook" arai-hidden="true"></i></a> | ||
+ | <a href="https://twitter.com/Glasgow_iGEM" target="_blank" class="social-button twitter"><i class="fa fa-twitter" | ||
+ | arai-hidden="true"></i></a> | ||
+ | <a href="https://www.instagram.com/igem.glasgow/" target="_blank" class="social-button instagram"><i class="fa fa- | ||
+ | instagram" arai-hidden="true"></i></a> | ||
+ | </div></p> | ||
+ | </div> | ||
+ | <div class="col-sm-4"> | ||
+ | <br> | ||
+ | <br> | ||
+ | <center> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/9/93/IGEM_Glasgow_2017_TeamMascot.png" style="max-height:200px;"> | ||
+ | </center> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class="col-sm- | + | <div class="row"> |
− | + | <div class="col-sm-2"> | |
− | + | <center> | |
− | + | <a href="http://www.gla.ac.uk"><img src="https://static.igem.org/mediawiki/2015/7/77/2015-Glasgow-Glasgow.png" style="max- | |
− | < | + | height:40px;margin:10px;"></a> |
− | + | </center> | |
− | + | </div> | |
− | + | <div class="col-sm-2"> | |
− | + | <center> | |
− | + | <a href="https://www.idtdna.com/site"><img src="https://static.igem.org/mediawiki/2015/0/0a/IDT_logo_trans.png" style="max- | |
− | + | height:40px;margin:10px;"></a> | |
− | + | </center> | |
− | + | </div> | |
− | + | <div class="col-sm-2"> | |
− | + | <center> | |
− | + | <a href="http://www.gla.ac.uk"><img src="https://static.igem.org/mediawiki/2015/7/77/2015-Glasgow-Glasgow.png" style="max- | |
− | + | height:40px;margin:10px;"></a> | |
+ | </center> | ||
+ | </div> | ||
+ | <div class="col-sm-2"> | ||
+ | <center> | ||
+ | <a href="http://www.gla.ac.uk"><img src="https://static.igem.org/mediawiki/2015/7/77/2015-Glasgow-Glasgow.png" style="max- | ||
+ | height:40px;margin:10px;"></a> | ||
+ | </center> | ||
+ | </div> | ||
+ | <div class="col-sm-2"> | ||
+ | <center> | ||
+ | <a href="http://www.gla.ac.uk"><img src="https://static.igem.org/mediawiki/2015/7/77/2015-Glasgow-Glasgow.png" style="max- | ||
+ | height:40px;margin:10px;"></a> | ||
+ | </center> | ||
+ | </div> | ||
+ | <div class="col-sm-2"> | ||
+ | <center> | ||
+ | <a href="http://www.gla.ac.uk"><img src="https://static.igem.org/mediawiki/2015/7/77/2015-Glasgow-Glasgow.png" style="max- | ||
+ | height:40px;margin:10px;"></a> | ||
+ | </center> | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | </body> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
</footer> | </footer> | ||
− | + | ||
</html> | </html> |
Revision as of 10:13, 21 July 2017