Difference between revisions of "Team:UChicago/Team"

(Prototype team page)
 
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{UChicago}}
+
{{Team:Uchicago/CSS}}
 +
{{Team:Uchicago/menubar}}
 
<html>
 
<html>
 +
<head>
 +
<style>
  
 +
.imgleft {
 +
left:20px;
 +
        margin:15px;
 +
        margin-top:80px;
 +
float:left;
 +
}
  
 +
.imgcenter {
 +
margin:15px auto;
 +
        margin-top:80px;
 +
}
  
−
<div class="column full_size" >
+
.imgright {
 +
right:20px;
 +
margin: 15px;
 +
        margin-top:80px;
 +
float:right;
 +
}
  
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
.imgleft, .imgcenter, .imgright {
 +
width:300px;
 +
display:inline-block;
 +
padding:5px;
 +
background-color:#1f0028;
 +
cursor:pointer;
 +
}
  
 +
.imgleft img, .imgcenter img, .imgright img {
 +
width:300px;
 +
height:300px;
 +
}
  
−
</div>
+
.imgleft:hover, .imgcenter:hover, .imgright:hover {
 +
background-color:#e5b422;
 +
}
  
−
<div class="column half_size" >
+
/***************************************************Pop up css*****************************************/
−
<h5>Inspiration</h5>
+
#popupbackground {
−
<p>You can look at what other teams did to get some inspiration! <br />
+
position:fixed;
−
Here are a few examples:</p>
+
top:0;
−
<ul>
+
bottom:0;
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
left:0;
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
right:0;
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
margin-bottom:-1px;
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
background: rgba(0, 0, 0, 0.7);
−
</ul>
+
z-index:51;
 +
transition:opacity 500ms;
 +
visibility:hidden;
 +
opacity:0;
 +
}
  
 +
.popup {
 +
position:fixed;
 +
width:810px;
 +
height:550px;
 +
background-color:#1f0028;
 +
left:50%;
 +
    text-align:left;
 +
margin-left:-400px;
 +
top:50%;
 +
margin-top:-295px;
 +
z-index:52;
 +
visibility:hidden;
 +
opacity:0;
 +
transition:opacity 500ms;
 +
}
 +
 +
.popupcontentcontainer {
 +
width:800px;
 +
height:540px;
 +
position:relative;
 +
margin:5px;
 +
background-color:white;
 +
}
 +
 +
.popupimage {
 +
float:right;
 +
margin-left:10px;
 +
margin-top:46px;
 +
margin-bottom:1px;
 +
padding:15px;
 +
background-color:#1f0028;
 +
height:400px;
 +
width:400px;
 +
}
 +
 +
.popupcontent {
 +
height:480px;
 +
padding:15px;
 +
}
 +
 +
.close {
 +
    z-index: 53;
 +
position:relative;
 +
top:5px;
 +
right:8px;
 +
font-size:30px;
 +
font-weight:bold;
 +
color:black;
 +
cursor:pointer;
 +
    float: right;
 +
}
 +
 +
.close:visited {
 +
color:white;
 +
}
 +
 +
.close:hover {
 +
color:red;
 +
}
 +
 +
 +
</style>
 +
</head>
 +
 +
 +
<body>
 +
 +
<div class="maindiv">
 +
 +
<!-----------------------------------Container div---------------------------------------------->
 +
<div class="container">
 +
<!---------------------------Top image on page------------------------------------------>
 +
<!--<div class="imagearea" style="background-color:#ffa366">
 +
<h1 style="line-height:230px">MEET THE TEAM</h1>
 +
</div>-->
 +
<!---------------------------Main content section of page------------------------------->
 +
<div class="content" style="text-align:center">
 +
<div class="imgleft">
 +
<img id="glickimage" src="https://static.igem.org/mediawiki/2016/a/ab/T--UChicago--glickhead.png"/>
 +
</div>
 +
<div class="imgcenter">
 +
<img id="morganimage" src="https://static.igem.org/mediawiki/2016/d/d0/T--UChicago--Morganheadshot.JPG"/>
 +
