Difference between revisions of "Team:Wellesley TheTech"

 
(35 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
 
+
{{Template:Template_Wellesley_TheTech}}
−
 
+
  
 
<html>
 
<html>
 
<head>
 
<head>
−
<!-- Start of CSS-->
+
<title>Wellesley & The Tech iGEM Team: Welcome</title>
−
<style type="text/css">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
−
+
<meta charset="utf-8">
 +
<meta name="viewport" content="width=device-width">
  
−
/* PAGE LAYOUT */
+
<body>
  
−
/* Change Background color*/
 
−
body {
 
−
background-image: url("https://2015.igem.org/File:Wellesley_TheTech_Background.png");
 
−
width: 980px;
 
−
margin: auto;
 
−
background-color: #565656;
 
−
}
 
−
 
−
@font-face {
 
−
  font-family: 'SlimJoe';
 
−
  src: url("https://2015.igem.org/File:Wellesley_TheTech_SlimJoeFont.otf")
 
−
}
 
−
 
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
−
#mainContainer { 
 
−
width: 998px;
 
−
position: absolute;
 
−
bottom: 0;
 
−
top: 0;
 
−
margin: auto;
 
−
background-color: #fff;
 
−
border-bottom: 14px solid #57c7da;
 
−
border-top: 20px solid #57c7da;
 
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
−
z-index: -1;
 
−
}
 
−
 
−
/* Creates the container for the menu */
 
−
#menuContainer {
 
−
background-color: #E8E8E9;
 
−
 
−
}
 
−
 
−
/* Creates the container for the content */
 
−
#contentContainer {
 
−
padding-right:10px;
 
−
margin-bottom: 20px;
 
−
width: 814px;
 
−
padding-left: 20px;
 
−
float: left;
 
−
background-color: #fff;
 
−
border-top: 14px solid #565656;
 
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
−
}
 
−
 
−
/*Set up height place holder for the banner*/
 
−
#bannerContainer {
 
−
color: #24B694;
 
−
position:absolute;
 
−
bottom: 0px;
 
−
margin-left: -45px;
 
−
width: 1061px;
 
−
}
 
−
 
−
 
−
 
−
#topContainer{
 
−
 
−
position: absolute;
 
−
top: 0px;
 
−
left: 0;
 
−
width: 100%;
 
−
text-align: left;
 
−
}
 
−
 
−
#topContainer h1 {
 
−
color: #5d6bb2;
 
−
font-weight: bold;
 
−
font-family: "Roboto", sans-serif;
 
−
font-size: 40px;
 
−
margin: 25px 50px 5px;
 
−
}
 
−
 
−
#topContainer h2 {
 
−
color: #5d6bb2;
 
−
font-family: "SlimJoe";
 
−
font-size: 45px;
 
−
margin: -60px 410px -40px;
 
−
}
 
−
 
−
#topContainer h3 {
 
−
color: #5d6bb2;
 
−
font-family: "SlimJoe";
 
−
font-size: 45px;
 
−
margin: -13px 2000px;
 
−
}
 
−
 
−
#topContainer a {
 
−
color: inherit;
 
−
text-decoration: none;
 
−
}
 
−
 
−
.nextLine{
 
−
margin-top: -40px;
 
−
margin-left: 30px;
 
−
}
 
−
 
−
.leftFloat {
 
−
float:left;
 
−
}
 
−
 
−
.rightFloat{
 
−
float:right;
 
−
}
 
−
 
−
#menuBar {
 
−
background-color: #7a86c2;
 
−
position: absolute;
 
−
bottom: 430px;
 
−
left: 0;
 
−
height: 50px;
 
−
width: 100%;
 
−
}
 
−
 
−
 
−
 
−
 
−
 
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 
−
 
−
/*Change the styling of text for everything inside main container*/
 
−
#mainContainer p {
 
−
font-size: 13px;
 
−
color: #000000;
 
−
}
 
−
 
−
/*This changes the color and font family */
 
−
#contentContainer h1, h2, h3, h4, h5, h6 {
 
−
color: #565656;
 
−
border-bottom: none;
 
−
font-weight: bold;
 
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
−
margin-top:10px;
 
