Team:Wellesley HCI

From 2012.igem.org

(Difference between revisions)
Line 35: Line 35:
/*only use for current page content header (i.e. Team, G-nomeSurferPro, etc)*/
/*only use for current page content header (i.e. Team, G-nomeSurferPro, etc)*/
H6 {
H6 {
-
       font-family: 'Caviar Dreams';
+
       font-family: Helvetica;
-
font-size:5px;
+
      font-size:32pt;
       text-transform: uppercase;
       text-transform: uppercase;
       text-decoration: none;
       text-decoration: none;
-
       text-align: center;
+
       /*text-align: center;*/
       color: #272829;
       color: #272829;
-
      font-size: 32pt;
 
     }
     }
Line 52: Line 51:
       font-size: 12pt;
       font-size: 12pt;
     }
     }
 +
 +
/*Page content styles (e.g. welcome, project images)*/
 +
#comp {
 +
    float:left;
 +
    width:475px;
 +
}
 +
#compimg {
 +
    float:left;
 +
    width:500px; height:300px;
 +
    margin:0 25px 0 0;
 +
    background-color:red;
 +
}
 +
 +
/*Project images with rollover*/
 +
.project {
 +
background-color:red;
 +
width:300px; height:180px;
 +
float:left;
 +
margin:10px;
 +
position:relative;
 +
}
 +
.project img { width:100%; }
 +
.projectBar { width:100%; height:60px; position:absolute; color:white; overflow:hidden;}
 +
.projectName {
 +
font-family:Bebas Neue;
 +
font-size:30px;
 +
text-align:right;
 +
padding:5px 10px;
 +
}
 +
.projectAbout {
 +
background-image:url('http://cs.wellesley.edu/~hcilab/iGEM2012/images/arrow.png');
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
background-color:rgba(0,0,0,0.5);
 +
background-clip:border-box;
 +
font-size:12px;
 +
height:auto;
 +
margin-top:-50px;
 +
padding:5px 5px 5px 50px; /*50px padding makes room for arrow on left*/
 +
-webkit-transition-duration:0.5s; -moz-transition-duration:0.5s;
 +
}
 +
.project:hover .projectAbout { margin-top:10px; }
</style>
</style>
Line 102: Line 143:
<br>
<br>
 +
 +
<div id="compimg">
 +
</div>
 +
 +
<div id="comp" class="team_box">
<h6>Welcome!</h6>
<h6>Welcome!</h6>
 +
<br>
-
<div id="comp" class="team_box">
+
<div class="intro_greeting">Synthetic biology will require a multidisciplinary, collaborative design environment in order to engineer the complex biological systems of the future. Our team will create a collection of software tools which address specific technical synthetic biology challenges while simultaneously advancing the way in which users interact with computing environments. Our software will support the scientific workflow process by supporting each step: research, brainstorming, building, test, troubleshooting, iteration, and analysis. The combination of human computer interaction, bio-design automation, and experimental design makes our effort unique in the iGEM experience and closes the loop on the design-build-test methodology.
<br>
<br>
-
 
-
<h3><div class="intro_greeting">Synthetic biology will require a multidisciplinary, collaborative design environment in order to engineer the complex biological systems of the future. Our team will create a collection of software tools which address specific technical synthetic biology challenges while simultaneously advancing the way in which users interact with computing environments. Our software will support the scientific workflow process by supporting each step: research, brainstorming, building, test, troubleshooting, iteration, and analysis. The combination of human computer interaction, bio-design automation, and experimental design makes our effort unique in the iGEM experience and closes the loop on the design-build-test methodology.
 
-
<br></h3>
 
<br></div>
<br></div>
-
<p style="text-align:center;">
+
<div class="project">
 +
<div class="projectBar">
 +
<div class="projectAbout">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales mollis tempus.</div>
 +
<div class="projectName">SynBio Search</div>
 +
</div>
 +
</div>
 +
<div class="project">
 +
<div class="projectBar">
 +
<div class="projectAbout">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales mollis tempus.</div>
 +
<div class="projectName">MoClo Planner</div>
 +
</div>
 +
</div>
 +
<div class="project">
 +
<div class="projectBar">
 +
<div class="projectAbout">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales mollis tempus.</div>
 +
<div class="projectName">SynFlo</div>
 +
</div>
 +
</div>
 +
 
 +
<p style="text-align:center; width:100%; display:block;">
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/agilentlogo-home.png" width="200px">
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/agilentlogo-home.png" width="200px">
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/HHMILogo.jpg" width="100px">
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/HHMILogo.jpg" width="100px">

Revision as of 00:53, 9 September 2012

Wellesley HCI iGEM Team: Welcome


Welcome!

Synthetic biology will require a multidisciplinary, collaborative design environment in order to engineer the complex biological systems of the future. Our team will create a collection of software tools which address specific technical synthetic biology challenges while simultaneously advancing the way in which users interact with computing environments. Our software will support the scientific workflow process by supporting each step: research, brainstorming, building, test, troubleshooting, iteration, and analysis. The combination of human computer interaction, bio-design automation, and experimental design makes our effort unique in the iGEM experience and closes the loop on the design-build-test methodology.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales mollis tempus.
SynBio Search
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales mollis tempus.
MoClo Planner
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales mollis tempus.
SynFlo






Retrieved from "http://2012.igem.org/Team:Wellesley_HCI"