</div>
 +
<div class="imgright">
 +
<img id="chinyeimage" src="https://static.igem.org/mediawiki/2016/a/aa/T--UChicago--Chinye.jpg"/>
 +
</div>
 +
<!-------------------------------------To split the inline-block elements---------------------------------------------->
 +
<div style="width:100%"></div>
 +
<div class="imgleft">
 +
<img id="steveimage" src="https://static.igem.org/mediawiki/2016/2/2a/T--UChicago--Steve.jpg"/>
 +
</div>
 +
            <div class="imgcenter">
 +
<img id="mirandaimage" src="https://static.igem.org/mediawiki/2016/c/c6/T--UChicago--mirandaheadshot.png"/>
 +
</div>
 +
 +
<div class="imgright">
 +
<img id="juliaimage" src="https://static.igem.org/mediawiki/2016/a/a2/T--UChicago--JuliaHeadshot.jpg"/>
 +
</div>
 +
 +
</div>
 +
</div>
 
</div>
 
</div>
  
−
<div class="column half_size" >
+
 
−
<h5>What should this page contain?</h5>
+
<!------------------------------------------Pop up box divs----------------------------------------------->
−
<ul>
+
<div id="popupbackground"></div>
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
<!------------------------------------------Glick---------------------------------------------------------->
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
<div class="popup" id="glickbio">
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
<span class="close">&times;</span>
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
<div class="popupcontentcontainer">
−
</ul>
+
<div class="popupcontent">
 +
    <p><img class="popupimage" src="https://static.igem.org/mediawiki/2016/a/ab/T--UChicago--glickhead.png"/> <span class="p">
 +
        <span style="font-size:30px;font-family:Aleo;"><b>Dr. Benjamin Glick</b></span><br><br>
 +
              <span style="font-size:20px">Professor Glick is UChicago GeneHackers' primary PI and mentor. He is a cell biologist. During his training, he studied vesicular transport in mammalian cells and mitochondrial protein import in yeast. His independent research has focused on the organization and dynamics of the yeast secretory pathway, and on engineering fluorescent proteins.</span>
 +
</span></p>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
<!------------------------------------------Morgan---------------------------------------------------------->
 +
<div class="popup" id="morganbio">
 +
<span class="close">&times;</span>
 +
<div class="popupcontentcontainer">
 +
<div class="popupcontent">
 +
<p><img class="popupimage" src="https://static.igem.org/mediawiki/2016/d/d0/T--UChicago--Morganheadshot.JPG"/> <span class="p">
 +
                <span style="font-size:30px;font-family:Aleo;"><b>Morgan Pantuck</b></span><br><br><span style="font-size:20px">
 +
              Morgan is a senior pursuing a Biological Sciences major and Molecular Engineering minor at the University of Chicago. She has been a member of GeneHackers since her sophomore year and currently serves as the group’s Co-President. When she isn’t in lab, Morgan is normally writing satire or doing stand-up and improv with various comedy groups on campus.
 +
</span></p>
 +
</div>
 +
</div>
 +
</div>
 +
<!------------------------------------------Chinye---------------------------------------------------------->
 +
<div class="popup" id="chinyebio">
 +
<span class="close">&times;</span>
 +
<div class="popupcontentcontainer">
 +
<div class="popupcontent">
 +
<p><img class="popupimage" src="https://static.igem.org/mediawiki/2016/a/aa/T--UChicago--Chinye.jpg"/><span class="p">
 +
                <span style="font-size:30px;font-family:Aleo;"><b>Chinye Ijeli</b></span><br><br><span style="font-size:20px">
 +
Chinye is a Biological Sciences major and junior at the University of Chicago. Her academic interests are sociology, public health, and infectious disease. She enjoys reading novels, playing music, and blogging. She loves all things related to Marvel comics and the TV show <i>Avatar: The Last Airbender.</i>
 +
</span></p>
 +
</div>
 +
</div>
 +
</div>
 +
<!------------------------------------------Steve---------------------------------------------------------->
 +
<div class="popup" id="stevebio">
 +
