Difference between revisions of "Template:IISER Berhampur"

 
(77 intermediate revisions by 3 users not shown)
Line 2: Line 2:
 
<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">
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
 
+
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
  
 
<script>
 
<script>
Line 14: Line 14:
 
Flash {
 
Flash {
 
   font-family: 'Quicksand';font-size: 10vw;
 
   font-family: 'Quicksand';font-size: 10vw;
−
   color: #E5F6F1;
+
  padding:0;
−
   animation: color-change 1.5s infinite;
+
  line-height:70%;
 +
   color: #245d6b;
 +
   animation: color-change 4s 1;
 
}
 
}
  
 
@keyframes color-change {
 
@keyframes color-change {
−
   0% { text-shadow: 0px 0px 12px red; }
+
   0%,50% { opacity: 0; transform: scale(0, 0); }
−
  25% { text-shadow: 0px 0px 12px blue; }
+
   100% { opacity:1; transform: scale(1, 1); }
−
  50% { text-shadow: 0px 0px 12px green; }
+
−
   75% { text-shadow: 0px 0px 12px yellow; }
+
−
  100% { text-shadow: 0px 0px 12px orange; }
+
  
 
}
 
}
Line 39: Line 38:
 
}
 
}
 
.centered {
 
.centered {
 +
  padding:0;
 +
  margin: 0;
 
   position: absolute;
 
   position: absolute;
 
   left:50vw;
 
   left:50vw;
Line 47: Line 48:
 
@media screen and (max-width: 900px) {
 
@media screen and (max-width: 900px) {
 
   .centered {
 
   .centered {
−
     top: 50vh;
+
     top: 25vh;
 
   }
 
   }
 
}
 
}
Line 65: Line 66:
 
body {
 
body {
 
     background-color: #d2efe7;
 
     background-color: #d2efe7;
−
     font-family: 'Quicksand', sans-serif;
+
     font-family: 'Lato', sans-serif;
 
     margin: 0 0 0 0;
 
     margin: 0 0 0 0;
 
     padding: 0 0 0 0;
 
     padding: 0 0 0 0;
Line 123: Line 124:
  
 
.navbar {
 
.navbar {
 +
  font-family:"Quicksand";
 
   position:fixed;
 
   position:fixed;
 
   top:16px;
 
   top:16px;
Line 129: Line 131:
 
   //overflow: hidden;
 
   //overflow: hidden;
 
   background-color:#ace2d3;
 
   background-color:#ace2d3;
 +
  box-shadow: 0px 5px 10px grey;
 
}
 
}
  
Line 251: 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;
 
−
}
 
−
 
−
}
 
  
  
 
/*MAIN BODY CONTENT SECTION BEGINS*/
 
/*MAIN BODY CONTENT SECTION BEGINS*/
 
.content-section {
 
.content-section {
−
     margin: 0 0 0 0;
+
     margin: 0 10% 0 10%;
 
     padding: 3% 3% 5% 3%;
 
     padding: 3% 3% 5% 3%;
−
     background: black;
+
     background-color: #d2efe7;
 
     line-height: 1.6;
 
     line-height: 1.6;
 
      
 
      
Line 474: Line 270:
 
     font-family: "Trebuchet MS";
 
     font-family: "Trebuchet MS";
 
  }
 
  }
−
  img {
+
  .content-section img {
 +
    position:relative;
 +
    top:0px;
 
     display: block;
 
     display: block;
 
     height: 50%;
 
     height: 50%;
 
     width: 50%;
 
     width: 50%;
−
     margin: auto;
+
     margin: auto;  
−
   
+
 
  }
 
  }
  
Line 485: Line 282:
 
     height: 100%;
 
     height: 100%;
 
     width: 100%;
 
     width: 100%;
−
}
 
−
 
−
/*#navbar span img {
 
−
  display: block;
 
−
  height: 7.5%;
 
−
  width: 7.5%;
 
−
  float: left;
 
−
 
 
−
  padding: 0 0 0 3%;
 
−
}*/
 
−
 
−
#navbar img {
 
−
  display: inline-block;
 
−
  height: 5%;
 
−
  width: 5%;
 
−
  margin-left: 5px;
 
−
  margin-top: 5px;
 
 
}
 
}
  
Line 507: Line 287:
 
   font-size: 125%;
 
   font-size: 125%;
 
   text-align: center;
 
   text-align: center;
−
   font-family: "avenir";
+
   font-family: 'Lato';
 +
  color: #245d6b;
 
   line-height: 27px;
 
   line-height: 27px;
 
}
 
}
  
 
#HQ_page h1, h2, h3, h4, h5 {
 
#HQ_page h1, h2, h3, h4, h5 {
−
   font-family: "avenir";
+
  color:black;
 +
   font-family: 'Quicksand';
 
   text-align: center;
 
   text-align: center;
 
}
 
}
Line 532: 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 608: 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/Partnership">Partnership</a>
+
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Project/Notebook">Notebook</a>
−
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Proof_of_concepts">Proof Of Concepts</a>
+
         <a href="https://2020.igem.org/Team:IISER_Berhampur/Contribution">Contribution</a>
−
         <a href="https://2020.igem.org/Team:IISER_Berhampur/Results">Results</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>
 
     <div class="dropdown-content">
 
     <div class="dropdown-content">
−
       <a href="https://2020.igem.org/Team:IISER_Berhampur/Team">Team</a>
+
       <a href="https://2020.igem.org/Team:IISER_Berhampur/Team">Members</a>
−
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Collaborations">Collaborations</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/Inclusion">Inclusion</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/Human_Practices">Human Practices</a>
−
      <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/Education">Science Communication</a>
−
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Improve">Improvement</a>
+
−
    </div>
+
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Splash">Splash</a>
−
  </div>
+
   
−
<a href="https://2020.igem.org/Team:IISER_Berhampur/Human_Practices">Human Practices</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/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>
 
−
  </div>
 
−
</div>
 
  
 +
<a href="https://2020.igem.org/Team:IISER_Berhampur/Graphics">Graphics</a>
 +
       
 +
 +
</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 656: Line 444:
  
 
</script>
 
</script>
 +
 +
 +
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 17:18, 18 December 2020

IISER-BPR IGEM