Difference between revisions of "Template:Team:Harvard BioDesign/Templates:footer"

Line 16: Line 16:
 
<body>
 
<body>
  
−
  <div id="wrapper">
+
    #footerContainer {
−
   
+
      background-color: #000000;
−
     <div id="header">
+
      height: 70px;
−
    </div><!-- #header -->
+
            width:100%;
−
   
+
      text-align: left;
−
    <div id="content">
+
            margin-right: 0px;
−
    </div><!-- #content -->
+
            margin-left: 0px;
−
   
+
            padding-top: 0px;
−
    <div id="footer">
+
            font-size: 45px;
−
    </div><!-- #footer -->
+
            color: #ffffff;
−
   
+
            font-variant: small-caps;
−
  </div><!-- #wrapper -->
+
      font-family:"Times New Roman";
 +
            position:absolute;
 +
            bottom:0px;
 +
            vertical-align: text-top;
 +
            font-weight: 50;
 +
            font-stretch: ultra-condensed;
 +
        }
 +
 
 +
        #facebook{
 +
            position:absolute;
 +
            right: 10%;
 +
            top:0;
 +
        }
 +
        #twitter{
 +
            position:absolute;
 +
            right: 5%;
 +
            top:0;
 +
        }
 +
        #email{
 +
            position:absolute;
 +
            right: 0;
 +
            top:0;
 +
        }
 +
        #logo{
 +
            position:absolute;
 +
            float:right;
 +
            bottom: 0px;
 +
            right: 0px;
 +
            width:100%;
 +
        }
 +
  </style>
 +
     
 +
     <div id="footerContainer">
 +
            <div "col-xs-3 col-sm-2 col-lg-2">Sticoli</div>
 +
                <div id="facebook" class="col-xs-3 col-sm-1 col-lg-1">
 +
                    <a href="https://www.facebook.com/harvardigem2015" target="_blank">
 +
                    <img src="https://static.igem.org/mediawiki/2015/e/ed/Harvard2015Facebookwhite.png"alt="Facebook Logo" style="width:68px;height:68px;"></a>
 +
                </div>
 +
 
 +
                <div id="twitter" class="col-xs-3 col-sm-1 col-lg-1">
 +
                    <a href="https://twitter.com/HarvardiGEM2015" target="_blank">
 +
                    <img src="https://static.igem.org/mediawiki/2015/6/64/Harvard2015Twitterlogowhite.png"alt="Twitter Logo" style="width:68px;height:68px;"></a>
 +
                </div>
 +
 
 +
                <div id="email" class="col-xs-3 col-sm-1 col-lg-1">
 +
                    <a href="mailto:harvardigem2015@gmail.com">
 +
                    <img src="https://static.igem.org/mediawiki/2015/9/98/Harvard2015Emaillogowhite.png" alt="Email Logo" style="width:68px;height:68px;"></a>
 +
                </div>
 +
 
 +
            <div id="logo">
 +
                <img src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png"alt="Harvard Logo" style="width:317px;height:216px;">
 +
            </div>
 +
    </div>
 
    
 
    
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 14:52, 9 July 2015

How To Keep Your Footer At The Bottom of The Page - CSSReset.com #footerContainer { background-color: #000000; height: 70px; width:100%; text-align: left; margin-right: 0px; margin-left: 0px; padding-top: 0px; font-size: 45px; color: #ffffff; font-variant: small-caps; font-family:"Times New Roman"; position:absolute; bottom:0px; vertical-align: text-top; font-weight: 50; font-stretch: ultra-condensed; } #facebook{ position:absolute; right: 10%; top:0; } #twitter{ position:absolute; right: 5%; top:0; } #email{ position:absolute; right: 0; top:0; } #logo{ position:absolute; float:right; bottom: 0px; right: 0px; width:100%; }

Sticoli