<span class="close">&times;</span>
 +
<div class="popupcontentcontainer">
 +
<div class="popupcontent">
 +
<p><img class="popupimage" src="https://static.igem.org/mediawiki/2016/2/2a/T--UChicago--Steve.jpg"/><span class="p">
 +
                <span style="font-size:30px;font-family:Aleo;"><b>Steve Dvorkin</b></span><br><br><span style="font-size:20px"> Steve is a Biological Sciences major and Sophomore attending the University of Chicago. His academic interests include molecular/synthetic biology, immunology, neuroscience, and psychology. He enjoys reading, playing music, and crafting Dungeons and Dragons campaigns. He's really proud of his primers, they’re like his children.
 +
</span></p>
 +
</div>
 +
</div>
 +
</div>
 +
<!------------------------------------------Miranda---------------------------------------------------------->
 +
<div class="popup" id="mirandabio">
 +
<span class="close">&times;</span>
 +
<div class="popupcontentcontainer">
 +
<div class="popupcontent">
 +
<p><img class="popupimage" src="https://static.igem.org/mediawiki/2016/c/c6/T--UChicago--mirandaheadshot.png"/><span class="p">
 +
                <span style="font-size:30px;font-family:Aleo;"><b>Miranda Halle</b></span><br><br><span style="font-size:20px"> Miranda is a Biological Sciences major and junior attending the University of Chicago who really should be working on the wiki right now. They do molecular biology things at school and really like synthetic biology in particular, having been a participant in iGEM since they were a wee high school senior back in 2014. They’re also UChicago iGEM’s resident Webmaster, and a big Star Trek nerd. Yay science.
 +
</span></p>
 +
</div>
 +
</div>
 +
</div>
 +
<!------------------------------------------Julia---------------------------------------------------------->
 +
<div class="popup" id="juliabio">
 +
<span class="close">&times;</span>
 +
<div class="popupcontentcontainer">
 +
<div class="popupcontent">
 +
<p><img class="popupimage" src="https://static.igem.org/mediawiki/2016/a/a2/T--UChicago--JuliaHeadshot.jpg"/><span class="p">
 +
                <span style="font-size:30px;font-family:Aleo;"><b>Julia Byeon</b></span><br><br><span style="font-size:20px">
 +
Julia is a fourth year Public Policy Studies major at the University of Chicago. She is currently Genehackers’s External Communications Manager. She likes policy as well as all other academic and nonacademic things.
 +
</span></p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
<!--------------------------------------------------Javascript-------------------------------------------------------------------->
 +
<script>
 +
 +
////////////////////////////Opens up team bios/////////////////////////////////////
 +
document.getElementById("glickimage").onclick = function() {
 +
document.getElementById('glickbio').style.visibility = "visible";
 +
document.getElementById('glickbio').style.opacity = "1";
 +
document.getElementById('popupbackground').style.visibility = "visible";
 +
document.getElementById('popupbackground').style.opacity = "1";
 +
}
 +
document.getElementById("morganimage").onclick = function() {
 +
document.getElementById('morganbio').style.visibility = "visible";
 +
document.getElementById('morganbio').style.opacity = "1";
 +
document.getElementById('popupbackground').style.visibility = "visible";
 +
document.getElementById('popupbackground').style.opacity = "1";
 +
}
 +
document.getElementById("chinyeimage").onclick = function() {
 +
document.getElementById('chinyebio').style.visibility = "visible";
 +
document.getElementById('chinyebio').style.opacity = "1";
 +
document.getElementById('popupbackground').style.visibility = "visible";
 +
document.getElementById('popupbackground').style.opacity = "1";
 +
}
 +
document.getElementById("steveimage").onclick = function() {
 +
document.getElementById('stevebio').style.visibility = "visible";
 +
document.getElementById('stevebio').style.opacity = "1";
 +
document.getElementById('popupbackground').style.visibility = "visible";
 +
document.getElementById('popupbackground').style.opacity = "1";
 +
}
 +
