Team:Minnesota/Team Students

From 2012.igem.org

(Difference between revisions)
(moved Team:Minnesota/Team Students to Team:Minnesota/Team Students2: Moving over to version 2 of website)
m
Line 1: Line 1:
-
#REDIRECT [[Team:Minnesota/Team Students2]]
+
{{Minnesota_Main_Styles2}}
 +
<html>
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>Team:Minnesota</title>
 +
 
 +
<script type="text/javascript" src="jquery.js"></script>
 +
<script type="text/javascript">
 +
 
 +
 
 +
$(document).ready(function(){
 +
//Necessary for all pages
 +
 
 +
//vertical autocenter
 +
$(window).resize(function(){
 +
  $('#ContentAll').css({
 +
    position:'absolute',
 +
    top: ($(window).height() - $('#ContentAll').outerHeight())/2
 +
  });
 +
});
 +
 
 +
$(window).resize();
 +
//end vertial autocenter
 +
 
 +
//social media button switchers
 +
$("#fbButton").hover(
 +
    function() {$(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/facebook.png");},         
 +
    function() {$(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/facebook_1.png");}
 +
);
 +
 
 +
$("#twitterButton").hover(
 +
    function() {$(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/twitter.png");},         
 +
    function() {$(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/twitter_1.png");}
 +
);
 +
 
 +
 
 +
 
 +
 
 +
//main page image switcher
 +
 
 +
$("#mainRightButton1").hover(
 +
    function() {
 +
      $(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/welcome_maroon_txt.png");
 +
      $("#MainBoxContentImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/image1_resized.png");
 +
      $(".mainContentTextBanner").text("Welcome to the University of Minnesota iGEM team website! Please take some time to explore around by hovering over the icons on the right for quick blurbs or navigate using the buttons to the left. We hope you enjoy learning about us and what we do!");
 +
    },         
 +
    function() {$(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/welcome_gold_txt.png");}
 +
);
 +
 
 +
$("#mainRightButton2").hover(
 +
    function() {
 +
      $(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/projects_maroon_txt.png");
 +
      $("#MainBoxContentImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/image4_resized.png");
 +
      $(".mainContentTextBanner").text("We are a dedicated team of students from the University of Minnesota - Twin Cities working to further the field of synthetic biology scientifically and to make it more accessible to the public! Click the team button on the left to learn more about each of us!");
 +
    },         
 +
    function() {$(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/projects_gold_img.png");}
 +
);
 +
 
 +
$("#mainRightButton3").hover(
 +
    function() {
 +
      $(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/theteam_maroon_txt.png");
 +
      $("#MainBoxContentImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/image3_resized.png");
 +
      $(".mainContentTextBanner").text("Our team is working on projects that both help to develop the field of synthetic biology and are just awesome in general! This year, we are working on making caffeinated bread and a sunscreen that requires only one application. Ever! Click the project button on the left to learn more!");
 +
    },         
 +
    function() {$(this).attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/theteam_gold_img.png");}
 +
);
 +
 
 +
 
 +
 
 +
 
 +
//Team page specific
 +
 
 +
$("#PSI1").hover(
 +
    function() {
 +
//change opacity and size in future
 +
      $("#PSI1").css("opacity","0.4");
 +
      $("#PSI1").css("filter","alpha(opacity=40)");
 +
      $("#profileSelectorImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/George_resized.png");
 +
      $("#pstName").css("font-weight","bold");
 +
      $("#pstName").text("George Chao");
 +
      $("#pstDescription").css("font-size",14);
 +
      $("#pstDescription").text("George is double majoring in Genetics, Cell Biology and Development and Computer Science. He plans to attend graduate school, and hopefully direct a lab in the future. His interests include ballroom dance, food, programming, video games, rollerblading, and biking. If he needs a caffeine boost George will drink an iced mocha with no whipped cream or an energy drink (NOS and Rockstar Black Citrus being his personal favorites). To protect himself from the sun he stays indoors (he’s a researcher, what do you expect?). His movie character alter ego: Harold Crick from Stranger than Fiction.");
 +
    },         
 +
    function() {
 +
      $("#PSI1").css("opacity","1");
 +
      $("#PSI1").css("filter","alpha(opacity=100)");
 +
      $("#profileSelectorImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/students_maroon_img.png");
 +
      $("#pstName").text("");
 +
      $("#pstDescription").css("font-size",18);
 +
      $("#pstDescription").text("Please mouse over each icon to learn about our team members!");
 +
    }
 +
);
 +
 
 +
 
 +
 
 +
 
 +
$("#PSI2").hover(
 +
    function() {
 +
      $("#PSI2").css("opacity","0.4");
 +
      $("#PSI2").css("filter","alpha(opacity=40)");
 +
      $("#profileSelectorImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/Hannah_resized.png");
 +
      $("#pstName").css("font-weight","bold");
 +
      $("#pstName").text("Hannah Aho");
 +
      $("#pstDescription").css("font-size",14);
 +
      $("#pstDescription").text("Hannah has a BS in Genetics, Cell Biology and Development and is working towards a BA in French. She plans to attend medical school to become a urogynecologist. Her interests include Islamic feminist literature (especially from Algeria), sexual health education, le Fantastique, Korean cinema, listening to music, and watching old zombie movies. She consumes caffeine in the form of coffee (hot or iced) with heavy cream. She protects herself from the sun by wearing SPF 60 sunscreen every day, rain or shine. Her TV character alter ego: Ron Swanson from Parks and Recreation.");
 +
    },         
 +
    function() {
 +
      $("#PSI2").css("opacity","1");
 +
      $("#PSI2").css("filter","alpha(opacity=100)");
 +
      $("#profileSelectorImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/students_maroon_img.png");
 +
      $("#pstName").text("");
 +
      $("#pstDescription").css("font-size",18);
 +
      $("#pstDescription").text("Please mouse over each icon to learn about our team members!");
 +
    }
 +
);
 +
 
 +
 
 +
$("#PSI3").hover(
 +
    function() {
 +
      $("#PSI3").css("opacity","0.4");
 +
      $("#PSI3").css("filter","alpha(opacity=40)");
 +
      $("#profileSelectorImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/Molly_resized.png");
 +
      $("#pstName").css("font-weight","bold");
 +
      $("#pstName").text("Molly Swanson");
 +
      $("#pstDescription").css("font-size",14);
 +
      $("#pstDescription").text("Molly studies in Genetics, Cell Biology and Development. Molly’s favorite activities include anything that has to do with food (eating, cooking, and baking) and herb gardening. At a coffee shop, she typically orders an iced latte with whole milk. She protects herself from the sun by applying SPF 45 to her skin when she is outside.");
 +
    },         
 +
    function() {
 +
      $("#PSI3").css("opacity","1");
 +
      $("#PSI3").css("filter","alpha(opacity=100)");
 +
      $("#profileSelectorImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/students_maroon_img.png");
 +
      $("#pstName").text("");
 +
      $("#pstDescription").css("font-size",18);
 +
      $("#pstDescription").text("Please mouse over each icon to learn about our team members!");
 +
    }
 +
);
 +
 
 +
$("#PSI4").hover(
 +
    function() {
 +
      $("#PSI4").css("opacity","0.4");
 +
      $("#PSI4").css("filter","alpha(opacity=40)");
 +
      $("#profileSelectorImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/Misha_resized.png");
 +
      $("#pstName").css("font-weight","bold");
 +
      $("#pstName").text("Misha Patel");
 +
      $("#pstDescription").css("font-size",14);
 +
      $("#pstDescription").text("Misha is a neuroscience major and plans to attend graduate school in the future. She likes to draw, read, watch television and bake in her free time. When Misha goes to a coffee shop, she orders a small french roast with milk and two sugars. In order to protect herself from the sun, she wears sunglasses when she is outside. Her TV character alter ego: Luke from Modern Family.");
 +
    },         
 +
    function() {
 +
      $("#PSI4").css("opacity","1");
 +
      $("#PSI4").css("filter","alpha(opacity=100)");
 +
      $("#profileSelectorImg").attr("src","http://i1158.photobucket.com/albums/p607/iGEM_MN/students_maroon_img.png");
 +
      $("#pstName").text("");
 +
      $("#pstDescription").css("font-size",18);
 +
      $("#pstDescription").text("Please mouse over each icon to learn about our team members!");
 +
    }
 +
);
 +
 
 +
 
 +
 
 +
 
 +
}); //ends .ready function
 +
 +
 
 +
 
 +
</script>
 +
 
 +
<style type="text/css">
 +
 
 +
#ContentAll{
 +
position:absolute;
 +
width:1000px;
 +
height:700px;
 +
/*autocenter horizontally*/
 +
left:50%;
 +
margin-left:-500px;
 +
 
 +
background-color:#E17E7E;
 +
}
 +
 
 +
 
 +
#MainBanner{
 +
/*set to be flush against content*/
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
margin:0px;
 +
padding:0px;
 +
width:1000px;
 +
height:150px;
 +
background-color:white;
 +
 
 +
 
 +
}
 +
 
 +
#SideBarAll{
 +
/*set to be flush against left and MainBanner*/
 +
position:absolute;
 +
top:150px;
 +
left:0px;
 +
width:200px;
 +
height:550px;
 +
background-color:white;
 +
}
 +
 
 +
#MainBoxAll{
 +
/*set to be flush against MainBanner and SideBarAll*/
 +
position:absolute;
 +
top:150px;
 +
left:200px;
 +
width: 800px;
 +
height:550px;
 +
background-color:white;
 +
}
 +
 
 +
#MainBoxContent{
 +
position:absolute;
 +
width:750px;
 +
height:450px;
 +
background-color:gray;
 +
left:25px;
 +
top:25px;
 +
}
 +
 
 +
#MainBoxOtherLinks{
 +
position:absolute;
 +
width: 800px;
 +
height: 75px;
 +
background-color: white;
 +
top: 475px;
 +
}
 +
 
 +
#MainBoxOtherLinks p.otherLinks{
 +
position:absolute;
 +
left:200px;
 +
top:25px;
 +
background-color: none;
 +
color: gray;
 +
 
 +
}
 +
 
 +
#MainBoxOtherLinks p.otherLinks a{
 +
  text-decoration:none;
 +
  color: gray;
 +
}
 +
 
 +
#MainBoxOtherLinks p.otherLinks a:hover{
 +
  text-decoration:underline;
 +
}
 +
 
 +
 
 +
body{
 +
background-color:gray;
 +
}
 +
 
 +
/*end container boxs*/
 +
 
 +
/*Start Revised sidebar styles*/
 +
 
 +
.sideNavBar2
 +
{
 +
position:absolute;
 +
top:25px;
 +
left:0px;
 +
margin:0;
 +
padding:0;
 +
border:0px;
 +
}
 +
 
 +
.sideNavBar2 ul li
 +
{
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
}
 +
 
 +
.sideNavBar2 a{
 +
    font-family: Trebuchet MS, Verdana, Century Gothic, Tahoma, sans-serif;
 +
    font-size:20px;
 +
    //font-weight:600;
 +
 
 +
    padding-top:5px;
 +
    padding-left:15px;
 +
 
 +
 
 +
    text-decoration:none;
 +
    background-color:white;
 +
    display:block;
 +
    width:150px;
 +
    height:35px;
 +
}
 +
 
 +
.sideNavBar2 a:link {
 +
    border-width:1px 1px 1px 3px;
 +
    border-style:none none none solid;
 +
    border-color:white;
 +
    color: gray;
 +
 
 +
}
 +
 
 +
.sideNavBar2 a:visited {
 +
    border-width:1px 1px 1px 3px;
 +
    border-style:none none none solid;
 +
    border-color:white;
 +
    color: gray;
 +
}
 +
 
 +
.sideNavBar2 a:hover { /*cool button*/
 +
    border-width:1px 1px 1px 3px;
 +
    border-style: none none none solid;
 +
    border-color:#660000 #660000 #660000 #660000;
 +
    color: #FBB917;
 +
}
 +
.sideNavBar2 a:active {
 +
    border-width:1px 1px 1px 3px;
 +
    border-style: none none none solid;
 +
    border-color:#660000 #660000 #660000 #660000;
 +
    color: #FBB917;
 +
}
 +
 
 +
.sideNavBar2 a.current{ /*force black for current button*/
 +
    color: #660000;
 +
}
 +
 
 +
.sideNavBar2 a.current:hover{ /*allow for gold to still happen for current button*/
 +
    color: #FBB917;
 +
}
 +
 
 +
.sideSocialMediaButtons{
 +
position:absolute;
 +
width:120px;
 +
height:60px;
 +
top:460px;
 +
left:30px;
 +
background-color:white;
 +
}
 +
 
 +
 
 +
/*End Revised sidebar styles*/
 +
 
 +
/*Start Main Content items*/
 +
.rightNavButtons {
 +
position:absolute;
 +
top:140px;
 +
left:695px;
 +
width:80px;
 +
height:220px;
 +
background-color:transparent;
 +
}
 +
 
 +
.rightNavButtons a{
 +
display:block;
 +
}
 +
 
 +
.mainContentTextBanner{
 +
position:absolute;
 +
top:350px;
 +
left:0px;
 +
width:730px;
 +
height:80px;
 +
background-color:#660000;
 +
opacity:0.7;
 +
font-size:20px;
 +
color:white;
 +
padding: 10px;
 +
}
 +
 
 +
 
 +
 
 +
//Team Page specific
 +
.profileSelectorIcon{
 +
width:75px;
 +
height:75px;
 +
border: solid 1px gray;
 +
opacity:0.8;
 +
}
 +
 
 +
#profileSelectorImgBox{
 +
width:150px;
 +
height:150px;
 +
margin-left:auto;
 +
margin-right:auto;
 +
border: solid 4px black;
 +
}
 +
 
 +
#profileSelectorText{
 +
width:330px;
 +
height:300px;
 +
background-color:#660000;
 +
opacity:0.7;
 +
font-size:18px;
 +
color:white;
 +
padding: 10px;
 +
}
 +
 
 +
</style>
 +
 
 +
<script type="text/javascript">
 +
 
 +
 
 +
</script>
 +
 
 +
</head>
 +
 
 +
 
 +
<body>
 +
<div id="ContentAll">
 +
 
 +
<div id="MainBanner">
 +
<img src="http://i1158.photobucket.com/albums/p607/iGEM_MN/MainBanner_compressed.png">
 +
</div>
 +
 
 +
<div id="SideBarAll">
 +
<div class="sideNavBar2">
 +
<ul>
 +
<li><a href='https://2012.igem.org/Team:Minnesota'>HOME</a></li>
 +
<li><a class="current" href='https://2012.igem.org/Team:Minnesota/Team'>TEAM</a></li>
 +
<li><a href='https://2012.igem.org/Team:Minnesota/Project'>PROJECT</a></li>
 +
<li><a href='https://2012.igem.org/Team:Minnesota/Notebook'>NOTEBOOK</a></li>
 +
<li><a href='https://2012.igem.org/Team:Minnesota/Attributions'>ATTRIBUTIONS</a></li>
 +
<li><a href='https://2012.igem.org/Team:Minnesota/Outreach'>OUTREACH</a></li>
 +
<li><a href='https://2012.igem.org/Team:Minnesota/Safety'>SAFETY</a></li>
 +
<li><a href='https://2012.igem.org/Team:Minnesota/Sponsors'>SPONSORS</a></li>
 +
</ul>
 +
</div>
 +
 
 +
<div class="sideSocialMediaButtons">
 +
<div style="position:absolute; left:6px; top:6px;">
 +
<a href="http://www.facebook.com/iGEM.Minnesota">
 +
<img id="fbButton" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/facebook_1.png">
 +
</a>
 +
</div>
 +
 
 +
<div style="position:absolute; left:66px; top:6px;">
 +
<a href="https://twitter.com/igem_mn">
 +
<img id="twitterButton" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/twitter_1.png">
 +
</a>
 +
</div>
 +
</div> <!--End sideSocialMediaButtons-->
 +
 
 +
<!--temp area for guide to social media-->
 +
<div style="position:absolute; top:420px; left:20px;font-family:Verdana;font-size:15;">
 +
Like us on FB and follow us on Twitter!
 +
</div>
 +
 
 +
</div> <!--End sideBarAll-->
 +
 
 +
<div id="MainBoxAll">
 +
 
 +
<div id="MainBoxContent">
 +
 
 +
<div class="profileSelectorIcon" style="position:absolute;left:20px;top:20px;">
 +
<img id="PSI1" width="75" height="75" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/George_resized.png">
 +
</div>
 +
<div class="profileSelectorIcon" style="position:absolute;left:100px;top:20px;">
 +
<img id="PSI2" width="75" height="75" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/Hannah_resized.png">
 +
</div>
 +
<div class="profileSelectorIcon" style="position:absolute;left:180px;top:20px;">
 +
<img id="PSI3" width="75" height="75" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/Molly_resized.png">
 +
</div>
 +
<div class="profileSelectorIcon" style="position:absolute;left:260px;top:20px;">
 +
<img id="PSI4" width="75" height="75" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/Misha_resized.png">
 +
</div>
 +
<div class="profileSelectorIcon" style="position:absolute;left:340px;top:20px;">
 +
<img id="PSI5" width="75" height="75" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/Maria_resized.png">
 +
</div>
 +
<div class="profileSelectorIcon" style="position:absolute;left:420px;top:20px;">
 +
<img id="PSI6" width="75" height="75" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/Niko_resized.png">
 +
</div>
 +
<div class="profileSelectorIcon" style="position:absolute;left:20px;top:100px;">
 +
<img id="PSI7" width="75" height="75" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/Michelle_resized.png">
 +
</div>
 +
<div class="profileSelectorIcon" style="position:absolute;left:20px;top:180px;">
 +
<img id="PSI8" width="75" height="75" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/Nolan_resized.png">
 +
</div>
 +
<div class="profileSelectorIcon" style="position:absolute;left:20px;top:260px;">
 +
<img id="PSI9" width="75" height="75" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/Kyle_resized.png">
 +
</div>
 +
 
 +
<div id="profileSelectorImgBox" style="position:absolute;left:120px; top:110px; margin-left:auto; margin-right:auto; background-color:white;">
 +
<img id="profileSelectorImg" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/students_maroon_img.png">
 +
</div>
 +
 
 +
<div id="profileSelectorText" style="position:absolute;left:300px; top:110px;">
 +
<p id="pstName">
 +
</p>
 +
<p id="pstDescription">
 +
Please mouse over each icon to learn about our team members!
 +
</p>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</div> <!--end mainboxcontent-->
 +
 
 +
<div class="rightNavButtons">
 +
 
 +
<div style="position:absolute;left:5px;top:0px;">
 +
<a href="#"><img id="mainRightButton1" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/welcome_gold_txt.png"></a>
 +
</div>
 +
<div style="position:absolute;left:5px;top:75px;">
 +
<a href="#"><img id="mainRightButton2" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/projects_gold_img.png"></a>
 +
</div>
 +
<div style="position:absolute;left:5px;top:150px;">
 +
<a href="#"><img id="mainRightButton3" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/theteam_gold_img.png"></a>
 +
</div>
 +
 
 +
 
 +
</div><!--end rightNavButtons-->
 +
 
 +
 
 +
<div id="MainBoxOtherLinks">
 +
<p class="otherLinks">
 +
<a href="https://2012.igem.org/Main_Page">iGEM Home</a> | <a href="https://igem.org/Team.cgi">Team Minnesota Info</a> |
 +
<a href="http://www1.umn.edu/twincities/index.html">University of Minnesota Home</a>
 +
</p>
 +
 
 +
</div> <!--end mainboxotherlinks-->
 +
 
 +
 
 +
 
 +
</div> <!--end mainboxall-->
 +
 
 +
 
 +
</div> <!--end content all-->
 +
 
 +
 
 +
 
 +
</body>
 +
 
 +
 
 +
 
 +
</html>

Revision as of 22:28, 13 September 2012

Team:Minnesota - Main Style Template Team:Minnesota

Like us on FB and follow us on Twitter!

Please mouse over each icon to learn about our team members!

Retrieved from "http://2012.igem.org/Team:Minnesota/Team_Students"