Difference between revisions of "Template:IISER Berhampur"

 
(102 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
html
+
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap" rel="stylesheet">
−
{ height: 100%;}
+
<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>
−
{ margin: 0;
+
$(document).ready(function(){
−
  padding: 0;}
+
$('p:empty').css('display','none');
 +
});
 +
</script>
  
−
body
+
<style  type="text/css">
−
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
+
−
  background: #FFF;
+
−
  color: #555;}
+
  
−
p
+
Flash {
−
{ padding: 0 0 20px 0;
+
  font-family: 'Quicksand';font-size: 10vw;
−
   line-height: 1.7em;}
+
  padding:0;
 +
   line-height:70%;
 +
  color: #245d6b;
 +
  animation: color-change 4s 1;
 +
}
  
−
img
+
@keyframes color-change {
−
{ border: 0;}
+
  0%,50% { opacity: 0; transform: scale(0, 0); }
 +
  100% { opacity:1; transform: scale(1, 1); }
  
−
h1, h2, h3, h4, h5, h6
+
}
−
{ color: #362C20;
+
.container {
−
   letter-spacing: 0em;
+
  position: relative;
−
   padding: 0 0 5px 0;}
+
  text-align: center;
 +
  color: white;
 +
}
 +
.container img
 +
{    
 +
    position: relative;
 +
    top:-7vw;
 +
    height: 100%;
 +
    width: 100%;
 +
}
 +
.centered {
 +
   padding:0;
 +
  margin: 0;
 +
  position: absolute;
 +
  left:50vw;
 +
  transform:translate(-50%,0%);
 +
  top: 70vh;
 +
  z-index:2;
 +
}
 +
@media screen and (max-width: 900px) {
 +
  .centered {
 +
    top: 25vh;
 +
  }
 +
}
  
−
h1, h2, h3
+
/*UNIVERSAL STUFF FOR ALL PAGES*/
−
{ font: normal 170% 'century gothic', arial;
+
html {
−
   margin: 0 0 15px 0;
+
    margin: 0;
−
   padding: 15px 0 5px 0;
+
    padding: 0;
−
   color: #000;}
+
    border: none;
 +
}
 +
.container {
 +
   margin: 0 0 0 0;
 +
   padding: 0 0 0 0;
 +
   border: none;
 +
}
  
−
h2
+
body {
−
{ font-size: 160%;
+
    background-color: #d2efe7;
−
  padding: 9px 0 5px 0;
+
    font-family: 'Lato', sans-serif;
−
  color: #009FBC;}
+
    margin: 0 0 0 0;
 +
    padding: 0 0 0 0;
 +
    border: none;
 +
    height: 0px;
 +
}
  
−
h3
+
/* width */
−
{ font-size: 140%;
+
::-webkit-scrollbar {
−
   padding: 5px 0 0 0;}
+
   width: 12px;
 +
}
  
−
h4, h6
+
/* Track */
−
{ color: #009FBC;
+
::-webkit-scrollbar-track {
−
   padding: 0 0 5px 0;
+
  background: white;  
−
   font: normal 110% arial;
+
   margin-top: 0px;
−
  text-transform: uppercase;}
+
   margin-bottom: 0px;
 +
}
 +
 +
/* Handle */
 +
::-webkit-scrollbar-thumb {
 +
  background: #bfe9dd;  
 +
}
  
−
h5, h6
+
/* Handle on hover */
−
{ color: #888;
+
::-webkit-scrollbar-thumb:hover {
−
  font: normal 95% arial;
+
   background: #86d5bf;  
−
  letter-spacing: normal;
+
}
−
   padding: 0 0 15px 0;}
+
  
−
a, a:hover
+
#top_title {
−
{ outline: none;
+
display: none;
−
  text-decoration: underline;
+
margin-bottom: 0px;
−
  color: #AEB002;}
+
  
−
a:hover
+
}
−
{ text-decoration: none;}
+
  
−
blockquote
+
#content {
−
{ margin: 20px 0;  
+
margin: 0;
−
  padding: 10px 20px 0 20px;
+
display: inline;
−
  border: 1px solid #E5E5DB;
+
        padding: 0;
−
  background: #FFF;}
+
  
−
ul
+
}
−
{ margin: 2px 0 22px 17px;}
+
  
−
ul li
+
#globalWrapper {
−
{ list-style-type: circle;
+
padding: 0;
−
  margin: 0 0 6px 0;
+
}
−
  padding: 0 0 4px 5px;
+
−
  line-height: 1.5em;}
+
  
−
ol
 
−
{ margin: 8px 0 22px 20px;}
 
  
−
ol li
+
p {
−
{ margin: 0 0 11px 0;}
+
margin: 0;
 +
}
  
−
.left
 
−
{ float: left;
 
−
  width: auto;
 
−
  margin-right: 10px;}
 
  
−
.right
+
#home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {display:none;}
−
{ float: right;  
+
#content {margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
  width: auto;
+
#bodyContent a[href ^="https://"], .link-https {padding-right:0px;}
−
  margin-left: 10px;}
+
  
−
.center
+
 
−
{ display: block;
+
.navbar {
 +
  font-family:"Quicksand";
 +
  position:fixed;
 +
  top:16px;
 +
  width:100%;
 +
  z-index:3;
 +
  //overflow: hidden;
 +
  background-color:#ace2d3;
 +
  box-shadow: 0px 5px 10px grey;
 +
}
 +
 
 +
.navbar a {
 +
  float: left;
 +
  display: block;
 +
  color:#245d6b;
 
   text-align: center;
 
   text-align: center;
−
   margin: 20px auto;}
+
   padding: 14px 16px 14px 16px;
 +
  text-decoration: none;
 +
  font-size: 1.2em;
 +
}
 +
 +
.topnav .icon {
 +
  display: none;
 +
}
 +
 +
.navbar a:hover {
 +
  background-color: #D4D4D4;
 +
  color: #245d6b;
 +
}
  
−
#main, #logo, #menubar, #site_content, #footer
+
.navbar a.active {
−
{ margin-left: auto;  
+
  background-color: #3B3B3B;
−
   margin-right: auto;}
+
   color: #ffffff;
 +
}
  
−
#header
+
.navbar .icon {
−
{ background: #323534 url(back.png) repeat-x;
+
   display: none;
−
   height: 177px;}
+
}
−
 
+
−
#banner
+
.dropdown {
−
{ background: transparent url(banner.jpg) no-repeat;
+
   float: left;
−
   width: 860px;
+
   overflow: hidden;
−
   height: 180px;
+
}
−
  margin-bottom: 20px;
+
−
  border: 10px solid #DDD;}
+
  
−
#logo
+
.dropdown .dropbtn {
−
{ width: 880px;
+
  font-size: 1.2em;
−
   position: relative;
+
   border: none;
−
   height: 140px;
+
   outline: none;
−
   background: transparent;}
+
  color: #245d6b;
 +
  padding: 14px 16px;
 +
   background-color: inherit;
 +
  font-family: inherit;
 +
  margin: 0px 0px 0px 0px;
 +
}
  
−
#logo #logo_text
+
.navbar a:hover, .dropdown:hover .dropbtn {
−
{ position: absolute;
+
   background-color: #D4D4D4 ;
−
   top: 10px;
+
}
−
  left: 0;}
+
  
−
#logo h1, #logo h2
+
.dropdown-content {
−
{ font: normal 300% 'century gothic', arial, sans-serif;
+
  display: none;
−
   border-bottom: 0;
+
   position: absolute;
−
   text-transform: none;
+
  background-color: #E9E9E9;
−
   margin: 0 0 0 9px;}
+
   min-width: 160px;
 +
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
  z-index: 3;
 +
}
  
−
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover
+
.dropdown-content a {
−
{ padding: 22px 0 0 0;
+
  float: none;
−
   color: #FFF;
+
   color: #245d6b;
−
   letter-spacing: 0.1em;
+
   padding: 12px 16px 12px 16px;
−
   text-decoration: none;}
+
   text-decoration: none;
 +
  display: block;
 +
  text-align: left;
 +
}
  
−
#logo_text h1 a .logo_colour
+
.dropdown-content a:hover {
−
{ color: #E4EC04;}
+
  background-color: #ddd;
 +
}
  
−
#logo_text a:hover .logo_colour
+
.dropdown:hover .dropdown-content {
−
{ color: #FFF;}
+
  display: block;
 +
}
  
−
#logo_text h2
 
−
{ font-size: 120%;
 
−
  padding: 4px 0 0 0;
 
−
  color: #999;}
 
  
−
#menubar
 
−
{ width: 880px;
 
−
  height: 46px;}
 
  
−
ul#menu
+
@media screen and (max-width: 600px) {
−
{ float: right;
+
  .navbar a:not(:first-child), .dropdown .dropbtn {
−
  margin: 0;}
+
    display: none;
 +
  }
 +
  .navbar a.icon {
 +
    float: right;
 +
    display: block;
 +
  }
 +
}
  
−
ul#menu li
+
@media screen and (max-width: 600px) {
−
{ float: left;
+
  .navbar.responsive {position: fixed; overflow:auto;}
−
   padding: 0 0 0 9px;
+
   .navbar.responsive a.icon {
−
   list-style: none;
+
    position: absolute;
−
   margin: 1px 2px 0 0;
+
    right: 0;
−
   background: #5A5A5A url(tab.png) no-repeat 0 0;}
+
    top: 0;
 +
   }
 +
  .navbar.responsive a {
 +
    float: none;
 +
    display: block;
 +
    text-align: left;
 +
   }
 +
  .navbar.responsive .dropdown {float: none;}
 +
   .navbar.responsive .dropdown-content {position: relative;}
 +
  .navbar.responsive .dropdown .dropbtn {
 +
    display: block;
 +
    width: 100%;
 +
    text-align: left;
 +
  }
 +
}
  
−
ul#menu li a
+
#navright{
−
{ font: normal 100% 'trebuchet ms', sans-serif;
+
  float:right;
−
  display: block;  
+
  font-family:"Quicksand";
−
  float: left;  
+
  font-size: 24px;
−
  height: 20px;
+
  margin-right:10px
−
  padding: 6px 35px 5px 28px;
+
}
−
  text-align: center;
+
#home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {display:none;}
−
  color: #FFF;
+
#content {margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
  text-decoration: none;
+
.responsive {
−
   background: #5A5A5A url(tab.png) no-repeat 100% 0;}  
+
   width: 100%;
 +
  height: 550px;
 +
}
  
−
ul#menu li.selected a
 
−
{ height: 20px;
 
−
  padding: 6px 35px 5px 28px;}
 
  
−
ul#menu li.selected
 
−
{ margin: 1px 2px 0 0;
 
−
  background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}
 
  
−
ul#menu li.selected a, ul#menu li.selected a:hover
 
−
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
 
−
  color: #FFF;}
 
  
−
ul#menu li a:hover
+
/*MAIN BODY CONTENT SECTION BEGINS*/
−
{ color: #E4EC04;}
+
.content-section {
 +
    margin: 0 10% 0 10%;
 +
    padding: 3% 3% 5% 3%;
 +
    background-color: #d2efe7;
 +
    line-height: 1.6;
 +
   
 +
}
 +
.PageTitle {
 +
    font-size: 300%;
 +
    text-align: center;
 +
    font-family: "Trebuchet MS";
 +
}
 +
.content-section img {
 +
    position:relative;
 +
    top:0px;
 +
    display: block;
 +
    height: 50%;
 +
    width: 50%;
 +
    margin: auto; 
 +
}
  
−
#site_content
+
.biggerImg img {
−
{ width: 880px;
+
    height: 100%;
−
   overflow: hidden;
+
    width: 100%;
−
   margin: 20px auto 0 auto;
+
}
−
  padding: 0 0 10px 0;}  
+
 
 +
#HQ_page p {
 +
  font-size: 125%;
 +
  text-align: center;
 +
  font-family: 'Lato';
 +
  color: #245d6b;
 +
  line-height: 27px;
 +
}
 +
 
 +
#HQ_page h1, h2, h3, h4, h5 {
 +
  color:black;
 +
  font-family: 'Quicksand';
 +
  text-align: center;
 +
}
 +
 
 +
#HQ_page #navbar h1 {
 +
  text-align: left;
 +
  display: inline;
 +
  vertical-align: middle;
 +
  font-size: 3em;
 +
}
 +
 
 +
table img {
 +
  width: 150px;
 +
   height: auto;
 +
  float: left;
 +
  display: inline-block;
 +
   margin: 2% 4% 2% 0;
 +
}
 +
 
 +
#HQ_page td {
 +
    padding: 10px;
 +
    border: 2px solid white;
 +
    background: #519182;
 +
}
 +
#HQ_page th {
 +
    padding: 10px;
 +
    border: 2px solid white;
 +
    background:lightblue;
 +
}
 +
 
 +
#HQ_page table {
 +
    color:white;
 +
    padding: 10px;
 +
    border: 2px solid white;
 +
}
  
−
#sidebar_container
+
#HQ_page table p {
−
{ float: right;
+
    text-align: left;
−
  width: 224px;}
+
}
  
−
.sidebar_top
+
#HQ_page .leftSide p {
−
{ width: 222px;
+
    text-align: left;
−
  height: 14px;
+
}
−
  background: transparent url(side_top.png) no-repeat;}
