Difference between revisions of "Template:NCKU Tainan/footer"

 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{Template:NCKU_Tainan/block_css}}
 
<html>
 
<html>
−
      <div class="footer" id="footer_id">
 
−
        <div class="inner_footer">
 
−
            <div class="logo_container">
 
−
                <img src=""> <! -- 此處放橫的LOGO-->
 
−
            </div>
 
−
 
−
            <div class="footer_third">
 
−
                <h1>FOLLOW US</h1>
 
−
                <a href="https://www.instagram.com/igemncku/">
 
−
                    <div class="icon">
 
−
                        <img src="https://static.igem.org/mediawiki/2020/b/b0/T--UPF_Barcelona--instagram.png"> <! -- 此處放IG icon-->
 
−
                    </div>
 
−
                </a>
 
−
                <a href="https://www.facebook.com/igem.ncku">
 
−
                    <div class="icon">
 
−
                        <img src="https://static.igem.org/mediawiki/2020/4/45/T--UPF_Barcelona--twitter.png"> <! -- 此處放FB icon-->
 
−
                    </div>
 
−
                </a>
 
−
               
 
−
               
 
−
            </div>
 
−
 
−
            <div class="footer_third">
 
−
                <h1>CONTACT US</h1>
 
−
                <li>e-mail : igem.club@gs.ncku.edu.tw</li>
 
−
                <li>
 
−
                    phone:06-2757575 <br>
 
−
                   
 
−
                </li>
 
−
                   
 
−
            </div>
 
−
 
−
           
 
−
        </div>
 
−
 
−
    </div>
 
−
 
−
 
−
 
 
<style>
 
<style>
−
 
+
#bodyContent a[href ^="mailto:"], .link-mailto{
−
*{
+
     padding-right:0;
−
    margin: 0;
+
−
     padding: 0;
+
−
    list-style: none;
+
−
    text-decoration: none;
+
 
}
 
}
−
 
+
/*footer start*/   
−
.footer{
+
footer{
 +
    background: #332E2D;
 
     width: 100%;
 
     width: 100%;
−
     display: block;
+
     height:100%;
−
     overflow: hidden;
+
     margin-top: 2%;
−
     padding: 50px 0;
+
     position: relative;
−
    box-sizing: border-box;
+
     z-index: 100;
−
     background-color:#332E2D;
+
 
}
 
}
−
 
+
.footer-container{
−
.inner_footer{
+
     padding: 1rem 0 2rem 0;
−
     display: block;
+
−
    margin: 0 auto;
+
−
    max-width: 1100px;
+
−
    height: 100%;
+
 
}
 
}
−
 
+
.footer-row{
−
.inner-footer {
+
    margin:1rem 2rem;
 +
}
 +
footer .colOne{
 
     display: flex;
 
     display: flex;
−
     justify-content: space-around;
+
     justify-content: space-between;
−
     flex-wrap: wrap;
+
     padding:0;
 
}
 
}
−
 
+
footer .colTwo{
−
 
+
     display: flex;
−
 
+
     flex-direction: column;
−
 
+
     padding:0;
−
.inner_footer .logo_container{
+
     margin:1rem 0;
−
     width: 45%;
+
    height:50px;
−
     float: left;
+
−
     height: 100%;
+
−
     display: block;
+
 
}
 
}
−
 
+
footer .col-12{
−
.inner_footer .logo_container img{
+
     padding-right: 0;
−
     width: 400px;
+
     padding-left: 0;
−
     height: auto;
+
 
}
 
}
−
 
+
.col-two-icon{
−
.inner_footer .footer_third{
+
     display: flex;
−
     width: calc(21.67% - 20px);
+
     justify-content: space-evenly;
−
     margin-right: 10px;
+
     align-self: top;
−
     float: left;
+
     padding:0;
−
    height: 100%;
+
−
    text-align: center;
+
−
}
+
−
 
+
−
.inner_footer .footer_third:last-child{
+
−
     margin-right: 0;
+
 
}
 
}
−
 
+
.colOne img{
−
.icon img{
+
    height:70px;
 
     width: 60px;
 
     width: 60px;
−
     height: 60px;
+
     margin:0;
 +
    padding:0;
 +
    margin:0 0 10px 0;
 
}
 
}
−
 
+
.colTwo img{
−
.footer_third a .icon {
+
     height:30px;
−
     position: relative;
+
     width: 30px;
−
     color: #332E2D;
+
     margin:0;
−
    transition: .5s;
+
−
    z-index: 3;
+
−
  }
+
−
 
+
−
.footer_third a:hover .icon {
+
−
    color: #FFFBF3;
+
−
     transform: rotateY(360deg);
+
 
}
 
}
−
 