document.getElementById("mirandaimage").onclick = function() {
 +
document.getElementById('mirandabio').style.visibility = "visible";
 +
document.getElementById('mirandabio').style.opacity = "1";
 +
document.getElementById('popupbackground').style.visibility = "visible";
 +
document.getElementById('popupbackground').style.opacity = "1";
 +
}
 +
document.getElementById("juliaimage").onclick = function() {
 +
document.getElementById('juliabio').style.visibility = "visible";
 +
document.getElementById('juliabio').style.opacity = "1";
 +
document.getElementById('popupbackground').style.visibility = "visible";
 +
document.getElementById('popupbackground').style.opacity = "1";
 +
}
 +
 +
////////////////////////////////////Closes team bios//////////////////////////////////////////////
 +
document.getElementsByClassName("close")[0].onclick = function() {
 +
document.getElementById('glickbio').style.visibility = "hidden";
 +
document.getElementById('glickbio').style.opacity = "0";
 +
document.getElementById('popupbackground').style.visibility = "hidden";
 +
document.getElementById('popupbackground').style.opacity = "0";
 +
}
 +
 +
document.getElementsByClassName("close")[1].onclick = function() {
 +
document.getElementById('morganbio').style.visibility = "hidden";
 +
document.getElementById('morganbio').style.opacity = "0";
 +
document.getElementById('popupbackground').style.visibility = "hidden";
 +
document.getElementById('popupbackground').style.opacity = "0";
 +
}
 +
 +
document.getElementsByClassName("close")[2].onclick = function() {
 +
document.getElementById('chinyebio').style.visibility = "hidden";
 +
document.getElementById('chinyebio').style.opacity = "0";
 +
document.getElementById('popupbackground').style.visibility = "hidden";
 +
document.getElementById('popupbackground').style.opacity = "0";
 +
}
 +
 +
document.getElementsByClassName("close")[3].onclick = function() {
 +
document.getElementById('stevebio').style.visibility = "hidden";
 +
document.getElementById('stevebio').style.opacity = "0";
 +
document.getElementById('popupbackground').style.visibility = "hidden";
 +
document.getElementById('popupbackground').style.opacity = "0";
 +
}
 +
 +
document.getElementsByClassName("close")[4].onclick = function() {
 +
document.getElementById('mirandabio').style.visibility = "hidden";
 +
document.getElementById('mirandabio').style.opacity = "0";
 +
document.getElementById('popupbackground').style.visibility = "hidden";
 +
document.getElementById('popupbackground').style.opacity = "0";
 +
}
 +
 +
document.getElementsByClassName("close")[5].onclick = function() {
 +
document.getElementById('juliabio').style.visibility = "hidden";
 +
document.getElementById('juliabio').style.opacity = "0";
 +
document.getElementById('popupbackground').style.visibility = "hidden";
 +
document.getElementById('popupbackground').style.opacity = "0";
 +
}
  
  
 +
////////////////////////////////////////////////////Close window on background click///////////////////////////////////////////
 +
document.getElementById('popupbackground').onclick = function() {
 +
document.getElementById('popupbackground').style.visibility = "hidden";
 +
document.getElementById('popupbackground').style.opacity = "0";
 +
document.getElementById('glickbio').style.visibility = "hidden";
 +
document.getElementById('glickbio').style.opacity = "0";
 +
document.getElementById('morganbio').style.visibility = "hidden";
 +
document.getElementById('morganbio').style.opacity = "0";
 +
document.getElementById('chinyebio').style.visibility = "hidden";
 +
document.getElementById('chinyebio').style.opacity = "0";
 +
document.getElementById('stevebio').style.visibility = "hidden";
 +
document.getElementById('stevebio').style.opacity = "0";
 +
document.getElementById('mirandabio').style.visibility = "hidden";
 +
document.getElementById('mirandabio').style.opacity = "0";
 +
document.getElementById('juliabio').style.visibility = "hidden";
 +
document.getElementById('juliabio').style.opacity = "0";
  
 +
}
 +
</script>
  
 +
</body>
 
</html>
 
</html>

Latest revision as of 22:50, 18 October 2016