+
  
−
.sidebar_base
+
#HQ_page .leftSide h1, h2, h3, h4, h5 {
−
{ width: 222px;
+
    text-align: left;
−
  height: 14px;
+
}
−
  background: url(side_base.png) no-repeat;}
+
#HQ_page .leftSide img {
 +
    display: block;
 +
    width: 25%;
 +
    height: auto;
 +
    margin: 0 0 2.5% 0;
 +
}
  
−
.sidebar
+
/*MAIN BODY CONTENT SECTION ENDS*/
−
{ float: right;
+
−
  width: 222px;
+
−
  padding: 0;
+
−
  margin: 0 0 16px 0;}
+
  
−
.sidebar_item
 
−
{ background: url(side_back.png) repeat-y;
 
−
  padding: 0 15px;
 
−
  width: 192px;}
 
  
−
.sidebar li a.selected
 
−
{ color: #444;}
 
  
−
.sidebar ul
+
/*MEDIA QUERIES BEGIN*/
−
{ margin: 0;}  
+
@media screen and (max-width: 768px) {
 +
  .content-section {
 +
    margin: 0;
 +
    padding: 12.5% 4% 5% 4%;
 +
  }
  
−
#content
+
  img {
−
{ text-align: left;
+
      height: 85%;
−
  width: 620px;
+
      width: 85%;
−
   padding: 0 0 0 5px;
+
   }
−
  float: left;}
+
  #HQ_page p {
−
    
+
      font-size: 115%;
−
#content ul
+
      line-height: 24px;
−
{ margin: 2px 0 22px 0px;}
+
   }
  
−
#content ul li, .sidebar ul li
 
−
{ list-style-type: none;
 
−
  background: url(bullet.png) no-repeat;
 
−
  margin: 0 0 0 0;
 
−
  padding: 0 0 4px 25px;
 
−
  line-height: 1.5em;}
 
  
−
#footer
+
#HQ_page .leftSide p {
−
{ width: 100%;
+
    text-align: justify;
−
  font-family: 'trebuchet ms', sans-serif;
+
}
−
  font-size: 100%;
+
−
  height: 80px;
+
−
  padding: 28px 0 5px 0;
+
−
  text-align: center;  
+
−
  background: #3B3939 url(footer.png) repeat-x;
+
−
  color: #A8AA94;}
+
  
−
#footer p
+
#HQ_page .leftSide h1, h2, h3, h4, h5 {
−
{ line-height: 1.7em;
+
    text-align: justify;
−
  padding: 0 0 10px 0;}
+
}
  
