Difference between revisions of "Team:Mingdao/test5"

Line 1: Line 1:
−
<html>                        
+
<html>
 +
 
 +
 
 +
 
 +
.botnav {
 +
z-index: 99999999;
 +
width: 100vw;
 +
height: 15vh;
 +
position: absolute;
 +
        top: 195vh;
 +
background-color: #f6f8fb;
 +
}
 +
 
 +
.youtube {
 +
position: absolute;
 +
z-index: 1000;
 +
width: 6vh;
 +
bottom: 26%;
 +
left: 43.9%;
 +
border-radius: 50%;
 +
}
 +
 
 +
.youtube:hover {
 +
cursor: pointer;
 +
background-color: #00bbff;
 +
}
 +
 
 +
.instagram {
 +
position: absolute;
 +
z-index: 1000;
 +
width: 6vh;
 +
bottom: 26%;
 +
left: 48%;
 +
}
 +
 
 +
.instagram:hover {
 +
cursor: pointer;
 +
background: linear-gradient(to bottom left, #5778f9, #b84cf7, #f2527c, #ffb966, #f738ba);
 +
border-radius: 31%;
 +
}
 +
 
 +
.fb {
 +
position: absolute;
 +
border-radius: 20%;
 +
z-index: 1000;
 +
width: 6vh;
 +
bottom: 26%;
 +
left: 52.1%;
 +
}
 +
 
 +
.fb:hover {
 +
cursor: pointer;
 +
background-color: #5277c4;
 +
}
 +
                         
 
</div>
 
</div>
 
   <section id="footer-sec" style="background-color: #d6d6d6 !important">
 
   <section id="footer-sec" style="background-color: #d6d6d6 !important">
Line 30: Line 84:
 
                 <div class="col-md-3">
 
                 <div class="col-md-3">
 
                     <h2 style="text-align: center" color="#2E2E2E"> Follow us on </h2>
 
                     <h2 style="text-align: center" color="#2E2E2E"> Follow us on </h2>
−
                    <div style="text-align: center;">
+
                 
−
                    <a href="https://www.facebook.com/mingdaoigem/?ref=bookmarks" target="_blank" id="facebook" style="padding: 0 0.5em 0 0;"><i class="fa fa-facebook-square" style="font-size:48px;color:blue"></i></a> 
+
<div class="botnav">
−
 
+
    <a href="https://www.youtube.com/channel/UCy54kiB9lqKwSvg9CyeTe6g" target="_blank">
−
                    <span style="color: grey; text-align: center;">&amp;</span>
+
      <img class="youtube" src="https://image.flaticon.com/icons/svg/87/87892.svg" alt="">
−
 
+
    </a>
−
                    <a href=https://www.instagram.com/mingdao_igem_2018/?hl=zh-tw" target="_blank" id="instagram" style="padding: 0 0 0 0.5em;"><i class="fa fa-instagram" style="font-size:48px;color:orange"></i></a>
+
<a href="https://www.instagram.com/mingdao_igem_2018/?hl=zh-tw" target="_blank">
−
 
+
        <img class="instagram" src="https://image.flaticon.com/icons/svg/87/87884.svg" alt="">
−
                    <span style="color: grey; text-align: center;">&amp;</span>
+
    </a>
−
 
+
<a href="https://www.facebook.com/mingdaoigem/?ref=bookmarks" target="_blank">
−
                    <a href=https://www.youtube.com/channel/UCy54kiB9lqKwSvg9CyeTe6g target="_blank" id="youtube" style="padding: 0 0 0 0.5em;"><i class="fa fa-youtube-play" style="font-size:48px;color:red"></i></a>
+
        <img class="fb" src="https://image.flaticon.com/icons/svg/87/87887.svg" alt="">
−
 
+
    </a>
−
 
+
</div>
  
  

Revision as of 05:24, 4 October 2018

.botnav { z-index: 99999999; width: 100vw; height: 15vh; position: absolute; top: 195vh; background-color: #f6f8fb; } .youtube { position: absolute; z-index: 1000; width: 6vh; bottom: 26%; left: 43.9%; border-radius: 50%; } .youtube:hover { cursor: pointer; background-color: #00bbff; } .instagram { position: absolute; z-index: 1000; width: 6vh; bottom: 26%; left: 48%; } .instagram:hover { cursor: pointer; background: linear-gradient(to bottom left, #5778f9, #b84cf7, #f2527c, #ffb966, #f738ba); border-radius: 31%; } .fb { position: absolute; border-radius: 20%; z-index: 1000; width: 6vh; bottom: 26%; left: 52.1%; } .fb:hover { cursor: pointer; background-color: #5277c4; }