Difference between revisions of "Template:Team:MIT/Header"

Line 1: Line 1:
−
<!-- to insert template put {{Team:MIT/Footer}} into the bottom of the document -->
+
<!--To insert this as a template use {{Team:MIT/Header}}-->
  
 +
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
−
<style type="text/css" media="all">
 
−
#blocks{
 
−
width: 80%;
 
−
margin: auto;
 
−
position: relative;
 
−
top: 45px;
 
−
margin-top: 15px;
 
−
}
 
−
.gif{
 
−
background-size: cover;
 
−
background-repeat:no-repeat;
 
−
width: 100%;
 
−
height: 100%;
 
−
}
 
−
#sponsors{
 
−
height: 100px;
 
−
display: inline-block;
 
−
margin: auto;
 
−
}
 
−
.individualsponsor{
 
−
height:100%;
 
−
width: auto;
 
−
vertical-align: center;
 
−
}
 
−
</style>
 
−
<body>
 
−
<div id = "blocks">
 
−
<a class = "col-md-6" href = "https://2015.igem.org/Team:MIT/Coculture">
 
−
<img id = "coculture" class = "gif" src = "https://static.igem.org/mediawiki/2015/c/c2/Team-MIT-Flaskstat2.jpg">
 
−
</a>
 
−
<a class = "col-md-6" href = "https://2015.igem.org/Team:MIT/Chutch">
 
−
<img id = "chutch" class = "gif" src = "https://static.igem.org/mediawiki/2015/2/24/Team-MIT-Hutchstat2.jpg">
 
−
</a>
 
−
<a class = "col-md-6" href = "https://2015.igem.org/Team:MIT/BiodieselProduction">
 
−
<img id = "ecoli" class = "gif" src = "https://static.igem.org/mediawiki/2015/c/cd/Team-MIT-Platestat2.jpg">
 
−
</a>
 
−
<a class = "col-md-6" href = "https://2015.igem.org/Team:MIT/Modeling">
 
−
<img id = "modeling" class = "gif" src = "https://static.igem.org/mediawiki/2015/4/4b/Team-MIT-Graphstat2.jpg">
 
−
</a>
 
−
<a class = "col-md-6" href = "https://2015.igem.org/Team:MIT/Practices">
 
−
<img id = "practices" class = "gif" src = "https://static.igem.org/mediawiki/2015/e/e9/Team-MIT-Brianstat2.jpg">
 
−
</a>
 
−
<a class = "col-md-6" href = "https://2015.igem.org/Team:MIT/Parts">
 
−
<img id = "parts" class = "gif" src = "https://static.igem.org/mediawiki/2015/c/cc/Team-MIT-Scopestat2.jpg">
 
−
</a>
 
−
</div>
 
−
<div id = "sponsors">
 
−
<img class = "individualsponsor" src = "https://static.igem.org/mediawiki/2015/0/0e/Eecs.png">
 
−
<img class = "individualsponsor" src = "https://static.igem.org/mediawiki/2015/c/cc/Logo-be.jpg">
 
−
<img class = "individualsponsor" src = "https://static.igem.org/mediawiki/2015/d/de/MITCEE_E_letter.jpg">
 
−
</div>
 
−
</body>
 
  
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Cantarell:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
 +
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 +
<style type="text/css">
  
−
<script>
+
#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/
−
//create image to preload:
+
−
    var coculturePreload = new Image();
+
−
    $(coculturePreload).attr({
+
−
        src: "https://static.igem.org/mediawiki/2015/e/e2/Team-MIT-Flaskgif2.gif"
+
−
    });
+
  
−
//create image to preload:
+
.topWikiNavBackground {
−
     var chutchPreload = new Image();
+
     height:18px;
−
     $(chutchPreload).attr({
+
     margin-top: -32px;
−
        src: "https://static.igem.org/mediawiki/2015/a/a8/Team-MIT-Hutchgif2.gif"
+
    background-color:transparent;
−
    });
+
}
  