−
#footer a
 
−
{ color: #A8AA94;
 
−
  text-decoration: none;}
 
  
−
#footer a:hover
+
}
−
{ color: #FFF;
+
/*MEDIA QUERIES END*/
−
  text-decoration: none;}
+
  
−
.search
 
−
{ color: #5D5D5D;
 
−
  border: 1px solid #BBB;
 
−
  width: 134px;
 
−
  padding: 4px;
 
−
  font: 100% arial, sans-serif;}
 
  
−
.form_settings
+
</style>
−
{ margin: 15px 0 0 0;}
+
<div class="container">
 +
<!--DO NOT CHANGE ANY OF THIS BEGINS-->
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
<title>IISER-BPR IGEM</title>
 +
<!--<link rel="stylesheet" type="text/css" href="stylesheet1.css">-->
 +
</head>
  
−
.form_settings p
+
<body>
−
{ padding: 0 0 4px 0;}
+
<div class="navbar" id="myNavbar">
 +
<a href="https://2020.igem.org/Team:IISER_Berhampur">Home</a>
 +
  <div class="dropdown">
 +
    <button class="dropbtn">Project&#9660;</button>
 +
    <div class="dropdown-content">
 +
<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/Implementation">Implementation</a>
 +
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Experiments">Experiments</a>
 +
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Engineering">Engineering</a>
 +
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Project/Notebook">Notebook</a>
 +
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Contribution">Contribution</a>
 +
    </div>
  
