Sunnywu0369 (Talk | contribs) |
Sunnywu0369 (Talk | contribs) |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<style> | <style> | ||
− | + | #bodyContent a[href ^="mailto:"], .link-mailto{ | |
− | + | padding-right:0; | |
− | + | ||
− | padding: 0 | + | |
− | + | ||
− | + | ||
} | } | ||
− | + | /*footer start*/ | |
− | + | footer{ | |
+ | background: #4F545F; | ||
width: 100%; | width: 100%; | ||
− | + | height:100%; | |
− | + | margin-top: 2%; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .footer-container{ | |
− | . | + | padding: 1rem 0 2rem 0; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .footer-row{ | |
− | . | + | margin:1rem 2rem; |
+ | } | ||
+ | footer .colOne{ | ||
display: flex; | display: flex; | ||
− | justify-content: space- | + | justify-content: space-between; |
− | + | padding:0; | |
} | } | ||
− | + | footer .colTwo{ | |
− | + | display: flex; | |
− | + | flex-direction: column; | |
− | + | padding:0; | |
− | + | margin:1rem 0; | |
− | + | height:50px; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | footer .col-12{ | |
− | + | padding-right: 0; | |
− | + | padding-left: 0; | |
− | + | ||
} | } | ||
− | + | .col-two-icon{ | |
− | . | + | display: flex; |
− | + | justify-content: space-evenly; | |
− | + | align-self: top; | |
− | + | padding:0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .colOne img{ | |
− | . | + | height:70px; |
width: 60px; | width: 60px; | ||
− | + | margin:0; | |
+ | padding:0; | ||
+ | margin:0 0 10px 0; | ||
} | } | ||
− | + | .colTwo img{ | |
− | . | + | height:30px; |
− | + | width: 30px; | |
− | + | margin:0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .footer-text{ | |
− | . | + | align-self: baseline; |
− | + | color: white; | |
− | + | font-family: sans-serif; | |
− | color: | + | |
− | + | ||
− | + | ||
} | } | ||
− | + | footer a:link{ | |
− | + | text-decoration: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | /*large device like computer*/ | |
− | + | @media (min-width: 992px) { | |
− | + | .colOne img{ | |
− | + | height:100px; | |
− | + | width: 80px; | |
− | + | margin:0; | |
− | + | padding:0; | |
− | + | margin:0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .col-two-icon{ |
− | + | justify-content:space-between; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
} | } | ||
− | + | /*footer end*/ | |
− | + | ||
</style> | </style> | ||
+ | <!--htmlfooter start--> | ||
+ | <footer> | ||
+ | <div class="container footer-container"> | ||
+ | <div class="row footer-row"> | ||
+ | <div class="col-12 col-md-6 colOne"> | ||
+ | <!--icon of logo--> | ||
+ | <div id="gutImage"> | ||
+ | <a href="https://2019.igem.org/Team:NCKU_Tainan"><img src="https://static.igem.org/mediawiki/2019/thumb/f/fe/T--NCKU_Tainan--Logotext_icon.png/499px-T--NCKU_Tainan--Logotext_icon.png"></a> | ||
+ | </div> | ||
+ | <!--icon of NCKUigem--> | ||
+ | <div> | ||
+ | <a href="https://www.facebook.com/igem.ncku"><img src="https://static.igem.org/mediawiki/2019/thumb/d/da/T--NCKU_Tainan--Footer_iGEM_NCKU.png/428px-T--NCKU_Tainan--Footer_iGEM_NCKU.png"></a> | ||
+ | </div> | ||
+ | <!--icon of NCKU--> | ||
+ | <div> | ||
+ | <a href="http://www.ncku.edu.tw/"><img src="https://static.igem.org/mediawiki/2019/thumb/f/f3/T--NCKU_Tainan--NCKUtext_icon.png/499px-T--NCKU_Tainan--NCKUtext_icon.png"></a> | ||
+ | </div> | ||
+ | <!--icon of Diamond--> | ||
+ | <div> | ||
+ | <a href="http://www.diamondcapital.com.tw/"><img src="https://static.igem.org/mediawiki/2019/thumb/f/f1/T--NCKU_Tainan--Diamodtext_icon.png/499px-T--NCKU_Tainan--Diamodtext_icon.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/2019/thumb/b/b4/T--NCKU_Tainan--Phone_icon.png/600px-T--NCKU_Tainan--Phone_icon.png"></a> | ||
+ | </div> | ||
+ | <!--icon of mail--> | ||
+ | <div> | ||
+ | <a href="mailto:igem.ncku.tainan@gmail.com"><img src="https://static.igem.org/mediawiki/2019/thumb/f/fe/T--NCKU_Tainan--Mail_icon.png/600px-T--NCKU_Tainan--Mail_icon.png"></a> | ||
+ | </div> | ||
+ | <!--icon of instagram--> | ||
+ | <div> | ||
+ | <a href="https://www.instagram.com/igemncku/" target="_blank"><img src="https://static.igem.org/mediawiki/2019/thumb/4/44/T--NCKU_Tainan--Instagram_icon.png/600px-T--NCKU_Tainan--Instagram_icon.png"></a> | ||
+ | </div> | ||
+ | <!--icon of facebook--> | ||
+ | <div> | ||
+ | <a href="https://www.facebook.com/igem.ncku" target="_blank"><img src="https://static.igem.org/mediawiki/2019/thumb/e/ec/T--NCKU_Tainan--Facebook_icon.png/600px-T--NCKU_Tainan--Facebook_icon.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> |
Revision as of 09:31, 29 June 2021