Difference between revisions of "Template:Glasgow Footer"
| 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
