Difference between revisions of "Template:TestGlasgowFooter"

Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
.footer-distributed{
+
.marketing-site-footer {
−
background-color: #1e586a;
+
  background: #2c3840;
−
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
+
  color: #8aa0ae;
−
box-sizing: border-box;
+
  padding: 2rem 0 0;
−
width: 100%;
+
−
font-family: Roboto;
+
−
text-align: left;
+
−
padding: 20px 20px;
+
−
margin-top: 50px;
+
 
}
 
}
  
−
.footer-distributed .footer-left p{
+
.marketing-site-footer .marketing-site-footer-menu-social a {
−
        color: #000000;
+
  color: #fefefe;
−
font-size: 14px;
+
−
margin: 10;
+
 
}
 
}
−
.footer-distributed .footer-right p{
+
 
−
        color:  #1e586a;
+
.marketing-site-footer .column-block {
−
font-size: 14px;
+
  margin-bottom: 30px;
−
margin: 10;
+
 
}
 
}
  
 +
.marketing-site-footer > .row {
 +
  margin-bottom: 1rem;
 +
}
  
−
.footer-distributed p.footer-links a{
+
@media screen and (max-width: 39.9375em) {
−
display:inline-block;
+
  .marketing-site-footer .columns {
−
line-height: 1.8;
+
    margin-bottom: 2rem;
−
text-decoration: none;
+
  }
−
color:  inherit;
+
 
}
 
}
  
−
.footer-distributed .footer-right{
+
.marketing-site-footer-name {
−
float: right;
+
  color: #fefefe;
−
margin-top: 6px;
+
  margin-bottom: 1rem;
−
max-width: 400px;
+
  font-size: 2rem;
 
}
 
}
  
 +
.marketing-site-footer-title {
 +
  color: #fefefe;
 +
  margin-bottom: 1rem;
 +
  font-size: 1.25rem;
 +
}
  
 +
.marketing-site-footer-block {
 +
  display: -webkit-flex;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  margin-bottom: 1rem;
 +
}
  
−
.footer-distributed .footer-right a{
+
.marketing-site-footer-block .fa {
−
display: inline-block;
+
  font-size: 2rem;
−
width: 50px;
+
  color: #020304;
−
height: 35px;
+
}
−
background-color: #33383b;
+
−
border-radius: 2px;
+
  
−
font-size: 20px;
+
.marketing-site-footer-block p {
−
color: #52658F;
+
  margin-left: 1rem;
−
text-align: center;
+
  line-height: 1.125rem;
−
line-height: 35px;
+
}
  
−
margin-left: 3px;
+
.marketing-site-footer-bottom {
 +
  background: #020304;
 +
  padding: 1rem 0;
 
}
 
}
  
−
.sponsors {
+
.marketing-site-footer-bottom p,
−
            margin: 10px;
+
.marketing-site-footer-bottom .menu {
−
            width: 150px;
+
  margin-bottom: 0;
−
        }
+
}
  
 +
.marketing-site-footer-bottom .marketing-site-footer-bottom-links {
 +
  -webkit-justify-content: flex-end;
 +
      -ms-flex-pack: end;
 +
          justify-content: flex-end;
 +
}
  
 +
.marketing-site-footer-bottom .marketing-site-footer-bottom-links a {
 +
  color: #8aa0ae;
 +
}
  
−
</style>
+
@media screen and (max-width: 63.9375em) {
 +
  .marketing-site-footer-bottom .marketing-site-footer-bottom-links {
 +
    -webkit-justify-content: center;
 +
        -ms-flex-pack: center;
 +
            justify-content: center;
 +
  }
 +
}
 +
 
 +
@media screen and (max-width: 63.9375em) {
 +
  .marketing-site-footer-bottom {
 +
    text-align: center;
 +
  }
 +
}
 +
 
 +
 
 +
 
 +
<footer class="marketing-site-footer">
 +
  <div class="row medium-unstack">
 +
    <div class="medium-4 columns">
 +
      <h4 class="marketing-site-footer-name">iGEM 2017 Glasgow</h4>
 +
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita dolorem accusantium architecto id quidem, itaque nesciunt quam ducimus atque.</p>
 +
      <ul class="menu marketing-site-footer-menu-social simple">
 +
        <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></li>
 +
        <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
 +
        <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
 +
      </ul>
 +
    </div>
 +
    <div class="medium-4 columns">
 +
      <h4 class="marketing-site-footer-title">Contact Info</h4>
 +
      <div class="marketing-site-footer-block">
 +
        <i class="fa fa-map-marker" aria-hidden="true"></i>
 +
        <p>                    iGEM 2017 Glasgow<br>
 +
                    Bower Building<br>
 +
                    Wilkins Teaching Laboratory<br>
 +
                    University of Glasgow</p>
 +
      </div>
 +
 
 +
<!--      <div class="marketing-site-footer-block">
 +
        <i class="fa fa-phone" aria-hidden="true"></i>
 +
        <p>1 (800) 555-5555</p> -->
 +
 
 +
      </div>
 +
      <div class="marketing-site-footer-block">
 +
        <i class="fa fa-envelope-o" aria-hidden="true"></i>
 +
        <p>igem.glasgow2017@gmail.com</p>
 +
      </div>
 +
    </div>
 +
    <div class="medium-4 columns">
 +
      <h4 class="marketing-site-footer-title">Sponsors</h4>
 +
      <div class="row small-up-3">
 +
        <div class="column column-block">
 +
          <img src="https://placehold.it/75" alt="" />
 +
        </div>
 +
        <div class="column column-block">
 +
          <img src="https://placehold.it/75" alt="" />
 +
        </div>
 +
        <div class="column column-block">
 +
          <img src="https://placehold.it/75" alt="" />
 +
        </div>
 +
        <div class="column column-block">
 +
          <img src="https://placehold.it/75" alt="" />
 +
        </div>
 +
        <div class="column column-block">
 +
          <img src="https://placehold.it/75" alt="" />
 +
        </div>
 +
        <div class="column column-block">
 +
          <img src="https://placehold.it/75" alt="" />
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="marketing-site-footer-bottom">
 +
    <div class="row large-unstack align-middle">
 +
      <div class="column">
 +
        <p>&copy; 2017 No rights reserved</p>
 +
      </div>
 +
      <div class="column">
 +
        <ul class="menu marketing-site-footer-bottom-links">
 +
          <li><a href="#">Home</a></li>
 +
          <li><a href="#">About</a></li>
 +
          <li><a href="#">Services</a></li>
 +
          <li><a href="#">Works</a></li>
 +
          <li><a href="#">News</a></li>
 +
          <li><a href="#">Contact</a></li>
 +
        </ul>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</footer>
 +
 
 +
</html>
  
 +
<!--
 
<footer class="footer-distributed">
 
<footer class="footer-distributed">
  
Line 93: Line 197:
 
<a href="https://www.neb.uk.com/"><img class="sponsors" src="https://static.igem.org/mediawiki/2017/4/42/T--Glasgow--NEB.png"></center>
 
<a href="https://www.neb.uk.com/"><img class="sponsors" src="https://static.igem.org/mediawiki/2017/4/42/T--Glasgow--NEB.png"></center>
 
</footer>
 
</footer>
−
</html>
+
 
 +
-->

Revision as of 21:55, 22 October 2017