−
.form_settings span
 
−
{ float: left;
 
−
  width: 200px;
 
−
  text-align: left;}
 
−
 
 
−
.form_settings input, .form_settings textarea
 
−
{ padding: 5px;
 
−
  width: 299px;
 
−
  font: 100% arial;
 
−
  border: 1px solid #E5E5DB;
 
−
  background: #FFF;
 
−
  color: #47433F;}
 
−
 
 
−
.form_settings .submit
 
−
{ font: 100% arial;
 
−
  border: 0;
 
−
  width: 99px;
 
−
  margin: 0 0 0 212px;
 
−
  height: 33px;
 
−
  padding: 2px 0 3px 0;
 
−
  cursor: pointer;
 
−
  background: #3B3B3B;
 
−
  color: #FFF;}
 
  
−
.form_settings textarea, .form_settings select
+
  </div>
−
{ font: 100% arial;  
+
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Model">Modelling</a>
−
   width: 299px;}
+
<div class="dropdown">
 +
    <button class="dropbtn">Team&#9660;</button>
 +
    <div class="dropdown-content">
 +
      <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/Collaborations">Collaborations</a>
 +
    </div>
 +
   </div>
 +
<a href="https://2020.igem.org/Team:IISER_Berhampur/Parts">Parts</a>
  
−
.form_settings select
+
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Human_Practices">Human Practices</a>
−
{ width: 310px;}
+
  
−
.form_settings .checkbox
+
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Education">Science Communication</a>
−
{ margin: 4px 0;
+
−
  padding: 0;
+
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Splash">Splash</a>
−
  width: 14px;
+
 
−
  border: 0;
+
<a href="https://2020.igem.org/Team:IISER_Berhampur/Awards">Awards</a>
−
  background: none;}
+
  
−
.separator
+
<a href="https://2020.igem.org/Team:IISER_Berhampur/Graphics">Graphics</a>
−
{ width: 100%;
+
       
−
  height: 0;
+
−
  border-top: 1px solid #D9D5CF;
+
−
  border-bottom: 1px solid #FFF;
+
−
  margin: 0 0 20px 0;}
+
−
 
+
−
table
+
−
{ margin: 10px 0 30px 0;}
+
  
−
table tr th, table tr td
+
</div>
−
{ background: #3B3B3B;
+
<div style="position:fixed; top:0; right:0; width:5vw;height:6vw;z-index:10000;">
−
  color: #FFF;
+
<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>
−
  padding: 7px 4px;
+
<script>
−
  text-align: left;}
+
function myNavbarResponsive() {
−
 
+
  var x = document.getElementById("myNavbar");
−
table tr td
+
   if (x.className === "navbar") {
−
{ background: #E5E5DB;
+
    x.className += " responsive";
−
   color: #47433F;
+
   } else {
−
   border-top: 1px solid #FFF;}
+
    x.className = "navbar";
 +
  }
 +
}
  
 +
</script>
  
  
  
  
 +
</body>
 
</html>
 
</html>

Latest revision as of 17:18, 18 December 2020

IISER-BPR IGEM