Team:Minnesota/Test

From 2012.igem.org

(Difference between revisions)
m
m
 
(265 intermediate revisions not shown)
Line 1: Line 1:
-
{{Minnesota_Main_Styles}}
+
{{Minnesota_Main_Styles2}}
<html>
<html>
<head>
<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(){
 +
 +
  // jQuery functions go here...
 +
 +
//vertical autocenter
 +
$(window).resize(function(){
 +
  $('#ContentAll').css({
 +
    position:'absolute',
 +
    top: ($(window).height() - $('#ContentAll').outerHeight())/2
 +
  });
 +
});
 +
 +
$(window).resize();
 +
//end vertial autocenter
 +
 +
 +
//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");}
 +
);
 +
 +
 +
 +
 +
//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");}
 +
);
 +
 +
 +
$("#testBox").hover(
 +
    function(){ $(this).text("Red!"); $(this).css("background-color","red"); $(this).css("font-weight", "bold");},
 +
    function(){ $(this).text("Blue!"); $(this).css("background-color","blue");$(this).css("font-weight", "normal");}
 +
);
 +
 +
 +
}); //ends .ready function
 +
 +
 +
 +
</script>
 +
<style type="text/css">
<style type="text/css">
 +
#testBox{
 +
position:absolute;
 +
top: 20px;
 +
left: 20px;
 +
width: 100px;
 +
height: 100px;
 +
background-color: blue;
-
.SurroundBox{
+
}
 +
 
 +
 
 +
 
 +
 
 +
#ContentAll{
position:absolute;
position:absolute;
-
width:1500px;
+
width:1000px;
-
height: 800px;
+
height:700px;
-
background-color:blue;
+
/*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;
 +
}
 +
</style>
</style>
 +
 +
<script type="text/javascript">
 +
function displayDate()
 +
{
 +
var currentDate = new Date();
 +
var compDate = new Date(2012,10,3,0,0,0,0);
 +
var dif = compDate - currentDate;
 +
var sec = dif/1000;
 +
var min = sec/60;
 +
var hour = min/60;
 +
var day = hour/24;
 +
var week = Math.floor(day/7);
 +
var dispday = Math.floor(day)%24;
 +
var disphour = Math.floor(hour)%24;
 +
var dispmin = Math.floor(min)%60;
 +
var dispsec = Math.floor(sec)%60;
 +
var dispString = "Time until iGEM North America East Regional Jamboree: " + week + " weeks, " + dispday + " days, " + disphour + " hours, " + dispmin + " minutes, " + dispsec + " seconds.";
 +
document.getElementById("demo").innerHTML=dispString;
 +
t=setTimeout('displayDate()',500);
 +
 +
}
 +
</script>
 +
</head>
</head>
 +
 +
<body>
<body>
 +
<div id="ContentAll">
-
<div class="SurroundBox">hello!</div>
+
<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 class="current" href='https://2012.igem.org/Team:Minnesota'>HOME</a></li>
 +
<li><a 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/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">
 +
<img id="MainBoxContentImg" src="http://i1158.photobucket.com/albums/p607/iGEM_MN/image1_resized.png">
 +
 +
<div class="mainContentTextBanner">
 +
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!
 +
</div><!--end mainContentTextBanner-->
 +
 +
</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-->
 +
 +
 +
 +
 +
 +
<div class="hidden">
 +
<script type="text/javascript">
 +
<!--//--><![CDATA[//><!--
 +
var images = new Array()
 +
function preload() {
 +
for (i = 0; i < preload.arguments.length; i++) {
 +
images[i] = new Image()
 +
images[i].src = preload.arguments[i]
 +
}
 +
}
 +
preload(
 +
"http://i1158.photobucket.com/albums/p607/iGEM_MN/image4_resized.png",
 +
"http://i1158.photobucket.com/albums/p607/iGEM_MN/image3_resized.png",
 +
"http://i1158.photobucket.com/albums/p607/iGEM_MN/image1_resized.png"
 +
)
 +
//--><!]]>
 +
</script>
 +
</div>
 +
 +
 +
<div style="position:absolute; left:20px; top:20px; width:  300px; height:300px; background-color: white;">
 +
<p id="testBox">
 +
Blue!
 +
</p>
 +
</div>
</body>
</body>
 +
 +
 +
</html>
</html>

Latest revision as of 23:49, 6 September 2012

Team:Minnesota - Main Style Template Team:Minnesota

Like us on FB and follow us on Twitter!
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!

Blue!

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