−
//create image to preload:
+
.headerimage {
−
    var ecoliPreload = new Image();
+
position: relative;
−
    $(ecoliPreload).attr({
+
top:26px;
−
        src: "https://static.igem.org/mediawiki/2015/8/8a/Team-MIT-Plategif2.gif"
+
margin: auto;
−
    });
+
width: 100%;
 +
height: 100%;
  
−
    //create image to preload:
+
}
−
    var modelingPreload = new Image();
+
−
    $(modelingPreload).attr({
+
−
        src: "https://static.igem.org/mediawiki/2015/c/cc/Team-MIT-Graphgif2.gif"
+
−
    });
+
  
−
    //create image to preload:
+
#globalWrapper, #content { /*-- changes default wiki settings --*/
−
    var practicesPreload = new Image();
+
width: 100%;
−
    $(practicesPreload).attr({
+
height: 100%;
−
        src: "https://static.igem.org/mediawiki/2015/0/05/Team-MIT-Briangif2.gif"
+
border: 0px;
−
    });
+
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
  
−
//create image to preload:
+
/*Title fonts*/
−
    var partsPreload = new Image();
+
#title, .subtitle, .smallersubtitle{
−
    $(partsPreload).attr({
+
margin: 40px;
−
        src: "https://static.igem.org/mediawiki/2015/7/73/Team-MIT-Scopegif2.gif"
+
text-align: center;
−
    });
+
font-family: 'Permanent Marker', cursive;
 +
color: white;
 +
}
  
−
$(window).load(function() {
+
.subtitle{
−
    $('#coculture').hover(function () {
+
font-size: 30px;
−
$(this).attr("src", $(coculturePreload).attr('src'));
+
}
−
}, function() {
+
−
$(this).attr("src", "https://static.igem.org/mediawiki/2015/c/c2/Team-MIT-Flaskstat2.jpg");
+
−
});
+
  
−
    $('#chutch').hover(function () {
+
#title{
−
$(this).attr("src", $(chutchPreload).attr('src'));
+
font-size: 40px;
−
}, function() {
+
}
−
$(this).attr("src", "https://static.igem.org/mediawiki/2015/2/24/Team-MIT-Hutchstat2.jpg");
+
−
});
+
  
−
    $('#ecoli').hover(function () {
+
table, th, td {
−
$(this).attr("src", $(ecoliPreload).attr('src'));
+
    border: 1px solid white;
−
}, function() {
+
    border-collapse: collapse;
−
$(this).attr("src", "https://static.igem.org/mediawiki/2015/c/cd/Team-MIT-Platestat2.jpg");
+
    padding: 10px;
−
});
+
}
  
−
    $('#modeling').hover(function () {
+
a:link {
−
$(this).attr("src", $(modelingPreload).attr('src'));
+
color: white;
−
}, function() {
+
}
−
$(this).attr("src", "https://static.igem.org/mediawiki/2015/4/4b/Team-MIT-Graphstat2.jpg");
+
−
});
+
  
−
    $('#practices').hover(function () {
+
a:visited{
−
$(this).attr("src", $(practicesPreload).attr('src'));
+
color: white;
−
}, function() {
+
}
−
$(this).attr("src", "https://static.igem.org/mediawiki/2015/e/e9/Team-MIT-Brianstat2.jpg");
+
−
});
+
  
−
    $('#parts').hover(function () {
+
a:hover {
−
$(this).attr("src", $(partsPreload).attr('src'));
+
color: #ccff00;
−
}, function() {
+
text-decoration:none;
−
$(this).attr("src", "https://static.igem.org/mediawiki/2015/c/cc/Team-MIT-Scopestat2.jpg");
+
}
−
});
+
 
−
})
+
a:active {
 +
color: white;
 +
}
 +
 
 +
.smallersubtitle{
 +
font-size:25px;
 +
}
 +
 
 +
#spacer{
 +
width: 60%;
 +
margin: auto;
 +
position: relative;
 +
}
 +
.col-md-6{
 +
padding: 0px;
 +
}
 +
 
 +
#contents{
 +
display: inline-block;
 +
width: 20%;
 +
text-align: right;
 +
float: left;
 +
}
 +
 
 +
/*Text font for regular paragraph text on all pages*/
 +
.text{
 +
font-size: 15px;
 +
font-family: 'Cantarell', sans-serif;
 +
margin: auto;
 +
position:relative;
 +
color: white;
 +
}
 +
 
 +
