Difference between revisions of "Template:IISc-Bangalore"

Line 1: Line 1:
 
<html>
 
<html>
 +
 
<script>
 
<script>
  
Line 459: Line 460:
 
</head>
 
</head>
  
−
<style>
 
−
/*Menu Bar*/
 
−
.menu, .menu ul {
 
−
list-style: none;
 
−
padding: 0;
 
−
margin: 0;
 
−
}
 
  
−
.menu {
 
−
height: 58px;
 
−
}
 
  
−
.menu li {
+
<div class="igem_2017_menu_wrapper" >
−
background: -moz-linear-gradient(#292929, #252525);
+
−
background: -ms-linear-gradient(#292929, #252525);
+
−
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
+
−
background: -webkit-linear-gradient(#292929, #252525);
+
−
background: -o-linear-gradient(#292929, #252525);
+
−
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
+
−
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
+
−
background: linear-gradient(#292929, #252525);
+
−
border-bottom: 2px solid #181818;
+
−
border-top: 2px solid #303030;
+
−
min-width: 160px;
+
−
}
+
  
−
.menu > li {
 
−
display: block;
 
−
float: left;
 
−
position: relative;
 
−
}
 
  
−
.menu > li:first-child {
 
−
border-radius: 5px 0 0;
 
−
}
 
  
−
.menu a {
+
<a href="https://2017.igem.org/Team:Example2">
−
border-left: 3px solid rgba(0, 0, 0, 0);
+
<img src="http://placehold.it/350x150">
−
color: #808080;
+
</a>
−
display: block;
+
−
font-family: 'Lucida Console';
+
−
font-size: 18px;
+
−
line-height: 54px;
+
−
padding: 0 25px;
+
−
text-decoration: none;
+
−
text-transform: uppercase;
+
−
}
+
  
−
.menu li:hover {
 
−
background-color: #1c1c1c;
 
−
background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
 
−
background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
 
−
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
 
−
background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
 
−
background: -o-linear-gradient(#1c1c1c, #1b1b1b);
 
−
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
 
−
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
 
−
background: linear-gradient(#1c1c1c, #1b1b1b);
 
−
border-bottom: 2px solid #222222;
 
−
border-top: 2px solid #1B1B1B;
 
−
}
 
  
−
.menu li:hover > a {
+
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
−
border-radius: 5px 0 0 0;
+
<div class="menu_button" id="display_menu_control">
−
border-left: 3px solid #C4302B;
+
MENU 
−
color: #C4302B;
+
</div>
−
}
+
  
−
/* submenu styles */
+
<div id="menu_content">
−
.submenu {
+
−
left: 0;
+
−
max-height: 0;
+
−
position: absolute;
+
−
top: 100%;
+
−
z-index: 0;
+
−
-webkit-perspective: 400px;
+
−
-moz-perspective: 400px;
+
−
-ms-perspective: 400px;
+
−
-o-perspective: 400px;
+
−
perspective: 400px;
+
−
}
+
  
−
.submenu li {
 
−
opacity: 0;
 
−
-webkit-transform: rotateY(90deg);
 
−
-moz-transform: rotateY(90deg);
 
−
-ms-transform: rotateY(90deg);
 
−
-o-transform: rotateY(90deg);
 
−
transform: rotateY(90deg);
 
−
-webkit-transition: opacity .4s, -webkit-transform .5s;
 
−
-moz-transition: opacity .4s, -moz-transform .5s;
 
−
-ms-transition: opacity .4s, -ms-transform .5s;
 
−
-o-transition: opacity .4s, -o-transform .5s;
 
−
transition: opacity .4s, transform .5s;
 
−
}
 
  
−
.menu .submenu li:hover a {
 
−
border-left: 3px solid #454545;
 
−
border-radius: 0;
 
−
color: #ffffff;
 
−
}
 
  
−
.menu > li:hover .submenu, .menu > li:focus .submenu {
+
<a href="https://2017.igem.org/Team:Example2">
−
max-height: 2000px;
+
<div class="menu_button direct_to_page">
−
z-index: 10;
+
HOME
−
}
+
</div>
 +
</a>
  
−
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
 
−
opacity: 1;
 
−
-webkit-transform: none;
 
−
-moz-transform: none;
 
−
-ms-transform: none;
 
−
-o-transform: none;
 
−
transform: none;
 
−
}
 
  
−
/* CSS3 delays for transition effects */
 
−
.menu li:hover .submenu li:nth-child(1) {
 
−
-webkit-transition-delay: 0s;
 
−
-moz-transition-delay: 0s;
 
−
-ms-transition-delay: 0s;
 
−
-o-transition-delay: 0s;
 
−
transition-delay: 0s;
 
−
}
 
  
−
.menu li:hover .submenu li:nth-child(2) {
+
<div class="menu_button">
−
-webkit-transition-delay: 50ms;
+
<div class="expand_collapse_icon">  </div> TEAM
−
-moz-transition-delay: 50ms;
+
</div>
−
-ms-transition-delay: 50ms;
+
−
-o-transition-delay: 50ms;
+
−
transition-delay: 50ms;
+
−
}
+
  
−
.menu li:hover .submenu li:nth-child(3) {
+
<div class="submenu_wrapper" id="team_submenu">
−
-webkit-transition-delay: 100ms;
+
−
-moz-transition-delay: 100ms;
+
<a href="https://2017.igem.org/Team:Example2/Team">
−
-ms-transition-delay: 100ms;
+
<div class="submenu_button" id="Team_page">
−
-o-transition-delay: 100ms;
+
Team
−
transition-delay: 100ms;
+
</div>
−
}
+
</a>
  
−
.menu li:hover .submenu li:nth-child(4) {
+
<a href="https://2017.igem.org/Team:Example2/Collaborations">
−
-webkit-transition-delay: 150ms;
+
<div class="submenu_button"  id="Collaborations_page">
−
-moz-transition-delay: 150ms;
+
Collaborations
−
-ms-transition-delay: 150ms;
+
</div>
−
-o-transition-delay: 150ms;
+
</a>
−
transition-delay: 150ms;
+
−
}
+
 +
</div>
  
−
.menu li:hover .submenu li:nth-child(5) {
 
−
-webkit-transition-delay: 200ms;
 
−
-moz-transition-delay: 200ms;
 
−
-ms-transition-delay: 200ms;
 
−
-o-transition-delay: 200ms;
 
−
transition-delay: 200ms;
 
−
}
 
  
−
.menu li:hover .submenu li:nth-child(6) {
+
−
-webkit-transition-delay: 250ms;
+
−
-moz-transition-delay: 250ms;
+
−
-ms-transition-delay: 250ms;
+
−
-o-transition-delay: 250ms;
+
−
transition-delay: 250ms;
+
−
}
+
  
−
.menu li:hover .submenu li:nth-child(7) {
+
<div class="menu_button">
−
-webkit-transition-delay: 300ms;
+
<div class="expand_collapse_icon">  </div> PROJECT
−
-moz-transition-delay: 300ms;
+
</div>
−
-ms-transition-delay: 300ms;
+
−
-o-transition-delay: 300ms;
+
−
transition-delay: 300ms;
+
−
}
+
  
−
.menu li:hover .submenu li:nth-child(8) {
+
<!-- project submenu -->
−
-webkit-transition-delay: 350ms;
+
<div class="submenu_wrapper">
−
-moz-transition-delay: 350ms;
+
−
-ms-transition-delay: 350ms;
+
<a href="https://2017.igem.org/Team:Example2/Description">
−
-o-transition-delay: 350ms;
+
<div class="submenu_button"  id="Description_page">
−
transition-delay: 350ms;
+
Description
−
}
+
</div>
 +
</a>
  
−
.submenu li:nth-child(1) {
+
<a href="https://2017.igem.org/Team:Example2/Design">
−
-webkit-transition-delay: 350ms;
+
<div class="submenu_button"  id="Design_page">
−
-moz-transition-delay: 350ms;
+
Design
−
-ms-transition-delay: 350ms;
+
</div>
−
-o-transition-delay: 350ms;
+
</a>
−
transition-delay: 350ms;
+
−
}
+
  
−
.submenu li:nth-child(2) {
+
<a href="https://2017.igem.org/Team:Example2/Experiments">
−
-webkit-transition-delay: 300ms;
+
<div class="submenu_button"  id="Experiments_page">
−
-moz-transition-delay: 300ms;
+
Experiments
−
-ms-transition-delay: 300ms;
+
</div>
−
-o-transition-delay: 300ms;
+
</a>
−
transition-delay: 300ms;
+
−
}
+
  
−
.submenu li:nth-child(3) {
 
−
-webkit-transition-delay: 250ms;
 
−
-moz-transition-delay: 250ms;
 
−
-ms-transition-delay: 250ms;
 
−
-o-transition-delay: 250ms;
 
−
transition-delay: 250ms;
 
−
}
 
  
−
.submenu li:nth-child(4) {
+
<a href="https://2017.igem.org/Team:Example2/Notebook">
−
-webkit-transition-delay: 200ms;
+
<div class="submenu_button"  id="Notebook_page">
−
-moz-transition-delay: 200ms;
+
Notebook
−
-ms-transition-delay: 200ms;
+
</div>
−
-o-transition-delay: 200ms;
+
</a>
−
transition-delay: 200ms;
+
−
}
+
  
−
.submenu li:nth-child(5) {
+
<a href="https://2017.igem.org/Team:Example2/InterLab">
−
-webkit-transition-delay: 150ms;
+
<div class="submenu_button"  id="InterLab_page">
−
-moz-transition-delay: 150ms;
+
InterLab
−
-ms-transition-delay: 150ms;
+
</div>
−
-o-transition-delay: 150ms;
+
</a>
−
transition-delay: 150ms;
+
−
}
+
  
−
.submenu li:nth-child(6) {
+
<a href="https://2017.igem.org/Team:Example2/Contribution">
−
-webkit-transition-delay: 100ms;
+
<div class="submenu_button"  id="Contribution_page">
−
-moz-transition-delay: 100ms;
+
Contribution
−
-ms-transition-delay: 100ms;
+
</div>
−
-o-transition-delay: 100ms;
+
</a>
−
transition-delay: 100ms;
+
−
}
+
  
−
.submenu li:nth-child(7) {
+
<a href="https://2017.igem.org/Team:Example2/Model">
−
-webkit-transition-delay: 50ms;
+
<div class="submenu_button"  id="Model_page">
−
-moz-transition-delay: 50ms;
+
Model
−
-ms-transition-delay: 50ms;
+
</div>
−
-o-transition-delay: 50ms;
+
</a>
−
transition-delay: 50ms;
+
−
}
+
  
−
.submenu li:nth-child(8) {
+
<a href="https://2017.igem.org/Team:Example2/Results">
−
-webkit-transition-delay: 0s;
+
<div class="submenu_button"  id="Results_page">
−
-moz-transition-delay: 0s;
+
Results
−
-ms-transition-delay: 0s;
+
</div>
−
-o-transition-delay: 0s;
+
</a>
−
transition-delay: 0s;
+
−
}
+
  
−
</style>
 
−
<div class="igem_2017_menu_wrapper" >
 
  
 +
<a href="https://2017.igem.org/Team:Example2/Demonstrate">
 +
<div class="submenu_button"  id="Demonstrate_page">
 +
Demonstrate
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Improve">
 +
<div class="submenu_button"  id="Improve_page">
 +
Improve
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Attributions">
 +
<div class="submenu_button"  id="Attributions_page">
 +
Attributions
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
 +
 +
 +
 +
 +
<div class="menu_button">
 +
<div class="expand_collapse_icon">  </div> PARTS
 +
</div>
 +
 +
<!-- parts submenu -->
 +
<div class="submenu_wrapper">
 +
 +
<a href="https://2017.igem.org/Team:Example2/Parts">
 +
<div class="submenu_button"  id="Parts_page">
 +
Parts
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Basic_Part">
 +
<div class="submenu_button"  id="Basic_Part_page">
 +
Basic Parts
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Composite_Part">
 +
<div class="submenu_button"  id="Composite_Part_page">
 +
Composite Parts
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Part_Collection">
 +
<div class="submenu_button"  id="Part_Collection_page">
 +
Part Collection
 +
</div>
 +
</a>
 +
</div>
 +
 +
 +
 +
 +
 +
 +
<a href="https://2017.igem.org/Team:Example2/Safety">
 +
<div class="menu_button direct_to_page">
 +
SAFETY
 +
</div>
 +
</a>
 +
 +
 +
 +
 +
 +
 +
 +
<div class="menu_button" >
 +
<div class="expand_collapse_icon">  </div> HUMAN PRACTICES
 +
</div>
 +
 +
<!-- human practices submenu -->
 +
<div class="submenu_wrapper">
 +
 +
<a href="https://2017.igem.org/Team:Example2/HP/Silver">
 +
<div class="submenu_button"  id="Silver_page">
 +
Silver HP
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/HP/Gold_Integrated">
 +
<div class="submenu_button" id="Gold_Integrated_page">
 +
Integrated and Gold
 +
</div>
 +
</a>
 +
 +
 +
<a href="https://2017.igem.org/Team:Example2/Engagement">
 +
<div class="submenu_button"  id="Engagement_page">
 +
Public Engagement
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
 +
<div class="menu_button">
 +
<div class="expand_collapse_icon">  </div> AWARDS
 +
</div>
 +
 +
<!-- awards submenu -->
 +
<div class="submenu_wrapper">
 +
 +
<a href="https://2017.igem.org/Team:Example2/Applied_Design">
 +
<div class="submenu_button"  id="Applied_Design_page">
 +
Applied Design
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Entrepreneurship">
 +
<div class="submenu_button"  id="Entrepreneurship_page">
 +
Entrepreneurship
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Hardware">
 +
<div class="submenu_button"  id="Hardware_page">
 +
Hardware
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Measurement">
 +
<div class="submenu_button"  id="Measurement_page">
 +
Measurement
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Model">
 +
<div class="submenu_button"  id="Model_page">
 +
Model
 +
</div>
 +
</a>
 +
 +
<a href="https://2017.igem.org/Team:Example2/Plant">
 +
<div class="submenu_button"  id="Plant_page">
 +
Plant
 +
</div>
 +
</a>
 +
 +
 +
<a href="https://2017.igem.org/Team:Example2/Software">
 +
<div class="submenu_button"  id="Software_page">
 +
Software
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
<a href="https://igem.org/2017_Judging_Form?team=Example2">
 +
<div class="menu_button direct_to_page">
 +
JUDGING FORM
 +
</div>
 +
</a>
 +
 +
 +
 +
<div class="menu_bottom_padding" >
 +
</div>
 +
 +
</div>
  
  
−
<a href="https://2017.igem.org/Team:Example2">
 
−
<img src="http://placehold.it/350x150">
 
−
</a>
 
  
  
−
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
 
−
<div id="menu_content">
 
−
<ul class="menu">
 
−
    <li><a href="#">Home</a></li>
 
−
    <li><a href="#">Team</a></li>
 
−
    <li><a href="#s1">Project</a>
 
−
        <ul class="submenu">
 
−
            <li><a href="#">Description</a></li>
 
−
            <li><a href="#">Design</a></li>
 
−
            <li><a href="#">Model</a></li>
 
−
            <li><a href="#">Parts</a></li>
 
−
            <li><a href="#">Interlab</a></li>
 
−
            <li><a href="#">Improve</a></li>
 
−
            <li><a href="#">Hardware</a></li>
 
−
            <li><a href="#">Evolution</a></li>
 
−
        </ul>
 
−
    </li>
 
−
    <li><a href="#s2">Lab</a>
 
−
    <ul class="submenu">
 
−
        <li><a href="#">Experiments</a></li>
 
−
            <li><a href="#">Results</a></li>
 
−
            <li><a href="#">Demonstrate</a></li>
 
−
            <li><a href="#">Safety</a></li>
 
−
            <li><a href="#">Notebook</a></li>
 
−
        </ul>
 
−
    </li>
 
−
   
 
−
    <li><a href="#s3">Community</a>
 
−
    <ul class="submenu">
 
−
        <li><a href="#">Human Practices</a></li>
 
−
            <li><a href="#">Integrated Practices</a></li>
 
−
            <li><a href="#">Public Engagement</a></li>
 
−
            <li><a href="#">Collaborations</a></li>
 
−
            <li><a href="#">Safety</a></li>
 
−
        </ul>
 
−
    </li>
 
−
    <li><a href="#">Attributions</a></li>       
 
−
</ul>
 
−
</div>
 
 
</div>
 
</div>
 +
 +
  
 
<!-- start of content -->
 
<!-- start of content -->
−
<div class="igem_2017_content_wrapper" >
+
<div class="igem_2017_content_wrapper">
 
<h1>IISc-Bangalore</h1>
 
<h1>IISc-Bangalore</h1>

Revision as of 18:09, 9 September 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

IISc-Bangalore