Difference between revisions of "Template:US AFRL CarrollHS/footer"

 
(110 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
  
−
<div class="container-fluid">
+
<style>
  
−
  <div class="row">
+
.container {
−
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"></div>
+
width: 100%;
−
    <div class="col-md-6 col-lg-4"></div>
+
}
−
    <div class="col-lg-4"></div>
+
−
  </div>
+
  
−
<!-- Footer -->
+
.pt-3, .py-3 {
−
<footer class="page-footer font-small stylish-color-dark pt-4 mt-4">
+
background-color: #001438;
 +
}
  
−
  <!-- Footer Links -->
+
footer.page-footer.font-small.pt-4 {
−
  <div class="container text-center text-md-left">
+
width: 100%;
 +
background-color: #B3B9DC;
 +
}
  
−
    <!-- Grid row -->
 
−
    <div class="row">
 
  
−
      <!-- Grid column -->
+
img.icon {
−
      <div class="col-md-4 mx-auto">
+
width: 50%;
 +
height: auto;
 +
margin-top: 10px;
 +
padding-bottom: 40px;
 +
}
  
−
        <!-- Content -->
+
li.list-inline-item {
−
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Footer Content</h5>
+
display: inline;
−
        <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
}
  
−
      </div>
+
ul.list-unstyled list-inline text-center {
−
      <!-- Grid column -->
+
  
−
      <hr class="clearfix w-100 d-md-none">
+
}
  
−
      <!-- Grid column -->
+
.footer-copyright {
−
      <div class="col-md-2 mx-auto">
+
font-family:Montserrat, Ariel, sans-serif;
 +
}
  
−
        <!-- Links -->
+
.rowfooter {
−
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
+
padding-bottom: 0px;
 +
}
  
−
        <ul class="list-unstyled">
+
footer.page-footer {
−
          <li>
+
margin-bottom: -30px;
−
            <a href="#!">Link 1</a>
+
margin-top: 15px;
−
          </li>
+
}
−
          <li>
+
−
            <a href="#!">Link 2</a>
+
−
          </li>
+
−
          <li>
+
−
            <a href="#!">Link 3</a>
+
−
          </li>
+
−
          <li>
+
−
            <a href="#!">Link 4</a>
+
−
          </li>
+
−
        </ul>
+
  
−
      </div>
+
.footer-copyright {
−
      <!-- Grid column -->
+
  
−
      <hr class="clearfix w-100 d-md-none">
+
}
  
−
      <!-- Grid column -->
+
</style>
−
      <div class="col-md-2 mx-auto">
+
  
−
        <!-- Links -->
 
−
        <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
 
  
−
        <ul class="list-unstyled">
+
<div class="rowfooter">
−
          <li>
+
<footer class="page-footer font-small pt-4">
−
            <a href="#!">Link 1</a>
+
−
          </li>
+
−
          <li>
+
−
            <a href="#!">Link 2</a>
+
−
          </li>
+
−
          <li>
+
−
            <a href="#!">Link 3</a>
+
−
          </li>
+
−
          <li>
+
−
            <a href="#!">Link 4</a>
+
−
          </li>
+
−
        </ul>
+
  
−
      </div>
+
    <!-- Footer Elements -->
−
      <!-- Grid column -->
+
    <div class="container">
  
−
       <hr class="clearfix w-100 d-md-none">
+
       <!-- Social buttons -->
 +
      <ul class="list-unstyled list-inline text-center">
  
−
      <!-- Grid column -->
+
  <div class="row">
−
      <div class="col-md-2 mx-auto">
+
<div class="col-sm-1"></div>
 +
    <div class="col-sm-2">
 +
        <li class="list-inline-item">
 +
          <a class="btn-floating btn-gplus mx-1" href="https://twitter.com/iGEMLabPats">
 +
            <img class="icon" src="https://static.igem.org/mediawiki/2018/8/8f/T--US_AFRL_CarrollHS--TwitterLogo.png">
 +
          </a>
 +
        </li>
 +
</div>
  
−
        <!-- Links -->
+
    <div class="col-sm-2">
−
         <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
+
         <li class="list-inline-item">
 +
          <a class="btn-floating btn-gplus mx-1" href="https://www.facebook.com/iGEMLabPats/">
 +
            <img class="icon" src="https://static.igem.org/mediawiki/2018/3/38/T--US_AFRL_CarrollHS--FacebookLogo.png">
 +
          </a>
 +
        </li>
 +
</div>
  
−
        <ul class="list-unstyled">
+
    <div class="col-sm-2">
−
          <li>
+
        <li class="list-inline-item">
−
            <a href="#!">Link 1</a>
+
           <a class="btn-floating btn-gplus mx-1" href="https://www.instagram.com/igemlabpats/">
−
           </li>
+
             <img class="icon" src="https://static.igem.org/mediawiki/2018/7/7b/T--US_AFRL_CarrollHS--InstagramLogo.png">
−
          <li>
+
           </a>
−
            <a href="#!">Link 2</a>
+
        </li>
−
          </li>
+
</div>
−
          <li>
+
−
             <a href="#!">Link 3</a>
+
−
          </li>
+
−
           <li>
+
−
            <a href="#!">Link 4</a>
+
−
          </li>
+
−
        </ul>
+
  
−
      </div>
+
    <div class="col-sm-2">
−
      <!-- Grid column -->
+
        <li class="list-inline-item">
 +
          <a class="btn-floating btn-gplus mx-1" href="https://www.youtube.com/channel/UC8LLN6O9jiJSXgKqraj_8Xw">
 +
            <img class="icon" src="https://static.igem.org/mediawiki/2018/d/df/T--US_AFRL_CarrollHS--YoutubeLogo.png">
 +
          </a>
 +
        </li>
 +
</div>
  
−
     </div>
+
     <div class="col-sm-2">
−
    <!-- Grid row -->
+
        <li class="list-inline-item">
 +
          <a class="btn-floating btn-gplus mx-1" href="mailto:igem@carrollhs.org" target="_blank">
 +
            <img class="icon" src="https://static.igem.org/mediawiki/2018/8/88/T--US_AFRL_CarrollHS--GoogleLogo.png">
 +
          </a>
 +
        </li>
 +
      </ul>
 +
<div class="col-sm-1"></div>
 +
</div>
  
−
  </div>
+
     <div class="footer-copyright text-center py-3"><font color="#B3B9DC">Contact us @iGEMLabPats or iGEM@carrollhs.org</font></div>
−
  <!-- Footer Links -->
+
−
 
+
−
  <hr>
+
−
 
+
−
  <!-- Call to action -->
+
−
  <ul class="list-unstyled list-inline text-center py-2">
+
−
     <li class="list-inline-item">
+
−
      <h5 class="mb-1">Register for free</h5>
+
−
    </li>
+
−
    <li class="list-inline-item">
+
−
      <a href="#!" class="btn btn-danger btn-rounded">Sign up!</a>
+
−
    </li>
+
−
  </ul>
+
−
  <!-- Call to action -->
+
−
 
+
−
  <hr>
+
−
 
+
−
  <!-- Social buttons -->
+
−
  <ul class="list-unstyled list-inline text-center">
+
−
    <li class="list-inline-item">
+
−
      <a class="btn-floating btn-fb mx-1">
+
−
        <i class="fa fa-facebook"> </i>
+
−
      </a>
+
−
    </li>
+
−
    <li class="list-inline-item">
+
−
      <a class="btn-floating btn-tw mx-1">
+
−
        <i class="fa fa-twitter"> </i>
+
−
      </a>
+
−
    </li>
+
−
    <li class="list-inline-item">
+
−
      <a class="btn-floating btn-gplus mx-1">
+
−
        <i class="fa fa-google-plus"> </i>
+
−
      </a>
+
−
    </li>
+
−
    <li class="list-inline-item">
+
−
      <a class="btn-floating btn-li mx-1">
+
−
        <i class="fa fa-linkedin"> </i>
+
−
      </a>
+
−
    </li>
+
−
    <li class="list-inline-item">
+
−
      <a class="btn-floating btn-dribbble mx-1">
+
−
        <i class="fa fa-dribbble"> </i>
+
−
      </a>
+
−
    </li>
+
−
  </ul>
+
−
  <!-- Social buttons -->
+
−
 
+
−
  <!-- Copyright -->
+
−
  <div class="footer-copyright text-center py-3">© 2018 Copyright:
+
−
    <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>
+
−
  </div>
+
−
  <!-- Copyright -->
+
−
 
+
−
</footer>
+
−
<!-- Footer -->
+
  
 +
  </footer>
 
</div>
 
</div>
 +
</div>
 +
    </div>
 +
  
 
</html>
 
</html>

Latest revision as of 02:44, 18 October 2018

Contact us @iGEMLabPats or iGEM@carrollhs.org