html, body, .wrapper { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
 
 +
body{
 +
        background-color: black
 +
}
 +
 
 +
.navmenu {
 +
position:fixed;
 +
top:16px;
 +
left:0;
 +
right:0;
 +
background:black;
 +
        z-index : 100;
 +
        height : 50px;
 +
        align : center;
 +
}
 +
#mainLogo {
 +
}
 +
#navmenubox {
 +
padding:0;
 +
margin-left:0;
 +
margin-right:0;
 +
width:100%;
 +
height:45px;
 +
}
 +
.sidelogos {
 +
float:left;
 +
display:block;
 +
margin-left:auto;
 +
height:100%;
 +
width:auto;
 +
top : 0;
 +
}
 +
#logos{
 +
float:right;
 +
}
 +
#home {
 +
    width : 40px;
 +
    top : 0;
 +
}
 +
 
 +
#mainpage {
 +
    float : left;
 +
    margin-left : 50px;
 +
    margin-top : 7px;
 +
}
 +
#facebookicon{
 +
margin-right: 0.75em;
 +
width:1.9em;
 +
}
 +
#twittericon{
 +
width:2.375em;
 +
margin-right:auto;
 +
}
 +
#igemlogo img{ 
 +
width:2.3em;
 +
    position: relative;
 +
background-color: white;
 +
}
 +
#igemlogo:hover img {
 +
background-color:rgb(0,153,102);
 +
}
 +
#twittericon img, #facebookicon img, #igemlogo img{
 +
margin-top:8px;
 +
margin-bottom:2px;
 +
}
 +
#twitapp, #fbapp {
 +
display:none;
 +
width:250px;
 +
height:auto;
 +
}
 +
#fbapp{
 +
margin-left:-149px;
 +
}
 +
#twitapp{
 +
margin-left:-111px;
 +
}
 +
#nav, #nav ul{
 +
padding:0;
 +
margin:0;
 +
list-style:none;
 +
    text-align : center;
 +
}
 +
#nav li{
 +
font-family:'Permanent Marker', cursive;
 +
display:inline-block;
 +
color: white;
 +
position:relative;
 +
top : 12px;
 +
font-size : 16px;
 +
height : 40px;
 +
    vertical-align : middle;
 +
    padding : 0;
 +
    margin : 0;
 +
}
 +
#nav li ul{
 +
    vertical-align : bottom;
 +
}
 +
#nav li ul li {
 +
font-family: 'Cantarell', sans-serif;
 +
    height : 60px;
 +
    vertical-align : top;
 +
    width : 200px;
 +
    background : rgba(0,0,0,0.65);
 +
    padding : 15px 0;
 +
    color : rgb(0,0,0);
 +
    border-bottom: 1px solid rgba(255,255,255,.2);
 +
    display: block;
 +
}
 +
#nav ul{
 +
    display : block;
 +
    width : 125px;
 +
max-height:0px;
 +
left: 0;
 +
right: 0;
 +
visibility:hidden;
 +
-moz-transition: .0s all .0s;
 +
-webkit-transition: .0s all .0s;
 +
transition: .0s all .0s;
 +
}
 +
#nav li:hover ul{
 +
visibility: visible;
 +
overflow: visible;
 +
max-height:30em;
 +
}
 +
#nav a{
 +
text-decoration:none;
 +
display:block;
 +
font-weight : bold;
 +
color : white;
 +
vertical-align : middle;
 +
}
 +
#nav li:hover a {
 +
        color : #ccff00;
 +
}
 +
#nav li:hover ul .liste {
 +
        color : white;
 +
}
 +
#nav li ul li .liste:hover {
 +
    color : #ccff00;
 +
}
 +
.side-by-side{
 +
display: inline;
 +
}
 +
#nav li ul div{
 +
display: inline;
 +
}
 +
</style>
 +
 
 +
<div class="navmenu">
 +
<div id="navmenubox">
 +
<ul id="nav" class = "col-md-10">
 +
<!--<li>
 +