+
.footer-text{
−
.inner_footer .footer_third h1{
+
     align-self: baseline;
−
    font-size: 22px;
+
−
    display: block;
+
−
    color:#FFFBF3;
+
−
    width: 100%;
+
−
    margin-bottom: 20px;
+
−
}
+
−
 
+
−
.inner_footer .footer_third a{
+
−
     display: inline-block;
+
−
    font-size: 18px;
+
−
    color:#FFFBF3;
+
−
    font-weight: 200;
+
−
    width: 30%;
+
−
    padding-bottom: 5px;
+
−
}
+
−
 
+
−
.inner_footer .footer_third li{
+
−
    padding: 0 5px;
+
−
    font-size: 20px;
+
 
     color: #FFFBF3;
 
     color: #FFFBF3;
 +
    font-family: cursive;
 
}
 
}
−
 
+
footer a:link{
−
.inner_footer .footer_third span{
+
     text-decoration: none;
−
     color:#F6DAB1;
+
−
    font-size: 18px;
+
−
    font-weight: 200;
+
−
    display: block;
+
−
    width: 100%;
+
−
    padding-top: 20px;
+
 
}
 
}
−
 
+
/*large device like computer*/
−
@media(max-width: 800px){
+
@media (min-width: 992px) {  
−
     .footer .inner_footer{
+
     .colOne img{
−
         width: 90%;
+
        height:100px;
 +
         width: 80px;
 +
        margin:0;
 +
        padding:0;
 +
        margin:0;
 
     }
 
     }
−
     .inner_footer .logo_container,
+
     .col-two-icon{
−
    .inner_footer .footer_third{
+
         justify-content:space-between;
−
         width: 100%;
+
−
        margin-bottom: 30px;
+
−
        text-align: center;
+
 
     }
 
     }
 
}
 
}
−
 
+
/*footer end*/
−
 
+
 
</style>
 
</style>
 +
    <!--htmlfooter start-->
 +
<footer>
 +
  <div class="footer-container">
 +
    <div class="row footer-row">
 +
      <div class="col-12 col-md-6 colOne">
 +
        <!--icon of logo-->
 +
        <div id="gutImage">
 +
          <a href="https://2021.igem.org/Team:NCKU_Tainan"><img src="https://static.igem.org/mediawiki/2021/a/a8/T--NCKU_Tainan--footer.png"></a>
 +
        </div>
 +
        <!--icon of NCKUigem-->
 +
        <div>
 +
          <a href="https://www.facebook.com/igem.ncku"><img src="https://static.igem.org/mediawiki/2021/3/36/T--NCKU_Tainan--igemnckunewqaz.jpg"></a>
 +
        </div>
 +
        <!--icon of NCKU-->
 +
        <div>
 +
          <a href="http://www.ncku.edu.tw/"><img src="https://static.igem.org/mediawiki/2021/4/43/T--NCKU_Tainan--ncku.png"></a>
 +
        </div>
 +
        <!--icon of Diamond-->
 +
        <div>
 +
          <a href="http://www.diamondcapital.com.tw/"><img src="https://static.igem.org/mediawiki/2021/9/90/T--NCKU_Tainan--diamondnewwsx.png"></a>
 +
        </div>
 +
        <!--icon of 全-->
 +
        <div>
 +
          <a href="https://www.twbioscience.com"><img src="https://static.igem.org/mediawiki/2021/b/b7/T--NCKU_Tainan--footer_picture.png"></a>
 +
        </div>
 +
      </div>
 +
      <div class="col-md-1 footer-col1" style='border-right:3px solid #ffffff;'></div>
 +
      <div class="col-md-1 footer-col1"></div>
 +
      <div class="col-12 col-md-4 colTwo">
 +
        <div class="col-12 col-md-12 col-two-icon">
 +
          <!--icon of phone-->
 +
          <div>
 +
            <a href="tel:+88662757575"><img src="https://static.igem.org/mediawiki/2021/f/fe/T--NCKU_Tainan--call.png"></a>
 +
          </div>
 +
          <!--icon of mail-->
 +
          <div>
 +
            <a href="mailto:igem.ncku.tainan@gmail.com"><img src="https://static.igem.org/mediawiki/2021/9/91/T--NCKU_Tainan--mail.png"></a>
 +
          </div>
 +
          <!--icon of instagram-->
 +
          <div>
 +
            <a href="https://www.instagram.com/igemncku/" target="_blank"><img src="https://static.igem.org/mediawiki/2021/f/f7/T--NCKU_Tainan--ig.png"></a>
 +
          </div>
 +
          <!--icon of facebook-->
 +
          <div>
 +
            <a href="https://www.facebook.com/igem.ncku" target="_blank"><img src="https://static.igem.org/mediawiki/2021/d/d2/T--NCKU_Tainan--facebook.png"></a>
 +
          </div>
 +
        </div>
 +
        <p class="col-12 footer-text" style="font-size:1.1rem;">
 +
          e-mail : igem.ncku.tainan@gmail.com
 +
          <br>
 +
          phone : 06-2757575
 +
        </p>
 +
      </div>
 +
      <!--end of col-4-->
 +
    </div>
 +
  </div>
 +
</footer>
 
</html>
 
</html>

Latest revision as of 13:10, 21 October 2021

e-mail : igem.ncku.tainan@gmail.com
phone : 06-2757575