Difference between revisions of "Team:IISER Berhampur"

Line 3: Line 3:
 
<html>
 
<html>
 
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap" rel="stylesheet">
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
 +
 
<script>
 
<script>
 
$(document).ready(function(){
 
$(document).ready(function(){
Line 10: Line 13:
  
 
<style  type="text/css">
 
<style  type="text/css">
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
Flash {
 
Flash {
Line 484: Line 479:
  
 
<body>
 
<body>
−
 
−
 
−
 
−
 
  
 
<!--ANIMATION-->
 
<!--ANIMATION-->
Line 533: Line 524:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
<title>Footer</title>
 +
 +
<style>
 +
 +
 +
footer{
 +
position: fixed;
 +
bottom: 0;
 +
}
 +
 +
@media (max-height:800px){
 +
footer { position: static; }
 +
header { padding-top:40px; }
 +
}
 +
 +
 +
.footer-distributed{
 +
background-color: #2c292f;
 +
box-sizing: border-box;
 +
width: 100%;
 +
text-align: left;
 +
font: bold 16px sans-serif;
 +
padding: 50px 50px 60px 50px;
 +
margin-top: 80px;
 +
}
 +
 +
.footer-distributed .footer-left,
 +
.footer-distributed .footer-center,
 +
.footer-distributed .footer-right{
 +
display: inline-block;
 +
vertical-align: top;
 +
}
 +
 +
/* Footer left */
 +
 +
.footer-distributed .footer-left{
 +
width: 30%;
 +
}
 +
 +
.footer-distributed h3{
 +
color:  #ffffff;
 +
font: normal 36px 'Cookie', cursive;
 +
margin: 0;
 +
}
 +
 +
/* The company logo */
 +
 +
.footer-distributed .footer-left img{
 +
width: 30%;
 +
}
 +
 +
.footer-distributed h3 span{
 +
color:  #e0ac1c;
 +
}
 +
 +
/* Footer links */
 +
 +
.footer-distributed .footer-links{
 +
color:  #ffffff;
 +
margin: 20px 0 12px;
 +
}
 +
 +
.footer-distributed .footer-links a{
 +
display:inline-block;
 +
line-height: 1.8;
 +
text-decoration: none;
 +
color:  inherit;
 +
}
 +
 +
.footer-distributed .footer-company-name{
 +
color:  #8f9296;
 +
font-size: 14px;
 +
font-weight: normal;
 +
}
 +
 +
/* Footer Center */
 +
 +
.footer-distributed .footer-center{
 +
width: 35%;
 +
}
 +
 +
 +
.footer-distributed .footer-center i{
 +
background-color:  #33383b;
 +
color: #ffffff;
 +
font-size: 25px;
 +
width: 38px;
 +
height: 38px;
 +
border-radius: 50%;
 +
text-align: center;
 +
line-height: 42px;
 +
margin: 10px 15px;
 +
vertical-align: middle;
 +
}
 +
 +
.footer-distributed .footer-center i.fa-envelope{
 +
font-size: 17px;
 +
line-height: 38px;
 +
}
 +
 +
.footer-distributed .footer-center p{
 +
display: inline-block;
 +
color: #ffffff;
 +
vertical-align: middle;
 +
margin:0;
 +
}
 +
 +
.footer-distributed .footer-center p span{
 +
display:block;
 +
font-weight: normal;
 +
font-size:14px;
 +
line-height:2;
 +
}
 +
 +
.footer-distributed .footer-center p a{
 +
color:  #e0ac1c;
 +
text-decoration: none;;
 +
}
 +
 +
 +
/* Footer Right */
 +
 +
.footer-distributed .footer-right{
 +
width: 30%;
 +
}
 +
 +
.footer-distributed .footer-company-about{
 +
line-height: 20px;
 +
color:  #92999f;
 +
font-size: 13px;
 +
font-weight: normal;
 +
margin: 0;
 +
}
 +
 +
.footer-distributed .footer-company-about span{
 +
display: block;
 +
color:  #ffffff;
 +
font-size: 18px;
 +
font-weight: bold;
 +
margin-bottom: 20px;
 +
}
 +
 +
.footer-distributed .footer-icons{
 +
margin-top: 25px;
 +
}
 +
 +
.footer-distributed .footer-icons a{
 +
display: inline-block;
 +
width: 35px;
 +
height: 35px;
 +
cursor: pointer;
 +
background-color:  #33383b;
 +
border-radius: 2px;
 +
 +
font-size: 20px;
 +
color: #ffffff;
 +
text-align: center;
 +
line-height: 35px;
 +
 +
margin-right: 3px;
 +
margin-bottom: 5px;
 +
}
 +
 +
.footer-sponsor-icons a{
 +
        display: inline-block;
 +
width: 70px;
 +
height: 70px;
 +
cursor: pointer;
 +
background-color:  #33383b;
 +
border-radius: 2px;
 +
 +
font-size: 20px;
 +
color: #ffffff;
 +
text-align: center;
 +
line-height: 35px;
 +
 +
margin-right: 3px;
 +
margin-bottom: 5px; 
 +
}
 +
 +
/* Here is the code for Responsive Footer */
 +
/* You can remove below code if you don't want Footer to be responsive */
 +
 +
 +
@media (max-width: 880px) {
 +
 +
.footer-distributed .footer-left,
 +
.footer-distributed .footer-center,
 +
.footer-distributed .footer-right{
 +
display: block;
 +
width: 100%;
 +
margin-bottom: 40px;
 +
text-align: center;
 +
}
 +
 +
.footer-distributed .footer-center i{
 +
margin-left: 0;
 +
}
 +
 +
}
 +
 +
</style>
 +
 +
<footer class="footer-distributed">
 +
 +
<div class="footer-left">
 +
                               
 +
<h3>IISER<span>Berhampur</span></h3>
 +
                                <div class="footer-icons">
 +
<a href="https://www.facebook.com/igem.iiserbpr/"><i class="fa fa-facebook"></i></a>
 +
<a href="https://twitter.com/igem_iiserbpr?lang=en"><i class="fa fa-twitter"></i></a>
 +
<a href="https://www.instagram.com/igem.iiserbpr/"><i class="fa fa-instagram"></i></a>
 +
<a href="https://www.youtube.com/channel/UCQ72pLMqGFVBqjID6uasMWg?app=desktop"><i class="fa fa-youtube"></i></a>
 +
</div>
 +
                                <br><br>
 +
<p class="footer-company-name">© 2020 Frappe IISER Berhampur</p>
 +
                             
 +
</div>
 +
 +
<div class="footer-center">
 +
<div>
 +
<i class="fa fa-map-marker"></i>
 +
  <p>ITI Transit Campus,<br>
 +
Engineering School Road,<br>
 +
Khodasingi, Brahmapur, Odisha 760010<br>
 +
                                                +91 9556882282
 +
                                          </p>
 +
</div>
 +
 +
<div>
 +
<i class="fa fa-envelope"></i>
 +
<p><a href="mailto:igem2020@iiserbpr.ac.in">igem2020@iiserbpr.ac.in</a></p>
 +
</div>
 +
</div>
 +
<div class="footer-right">
 +
<p class="footer-company-about">
 +
<span>Our Sponsors</span></p>
 +
<div class="footer-sponsor-icons">
 +
<a href="#"><i class="fa fa-facebook"></i></a>
 +
<a href="#"><i class="fa fa-twitter"></i></a>
 +
<a href="#"><i class="fa fa-instagram"></i></a>
 +
<a href="#"><i class="fa fa-youtube"></i></a>
 +
</div>
 +
 +
</div>
 +
</footer>
  
 
</body>
 
</body>
 +
 
</html>
 
</html>

Revision as of 14:46, 2 October 2020

IISER-BPR IGEM

IISER-BPR IGEM Home-IISER Berhampur
Project
FRaPPe
Footer

IISERBerhampur



© 2020 Frappe IISER Berhampur

ITI Transit Campus,
Engineering School Road,
Khodasingi, Brahmapur, Odisha 760010
+91 9556882282

Our Sponsors