Difference between revisions of "Template:IISER Berhampur"

 
(35 intermediate revisions by 3 users not shown)
Line 254: Line 254:
 
}   
 
}   
  
−
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: 0px;
 
−
}
 
−
 
−
.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;
 
−
}
 
−
 
−
Why this happens?
 
−
 
−
img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions:
 
−
 
−
Change the display from inline to other - add display: block for instance
 
−
 
−
Change the vertical-align property to top (default is baseline)
 
−
 
−
Shrink the text size to 0 by font-size: 0 on the containing block of the inline element.
 
−
 
−
Example
 
−
 
−
Add vertical-align: top to all the three images - see updated fiddle here and snippet below:
 
−
 
−
#image-1 img,
 
−
#image-2 img,
 
−
#image-3 img {
 
−
  background-color: #00f;
 
−
  vertical-align: top;
 
−
}
 
−
.image-1,
 
−
.image-2,
 
−
image-3 {
 
−
  display: block;
 
−
}
 
−
.Wrapper {
 
−
  vertical-align: middle;
 
−
  display: block;
 
−
}
 
−
 
−
/* 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;
 
−
}
 
−
 
−
}
 
  
  
Line 500: Line 293:
  
 
#HQ_page h1, h2, h3, h4, h5 {
 
#HQ_page h1, h2, h3, h4, h5 {
−
   color:#114f27;
+
   color:black;
−
  text-shadow: 0px 0px 2px white;
+
 
   font-family: 'Quicksand';
 
   font-family: 'Quicksand';
 
   text-align: center;
 
   text-align: center;
Line 522: Line 314:
  
 
#HQ_page td {
 
#HQ_page td {
−
     padding: 0;
+
     padding: 10px;
−
     border: 0 solid black;
+
     border: 2px solid white;
 +
    background: #519182;
 +
}
 +
#HQ_page th {
 +
    padding: 10px;
 +
    border: 2px solid white;
 +
    background:lightblue;
 
}
 
}
  
 
#HQ_page table {
 
#HQ_page table {
−
     padding: 0;
+
    color:white;
−
     border: 0 solid black;
+
     padding: 10px;
 +
     border: 2px solid white;
 
}
 
}
  
Line 598: Line 397:
 
     <button class="dropbtn">Project&#9660;</button>
 
     <button class="dropbtn">Project&#9660;</button>
 
     <div class="dropdown-content">
 
     <div class="dropdown-content">
−
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Contribution">Contribution</a>       
+
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Project/Overview">Overview</a>       
 
<a href="https://2020.igem.org/Team:IISER_Berhampur/Description">Description</a>
 
<a href="https://2020.igem.org/Team:IISER_Berhampur/Description">Description</a>
−
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Design">Design</a>
+
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Implementation">Implementation</a>
−
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Engineering">Engineering</a>
+
 
           <a href="https://2020.igem.org/Team:IISER_Berhampur/Experiments">Experiments</a>
 
           <a href="https://2020.igem.org/Team:IISER_Berhampur/Experiments">Experiments</a>
−
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Notebook">Notebook</a>
+
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Engineering">Engineering</a>
−
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Overview">Overview</a>
+
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Project/Notebook">Notebook</a>
−
         <a href="https://2020.igem.org/Team:IISER_Berhampur/Results">Results</a>
+
         <a href="https://2020.igem.org/Team:IISER_Berhampur/Contribution">Contribution</a>
 
     </div>
 
     </div>
 +
 +
 
   </div>  
 
   </div>  
 +
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Model">Modelling</a>
 
<div class="dropdown">
 
<div class="dropdown">
 
     <button class="dropbtn">Team&#9660;</button>
 
     <button class="dropbtn">Team&#9660;</button>
Line 613: Line 414:
 
       <a href="https://2020.igem.org/Team:IISER_Berhampur/Team">Members</a>
 
       <a href="https://2020.igem.org/Team:IISER_Berhampur/Team">Members</a>
 
           <a href="https://2020.igem.org/Team:IISER_Berhampur/Attributions">Attributions</a>
 
           <a href="https://2020.igem.org/Team:IISER_Berhampur/Attributions">Attributions</a>
 +
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Collaborations">Collaborations</a>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
      <div class="dropdown">
+
<a href="https://2020.igem.org/Team:IISER_Berhampur/Parts">Parts</a>
−
    <button class="dropbtn">Parts&#9660;</button>
+
−
    <div class="dropdown-content">
+
−
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Part_Collection">Part Collection</a>
+
−
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Parts">Parts</a>
+
−
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Improve">Improvement</a>
+
−
    </div>
+
  
−
  </div>
+
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Human_Practices">Human Practices</a>
−
      <div class="dropdown">
+
−
    <button class="dropbtn">Human Practices&#9660;</button>
+
−
    <div class="dropdown-content">
+
−
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Human_Practices">Integrated Human Practices</a>
+
−
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Collaborations">Collaborations</a>
+
−
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Education">Science Communication</a>
+
−
    </div>
+
  
−
  </div>
+
         <a href="https://2020.igem.org/Team:IISER_Berhampur/Education">Science Communication</a>
−
         <a href="https://2020.igem.org/Team:IISER_Berhampur/Safety">Safety</a>
+
−
  <a href="javascript:void(0);" class="icon" onclick="myNavbarResponsive()">&#9776;</a>
+
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Splash">Splash</a>
 +
 
 
<a href="https://2020.igem.org/Team:IISER_Berhampur/Awards">Awards</a>
 
<a href="https://2020.igem.org/Team:IISER_Berhampur/Awards">Awards</a>
−
  <div id="navright">
+
 
−
            <a href="https://2020.igem.org/Team:IISER_Berhampur">IISER Berhampur</a>
+
<a href="https://2020.igem.org/Team:IISER_Berhampur/Graphics">Graphics</a>
−
  </div>
+
       
 +
 
 
</div>
 
</div>
−
 
+
<div style="position:fixed; top:0; right:0; width:5vw;height:6vw;z-index:10000;">
 +
<img style="position:relative;top:0;object-fit:contain; " src="https://static.igem.org/mediawiki/2020/6/69/T--IISER_Berhampur--gold.png"></img></div>
 
<script>
 
<script>
 
function myNavbarResponsive() {
 
function myNavbarResponsive() {
Line 652: Line 444:
  
 
</script>
 
</script>
 +
 +
 +
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 17:18, 18 December 2020

IISER-BPR IGEM