−
}
 
−
 
−
/*Style of the links - links are different inside the menu */
 
−
#contentContainer a {
 
−
font-weight: bold;
 
−
color: #23b593;
 
−
}
 
−
 
−
  /* Styling links on hover- links are different inside the menu */
 
−
#contentContainer a:hover {
 
−
color: #59bf92;
 
−
}
 
−
 
−
/*Change the styling of tables */
 
−
        #contentContainer table {
 
−
    border: 1px solid #565656;
 
−
    border-collapse: collapse;
 
−
    width: 90%
 
−
    }
 
−
 
−
/*Change the styling of table cells*/
 
−
    #contentContainer  td {
 
−
    padding: 10px;
 
−
    border: 1px solid #565656;
 
−
    border-collapse: collapse;
 
−
    vertical-align: text-top;
 
−
    }
 
−
 
−
/*Change the styling of table headers */
 
−
    #contentContainer th {
 
−
    background-color: #E8E8E9;
 
−
    padding: 10px;
 
−
    border: 1px solid #565656;
 
−
    border-collapse: collapse;
 
−
    vertical-align: text-top;
 
−
    }
 
−
 
−
 
−
 
−
/*MENU STYLING */
 
−
 
−
#menuwrapper {
 
−
    height: auto;
 
−
    text-align: justify;
 
−
    -ms-text-justify: distribute-all-lines;
 
−
    text-justify: distribute-all-lines;
 
−
    padding-top: 10px;
 
−
}
 
−
 
−
#menuwrapper ul li {
 
−
    width: auto;
 
−
    height: 40px;
 
−
    vertical-align: top;
 
−
    display: inline-block;
 
−
    *display: inline;
 
−
    margin-right: 50px;
 
−
}
 
−
 
−
.stretcher {
 
−
    width: 90%;
 
−
    display: inline-block;
 
−
    font-size: 0;
 
−
    line-height: 0;
 
−
}
 
−
 
−
/*Styling for the links in the menu */
 
−
#menuContainer a {
 
−
color: #565656;
 
−
text-decoration:none;
 
−
font-weight: bold;
 
−
}
 
−
 
−
/* Sets the style for lists inside menuContainer  */
 
−
#menuContainer ul {
 
−
list-style: none;
 
−
margin-left:0px;
 
−
}
 
−
 
−
/*Styles the list items to become menu buttons */
 
−
#menuContainer ul li {
 
−
text-align: center;
 
−
height:30px;
 
−
display:inline;
 
−
padding: 0px 0px 20px 20px;
 
−
}
 
−
 
−
/*For the menu buttons, changes the color when hovering*/
 
−
#menuContainer li:hover {
 
−
color:  #FFF;
 
−
background-color: #C2A3FF;
 
−
}
 
−
 
−
/*Submenus are not displayed as default*/
 
−
#menuContainer li ul {
 
−
display: none;
 
−
padding-top:15px;
 
−
margin-left: -19px;
 
−
}
 
−
 
−
/*Submenus are displayed when hovering the menu button */
 
−
#menuContainer li:hover ul {
 
−
/*display: inline-block; */
 
−
display: block;
 
−
position: absolute;
 
−
float:right;
 
−
margin-left: 134px;
 
−
margin-top:-42px;
 
−
}
 
−
 
−
/*Style the submenu buttons*/
 
−
#menuContainer li ul li{
 
−
background-color: #C2A3FF;
 
−
padding-left:20px;
 
−
padding-right:20px;
 
−
height:30px;
 
−
padding-top:10px;
 
−
margin-top:-2px;
 
−
color: #565656;
 
−
width: 150px;
 
−
}
 
−
 
−
/*CLASSES */
 
−
 
−
/*Clear class for all the pages, adds spacing too*/
 
−
.clear{
 
−
clear:both;
 
−
height: 10px;
 
−
}
 
−
 
−
 
−
/* highlight box for special messages */
 
−
    .highlightBox {
 
−
        width:500px;
 
−
        margin:auto;
 
−
        background-color: #E8E8E9;
 
−
margin-bottom: 15px;
 
−
margin-top: 15px;
 
−
padding: 15px;
 
−
padding-top: 5px;
 
−
    }
 