<a id = "mainLogo" href="https://2015.igem.org/Team:MIT" title="MIT iGEM" target="_blank"><img src="https://static.igem.org/mediawiki/2015/6/61/Team-MIT-MainLogo1.png" height="45px">
 +
</a>
 +
</li>
 +
-->
 +
<li><a href="https://2015.igem.org/Team:MIT">Home</a></li>
 +
 
 +
<li><a href="https://2015.igem.org/Team:MIT/Project"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">Project</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Chutch">C. Hutchinsonii</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/BiodieselProduction">Biodiesel Production</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Coculture">The Co-Culture</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Parts">Parts</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Circuit">Circuit</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Modeling">Modeling</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Signaling">Signaling</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Promoter">Promoter Characterization</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Practices"> Human Practices</a>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/WetlabDrylab"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">Notebooks</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/WetlabDrylab">Wetlab/Drylab</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Protocols">Protocols</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Team"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png">About Us</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Team">Team Bios</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Acknowledgements">Acknowledgements</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Attributions">Attributions</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Medals">Medals</a></li>
 +
</ul>
 +
            </li>
 +
<li><a href="https://2015.igem.org/Team:MIT/Collaborations"><img src="https://static.igem.org/mediawiki/2014/e/e1/MIT_2014_dropdown_arrow.png"> Externals</a>
 +
<ul>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Collaborations">Collaborations</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/Outreach">Outreach</a></li>
 +
<li><a class = liste href="https://2015.igem.org/Team:MIT/InterlabStudy">Interlab Study</a></li>
 +
        </ul>
 +
            </li>
 +
</ul>
 +
<div class= "col-md-2">
 +
<div id = "logos">
 +
<div id="twittericon" class="sidelogos">
 +
<a href="http://twitter.com/MIT_iGEM" target="_blank">
 +
<img id="twitterimg" src="https://static.igem.org/mediawiki/2015/5/52/Team_MIT_TwitterLogo.png" height="30px"/>
 +
<div id="twitapp">
 +
<a class="twitter-timeline" href="https://twitter.com/MIT_iGEM" data-widget-id="608663252705374209">@MIT_iGEM</a>
 +
</div>
 +
</a>
 +
</div>
 +
<div id="facebookicon" class="sidelogos">
 +
<a href="https://www.facebook.com/MITiGEM" target="_blank">
 +
<img id="fblogo" src="https://static.igem.org/mediawiki/2015/4/42/Team_MIT_facebook_logo.png" height="30px"/>                     
 +
<div id="fbapp">
 +
<div class="fb-like-box" data-href="https://www.facebook.com/MITiGEM" data-width="250" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>
 +
</div>
 +
</a>
 +
</div>
 +
<div id="igemlogo" class="sidelogos">
 +
<a href="https://2015.igem.org/Main_Page" title="iGEM 2015" target="_blank">
 +
<img src="https://static.igem.org/mediawiki/2015/0/0a/Team_MIT_iGEM_logo.gif" height="30px">
 +
</a>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 +
 
 +
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 +
 
 +
<script>
 +
 
 +
$(document).ready(function(){
 +
$('div #twittericon').mouseover(function(){
 +
div = $('#twitapp');
 +
div.show();
 +
}).mouseout(function(){
 +
div.hide();
 +
});
 +
});
 +
 
 +
//On hover the twitter logo turns clear and the blue shows through
 +
$(document).ready(function(){
 +
    $('#twitterimg').hover(function () {
 +
        this.src = "https://static.igem.org/mediawiki/2015/a/a1/Team_MIT_TwitterLogo2.png";
 +
    }, function () {
 +
        this.src = "https://static.igem.org/mediawiki/2015/5/52/Team_MIT_TwitterLogo.png";
 +
    });
 +
});
 +
 
 +
//On hover faceboook logo turns blue (changes images)
 +
$(document).ready(function(){
 +
    $('#fblogo').hover(function () {
 +
        this.src = "https://static.igem.org/mediawiki/2015/2/20/Team-MIT-FacebookIcon2.png";
 +
    }, function () {
 +
        this.src = "https://static.igem.org/mediawiki/2015/4/42/Team_MIT_facebook_logo.png";
 +
    });
 +
});
 
</script>
 
</script>

Revision as of 23:27, 18 September 2015