−
 
−
 
−
</style>
 
−
</head>
 
−
<!-- End of CSS -->
 
−
 
 
<div id="bannerContainer">
 
<div id="bannerContainer">
 
<br><br>
 
<br><br>
−
<img src="https://2015.igem.org/File:Wellesley_TheTech_Banner.png" alt="banner" width="100%"/>
+
<img src="https://static.igem.org/mediawiki/2015/b/b7/Wellesley_TheTech_Banner.png" alt="banner" width="100%"/>
 
</div>
 
</div>
−
<div id="mainContainer">
+
 
 +
<div id="mainContainer" style="position:fixed">
 
<div id="topContainer">
 
<div id="topContainer">
 
 
Line 304: Line 26:
  
 
</div>
 
</div>
 +
 +
<div id="linkscontainer">
 +
<img src ="https://static.igem.org/mediawiki/2015/5/52/Wellesley_TheTech_Links.png" alt="links"/>
 +
</div>
 
</div>
 
</div>
  
 
<div id="menuBar">
 
<div id="menuBar">
 +
<ul>
 +
    <li id="placeholder"></li>
 +
    <li>TEAM
 +
    <ul>
 +
    <a href="/Team:Wellesley_TheTech/Team/Members"><li>Members</li></a>
 +
<a href="/Team:Wellesley_TheTech/Team/Notebooks"><li>Notebooks</li></a> 
 +
<a href="/Team:Wellesley_TheTech/Team/Acknowledgements"><li>Acknowledgements</li></a>
 +
</ul>
 +
    </li>
 +
    <li>PROJECT
 +
<ul>
 +
<a href="/Team:Wellesley_TheTech/Project/Overview"><li>Overview</li></a>
 +
<a href="/Team:Wellesley_TheTech/Project/Digital"><li>Digital Component</li></a>
 +
<a href="/Team:Wellesley_TheTech/Project/Wetlab"><li>Wetlab Component</li></a>
 +
<a href="/Team:Wellesley_TheTech/Project/Background"><li>Background</li></a>
 +
<a href="/Team:Wellesley_TheTech/Project/Hardware"><li>Hardware</li></a>
 +
</ul>
 +
</li>
 +
    <li>OUTREACH
 +
<ul>
 +
<a href="/Team:Wellesley_TheTech/Outreach/Practices"><li>Practices</li></a>
 +
<a href="/Team:Wellesley_TheTech/Outreach/Methodology"><li>Methodology</li></a>
 +
<a href="/Team:Wellesley_TheTech/Outreach/Collaboration"><li>Collaboration</li></a>
 +
</ul>
 +
</li>
 +
    <li><a href="/Team:Wellesley_TheTech/Medals/Fulfillment" style="color:#fff;">MEDAL FULFILLMENT</a></li>
 +
    </ul>
 
</div>
 
</div>
−
</div>
 
  
 +
<div id="overviewRect">
 +
The Wellesley Human-Computer Interaction Lab and the Tech Museum of Innovation in San Jose collaborated to create BacPack: an interactive museum exhibit that teaches fundamental Synthetic Biology concept in innovative ways. The exhibit features both a digital and a wet lab component that complement each other to convey basic principles of SynBio and raise awareness of the excitement and complexity of the field. BacPack users take on the role of a scientist and engineer bacteria that can help explorers on scientific missions in extreme environments, including Mars, Antarctica, and the Deep Sea.
 +
</div>
 +
 +
</div>
 
</html>
 
</html>

Latest revision as of 19:59, 18 September 2015

Wellesley & The Tech iGEM Team: Welcome



banner
The Wellesley Human-Computer Interaction Lab and the Tech Museum of Innovation in San Jose collaborated to create BacPack: an interactive museum exhibit that teaches fundamental Synthetic Biology concept in innovative ways. The exhibit features both a digital and a wet lab component that complement each other to convey basic principles of SynBio and raise awareness of the excitement and complexity of the field. BacPack users take on the role of a scientist and engineer bacteria that can help explorers on scientific missions in extreme environments, including Mars, Antarctica, and the Deep Sea.