Difference between revisions of "Team:BGIC-Union/Parts"

(Prototype team page)
 
Line 1: Line 1:
−
{{BGIC-Union}}
 
 
<html>
 
<html>
 +
  <head>
 +
    <meta charset="utf-8">
 +
 
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
 +
    <title>Team：BGIC-Union/PROJECT</title>
  
 +
  <head>
 +
 
 +
        <link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
 +
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500' rel='stylesheet' type='text/css'>
  
 +
<!-- progress -->
  
 +
<!-- Bootstrap core CSS -->
 +
    <link href="https://2017.igem.org/Template:BGIC-Union/bootstrap-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
<!-- animate -->
 +
<link href="https://2017.igem.org/Template:BGIC-Union/animate-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
  <!-- carousel -->
 +
  <link href="https://2017.igem.org/Template:BGIC-Union/owlcarousel-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
  <link href=" https://2017.igem.org/Template:BGIC-Union/fontawesomemin2-css?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
  <!-- light -->
 +
<style type="text/css">
 +
/* fixed line holder */
 +
.timelineLight .timeline_line {c
 +
margin-top:10px;
 +
margin-bottom:10px;
 +
width:900px;
 +
}
  
−
<div class="column full_size">
+
/* full (including months that are not shown) line holder */
 +
.timelineLight .t_line_holder {
 +
height:80px;
 +
background:url('https://static.igem.org/mediawiki/2017/3/35/Line.jpg') repeat-x 0px 39px;
 +
}
  
−
<h1>Parts</h1>
+
/* 2 months are stored in one view */
 +
.timelineLight .t_line_view {
 +
height:20px;
 +
width:900px;
 +
}
  
−
<p>Each team will make new parts during iGEM and will submit them to the Registry of Standard Biological Parts. The iGEM software provides an easy way to present the parts your team has created. The <code>&lt;groupparts&gt;</code> tag (see below) will generate a table with all of the parts that your team adds to your team sandbox.</p>
+
/* holder for year number */
−
<p>Remember that the goal of proper part documentation is to describe and define a part, so that it can be used without needing to refer to the primary literature. Registry users in future years should be able to read your documentation and be able to use the part successfully. Also, you should provide proper references to acknowledge previous authors and to provide for users who wish to know more.</p>
+
.timelineLight h3.t_line_year {
 +
margin:0;
 +
color:#545454;
 +
}
  
 +
/* holder for 1 month (constist of nodes and month caption) - we use borders to separate months thats why it has width 2px less then 50% */
 +
.timelineLight .t_line_m {
 +
margin-top:35px;
 +
height:10px;
 +
border-left:1px solid #545454;
 +
border-right:1px solid #545454;
 +
width:448px;
 +
}
  
−
</div>
+
/* month on the right side - has left set at 459 so border would overlap border from first element (to evade duplicated borders) */
 +
.timelineLight .t_line_m.right {
 +
left:449px;
 +
width:449px;
 +
}
  
 +
/* month caption */
 +
.timelineLight h4.t_line_month {
 +
margin:-30px 0 0;
 +
color:#545454;
 +
}
  
 +
/* used in responsive layout when only one month is shown (it is span containing year) */
 +
.t_line_month_year {
 +
display:none;
 +
}
  
 +
/* node on the timeline */
 +
.timelineLight a.t_line_node {
 +
text-decoration:none;
 +
padding:38px 0 4px;
 +
height:10px;
 +
font-size:12px;
 +
top:-25px;
 +
background:url('https://static.igem.org/mediawiki/2017/2/2a/Dot.png') no-repeat center 24px;
 +
color:#141817;
 +
}
 +
.timelineLight a.t_line_node:hover {
 +
background:url('https://static.igem.org/mediawiki/2017/6/65/Dot-rollover.png') no-repeat center 24px;
 +
}
 +
.timelineLight a.t_line_node.active {
 +
background:url('https://static.igem.org/mediawiki/2017/d/d7/Dot-selected.png') no-repeat center 24px;
 +
}
  
 +
/* node description */
 +
.timelineLight .t_node_desc {
 +
background: rgba(26,134,172,0.9);
 +
top:0;
 +
color:#fff;
 +
padding:1px 5px;
 +
}
  
−
<div class="column half_size">
+
/* descriptions on right side go from right to left */
−
<div class="highlight">
+
.timelineLight .t_node_desc.pos_right {
−
<h5>Note</h5>
+
right:0;
−
<p>Note that parts must be documented on the <a href="http://parts.igem.org/Main_Page"> Registry</a>. This page serves to <i>showcase</i> the parts you have made. Future teams and other users and are much more likely to find parts by looking in the Registry than by looking at your team wiki.</p>
+
}
−
</div>
+
−
</div>
+
  
 +
/* line arrow left */
 +
.timelineLight #t_line_left {
 +
cursor:pointer;
 +
left:-30px;
 +
top:30px;
 +
width:14px;
 +
height:19px;
 +
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left top;
 +
}
  
 +
.timelineLight #t_line_left:hover {
 +
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat left bottom;
 +
}
  
 +
/* line arrow right */
 +
.timelineLight #t_line_right {
 +
cursor:pointer;
 +
right:-30px;
 +
top:30px;
 +
width:14px;
 +
height:19px;
 +
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right top;
 +
}
  
−
<div class="column half_size">
+
.timelineLight #t_line_right:hover {
 +
background:url('https://static.igem.org/mediawiki/2017/9/95/Bgic-arrow.png') no-repeat right bottom;
 +
}
 +
.timelineLight {
 +
display:none;
 +
}
  
−
<h5>Adding parts to the registry</h5>
+
/* items container */
−
<p>You can add parts to the Registry at our <a href="http://parts.igem.org/Add_a_Part_to_the_Registry">Add a Part to the Registry</a> link.</p>
+
.timelineLight .timeline_items {
−
<p>We encourage teams to start completing documentation for their parts on the Registry as soon as you have it available. The sooner you put up your parts, the better you will remember all the details about your parts. Remember, you don't need to send us the DNA sample before you create an entry for a part on the Registry. (However, you <b>do</b> need to send us the DNA sample before the Jamboree. If you don't send us a DNA sample of a part, that part will not be eligible for awards and medal criteria.)</p>
+
padding:10px 0;
−
</div>
+
}
  
 +
/* single item (margines set from javascript) */
 +
.timelineLight .item {
 +
height:380px;
 +
text-align:center;
 +
background:url('../images/timeline/light/background-white.jpg') repeat;
 +
color:#545454;
 +
-moz-box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
 +
-webkit-box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
 +
box-shadow: -3px 1px 6px rgba(0,0,0,0.4);
 +
width:200px;
 +
}
  
 +
/* ----- content - non-plugin elements ----- */
 +
.timelineLight .item img {
 +
margin-top:0;
 +
width:200px;
 +
}
  
 +
.timelineLight .item span{
 +
display:block;
 +
margin:0px 20px 10px;
 +
height:150px;
 +
}
 +
.timelineLight .item .read_more {
 +
padding:2px 8px 2px 10px;
 +
font-family: 'BebasNeueRegular';
 +
font-size:20px;
 +
float:right;
 +
color:#ffffff;
 +
background: rgba(0,0,0,0.35);
 +
cursor:pointer;
 +
}
 +
.timelineLight .item .read_more:hover {
 +
background:rgb(26,134,172);
 +
}
 +
/* ----------------------------------------- */
  
 +
/* item details (margines set from javascript) */
 +
.timelineLight .item_open {
 +
height:380px;
 +
background:url('../images/timeline/light/background.jpg') repeat;
 +
position:relative;
 +
color:#545454;
 +
z-index:2;
 +
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
 +
-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
 +
box-shadow: 0px 0px 6px rgba(0,0,0,0.4);
 +
width:490px;
 +
 +
}
  
−
<div class="column half_size">
+
/* item details content wrapper (used for animation - shuld have same width as .item_open) */
 +
.timelineLight .item_open_cwrapper {
 +
width:490px;
 +
}
  
−
<h5>What information do I need to start putting my parts on the Registry?</h5>
+
/* ----- content - non-plugin elements ----- */
−
<p>The information needed to initially create a part on the Registry is:</p>
+
.timelineLight .timeline_open_content {
−
<ul>
+
padding:20px;
−
<li>Part Name</li>
+
}
−
<li>Part type</li>
+
−
<li>Creator</li>
+
−
<li>Sequence</li>
+
−
<li>Short Description (60 characters on what the DNA does)</li>
+
−
<li>Long Description (Longer description of what the DNA does)</li>
+
−
<li>Design considerations</li>
+
−
</ul>
+
  
−
<p>
+
.timelineLight .item_open h2 {
−
We encourage you to put up <em>much more</em> information as you gather it over the summer. If you have images, plots, characterization data and other information, please also put it up on the part page. </p>
+
margin-top:10px;
 +
padding-top:0;
 +
font-size:28px;
 +
}
 +
.timelineLight .item_open .t_close {
 +
position:absolute;
 +
top:10px;
 +
right:10px;
 +
padding:2px 8px 2px 10px;
 +
font-family: 'BebasNeueRegular';
 +
font-size:20px;
 +
color:#ffffff;
 +
background: rgba(0,0,0,0.25);
 +
cursor:pointer;
 +
}
 +
.timelineLight .item_open .t_close:hover {
 +
background:rgb(26,134,172);
 +
}
 +
/* ----------------------------------------- */
  
−
</div>
+
/* left/right controles */
 +
.timelineLight .t_controles {
 +
margin:10px auto;
 +
text-align:center;
 +
}
 +
.timelineLight .t_left,
 +
.timelineLight .t_right {
 +
display:inline-block;
 +
height:50px;
 +
width:29px;
 +
margin:10px;
 +
cursor:pointer;
 +
}
 +
.timelineLight .t_left, 
 +
.timelineLight .t_left:hover:active {
 +
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left top;
 +
}
 +
.timelineLight .t_left:hover {
 +
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat left bottom;
 +
}
  
 +
.timelineLight .t_right,
 +
.timelineLight .t_right:hover:active{
 +
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right top;
 +
}
  
−
<div class="column half_size">
+
.timelineLight .t_right:hover {
 +
background: url('https://static.igem.org/mediawiki/2017/b/ba/Big-arrow.png') no-repeat right bottom;
 +
}
  
−
<h5>Inspiration</h5>
+
/* -----------------------------------------------------------------------*/
−
<p>We have a created  a <a href="http://parts.igem.org/Well_Documented_Parts">collection of well documented parts</a> that can help you get started.</p>
+
/* ------------------------------ RESPONSIVE -----------------------------*/
 +
/* -----------------------------------------------------------------------*/
  
−
<p> You can also take a look at how other teams have documented their parts in their wiki:</p>
 
−
<ul>
 
−
<li><a href="https://2014.igem.org/Team:MIT/Parts"> 2014 MIT </a></li>
 
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Parts"> 2014 Heidelberg</a></li>
 
−
<li><a href="https://2014.igem.org/Team:Tokyo_Tech/Parts">2014 Tokyo Tech</a></li>
 
−
</ul>
 
−
</div>
 
  
−
<div class="column full_size">
 
−
<h5>Part Table </h5>
 
  
−
<p>Please include a table of all the parts your team has made during your project on this page. Remember part characterization and measurement data must go on your team part pages on the Registry. </p>
+
/* --- 768px --- */
 +
@media screen and (max-width:980px) {
 +
 +
.timelineLight .timeline_line {
 +
width:680px;
 +
}
 +
 +
.timelineLight .t_line_view {
 +
width:680px;
 +
}
 +
 +
.timelineLight .t_line_m {
 +
width: 338px;
 +
}
 +
.timelineLight .t_line_m.right {
 +
left: 339px;
 +
width: 339px;
 +
}
 +
}
  
−
<div class="highlight">
 
  
 +
/* --- 610px --- */
 +
@media screen and (max-width:767px) {
 +
 +
.timelineLight .timeline_line {
 +
width:530px;
 +
}
 +
 +
.timelineLight .t_line_view {
 +
width:1060px;
 +
}
 +
 +
.timelineLight .t_line_m {
 +
width: 528px;
 +
}
 +
.timelineLight .t_line_m.right {
 +
left: 530px;
 +
width: 528px;
 +
}
 +
.timelineLight .t_line_year {
 +
opacity:0;
 +
filter:alpha(opacity=0)
 +
}
 +
.timelineLight .t_line_month_year {
 +
display:inline;
 +
}
 +
 +
.timelineLight .t_line_node span {
 +
 +
}
 +
.timelineLight .t_node_desc {
 +
font-size:8px;
 +
}
 +
.timelineLight .t_node_desc.pos_right {
 +
right:auto;
 +
left:0;
 +
}
 +
}
  
−
</html>
 
−
<groupparts>iGEM17 BGIC-Union</groupparts>
 
  
−
<html>
+
/* --- 300px --- */
−
</div>
+
@media screen and (max-width:
−
</div>
+
 
 +
) {
 +
.timelineLight .timeline_line {
 +
width:240px;
 +
}
 +
 +
.timelineLight .t_line_view {
 +
width:480px;
 +
}
 +
 +
.timelineLight .t_line_m {
 +
width: 238px;
 +
}
 +
.timelineLight .t_line_m.right {
 +
left: 240px;
 +
width: 238px;
 +
}
 +
 +
.timelineLight .item_open {
 +
width:280px;
 +
height:390px;
 +
}
 +
.timelineLight .item_open_cwrapper {
 +
width:280px;
 +
}
 +
}
 +
 
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
  <!-- main -->
 +
  <style type="text/css">
 +
 
 +
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
 +
#top_title,#sideMenu { display: none !important; }
 +
        #content {
 +
            width: 100%;
 +
            margin: 0;
 +
            padding: 0;
 +
           
 +
        }
 +
 
 +
 
 +
 
 +
 
 +
#content{
 +
  background-color: #FFe4e1; !important;
 +
}
 +
 
 +
 
 +
 +
html, body {
 +
    margin: 0 !important;
 +
    padding: 0 !important;
 +
}
 +
body {
 +
  background-color: #FFe4e1;
 +
  font-family: 'Montserrat', sans-serif;
 +
    font-weight: 400;
 +
    font-size: 14px;
 +
    color: #555;
 +
    ；
 +
    -webkit-font-smoothing: antialiased;
 +
    -webkit-overflow-scrolling: touch;
 +
}
 +
 
 +
/* Titles */
 +
h1, h2, h3, h4, h5, h6 {
 +
font-family: 'Montserrat', sans-serif;
 +
    font-weight: 700;
 +
    color: #333;
 +
}
 +
 
 +
h1 {
 +
font-size: 35px;
 +
margin-top: 30px;
 +
margin-bottom: 30px;
 +
}
 +
 
 +
 
 +
 
 +
/* Paragraph &amp; Typographic */
 +
p {
 +
    line-height: 28px;
 +
    margin-bottom: 25px;
 +
    font-size: 16px;
 +
}
 +
 
 +
.centered {
 +
    text-align: center;
 +
}
 +
 
 +
/* Links */
 +
a {
 +
    color: #20B2AA;
 +
    word-wrap: break-word;
 +
 
 +
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
 +
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
 +
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
 +
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
 +
    transition: color 0.1s ease-in, background 0.1s ease-in;
 +
}
 +
 
 +
a:hover,
 +
a:focus {
 +
    color: #7b7b7b;
 +
    text-decoration: none;
 +
    outline: 0;
 +
}
 +
 
 +
a:before,
 +
a:after {
 +
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
 +
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
 +
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
 +
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
 +
    transition: color 0.1s ease-in, background 0.1s ease-in;
 +
}
 +
 
 +
hr {
 +
    display: block;
 +
    height: 1px;
 +
    border: 0;
 +
    border-top: 1px solid #ccc;
 +
    margin: 1em 0;
 +
    padding: 0;
 +
}
 +
 
 +
.copyrights{
 +
text-indent:-9999px;
 +
height:0;
 +
line-height:0;
 +
font-size:0;
 +
overflow:hidden;
 +
}
 +
 
 +
.navbar {
 +
text-transform: uppercase;
 +
margin-bottom: 0px;
 +
}
 +
 
 +
.navbar-inverse {
 +
padding-bottom: 70px;
 +
padding-top: 70px;
 +
}
 +
 
 +
.navbar-inverse {
 +
background-color: #FFA07A;
 +
border-color: #FA8072;
 +
}
 +
 
 +
.navbar-inverse .navbar-nav > li > a {
 +
color: white;
 +
}
 +
 
 +
.navbar-inverse .navbar-nav > li > a:hover {
 +
color: #222222;
 +
}
 +
 
 +
.navbar-brand {
 +
font-weight: 700;
 +
font-size: 20px;
 +
letter-spacing: 2px;
 +
}
 +
 
 +
.navbar-inverse .navbar-brand {
 +
color: white;
 +
}
 +
 
 +
.navbar-inverse .navbar-toggle {
 +
border-color: transparent;
 +
}
 +
 
 +
.progress-bar-theme {
 +
  background-color: #FFA07A;
 +
}
 +
 
 +
 
 +
/* Helpers */
 +
 
 +
.mt {
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
}
 +
 
 +
.pt {
 +
padding-top: 50px;
 +
padding-bottom: 50px;
 +
}
 +
 
 +
 
 +
/* +++++ WRAP SECTIONS +++++ */
 +
 
 +
#ww {
 +
padding-top: 0px;
 +
padding-bottom: 70px;
 +
background-color: #f2f2f2;
 +
}
 +
 
 +
 
 +
#footer {
 +
background-color: #ADD8E6;
 +
padding-top: 50px;
 +
padding-bottom: 50px;
 +
}
 +
 
 +
#footer p {
 +
color: white;
 +
}
 +
 
 +
#footer h4 {
 +
color: white;
 +
text-transform: uppercase;
 +
padding-bottom: 20px;
 +
}
 +
 
 +
 
 +
/* +++++ Color Wraps / Blog Page +++++ */
 +
 
 +
#grey {
 +
padding-top: 60px;
 +
padding-bottom: 60px;
 +
background-color: #f2f2f2;
 +
}
 +
 
 +
#white {
 +
padding-top: 60px;
 +
padding-bottom: 60px;
 +
background-color: #ffffff;
 +
}
 +
 
 +
 
 +
 
 +
/* Blog Date*/
 +
bd {
 +
font-size: 12px;
 +
text-transform: uppercase;
 +
color: #d2d2d2;
 +
font-weight: 700;
 +
}
 +
 
 +
/* Blog Author*/
 +
ba {
 +
font-size: 12px;
 +
text-transform: uppercase;
 +
}
 +
 
 +
/* Blog Quote */
 +
.bq {
 +
font-size: 22px;
 +
padding-top: 30px;
 +
}
 +
 
 +
/* Blog Tags */
 +
bt {
 +
font-size: 12px;
 +
}
 +
 
 +
/* ================== PORTFOLIO IMAGES HOVER EFFECT ================== */
 +
/* Effects also are controled by hover.zoom.js */
 +
.zoom {
 +
    display:block;
 +
    position:relative;
 +
    overflow:hidden;
 +
    background:transparent url(https://static.igem.org/mediawiki/2017/f/fe/Bgic_loader.gif) no-repeat center;
 +
}
 +
 
 +
 
 +
    .zoomOverlay {
 +
        position:absolute;
 +
        top:0; left:0;
 +
        bottom:0; right:0;
 +
        display:none;
 +
        background-image:url(../img/zoom.png);
 +
        background-repeat:no-repeat;
 +
        background-position:center;
 +
    }
 +
 
 +
.zoom2 {
 +
opacity: 1;
 +
}
 +
 
 +
.zoom2:hover {
 +
opacity: 0.5;
 +
}
 +
 
 +
/* glyphicon Configuration */
 +
 
 +
.glyphicon {
 +
font-size: 40px;
 +
color: #1abc9c;
 +
}
 +
  </style>
 +
  <!-- slider -->
 +
  <style type="text/css">
 +
 
 +
  /* Section Slider
 +
========================================================= */
 +
 
 +
/* Carousel Slider
 +
============================================== */
 +
#slider_part {
 +
    height: 900px;
 +
    width: 100%;
 +
    overflow: hidden;
 +
background-color: #f2f2f2;
 +
}
 +
 
 +
.carousel-caption {
 +
    top: 30%;
 +
    margin-top: -70px;
 +
    text-shadow: none!important;
 +
    left: 9%;
 +
    right: 10%;
 +
    -webkit-transition: all.3s ease 0s;
 +
    -o-transition: all.3s ease 0s;
 +
    transition: all.3s ease 0s;
 +
    text-align: center;
 +
}
 +
 
 +
.carousel-caption h3 {
 +
    text-shadow: none;
 +
    font-size: 70px;
 +
    line-height: 92px;
 +
    font-weight: 300;
 +
    margin: 20px 0px;
 +
    transition-delay: .3s;
 +
    -webkit-transition-delay: .3s;
 +
    -o-transition-delay: .3s;
 +
    text-transform: capitalize!important;
 +
}
 +
 
 +
.carousel-caption p {
 +
    font-size: 46px;
 +
    line-height: 62px;
 +
    font-weight: 500;
 +
    color: #fff;
 +
    transition-delay: .3s;
 +
    -moz-transition-delay: .3s;
 +
    -o-transition-delay: .3s;
 +
    margin: 40px 0px;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
.carousel-caption img {
 +
    border: 2px solid#fff;
 +
    padding: 10px 10px 10px 20px;
 +
}
 +
 
 +
.line {
 +
    width: 100px;
 +
    height: 5px;
 +
    color: #222;
 +
    margin: 0px auto;
 +
}
 +
 
 +
.carousel-caption p i {
 +
    font-size: 7px;
 +
    margin: 0px 3px;
 +
    position: relative;
 +
    top: -3px;
 +
}
 +
 
 +
.carousel .item {
 +
    -webkit-transition: opacity .3s;
 +
    -moz-transition: opacity .3s;
 +
    -ms-transition: opacity .3s;
 +
    -o-transition: opacity .3s;
 +
    transition: opacity .3s;
 +
}
 +
 
 +
.btn-featured {
 +
    text-decoration: none;
 +
    position: relative;
 +
    -webkit-transition: all .3s ease-in-out;
 +
    -o-transition: all .3s ease-in-out;
 +
    transition: all .3s ease-in-out;
 +
    background: transparent;
 +
    border-radius: 2px;
 +
    z-index: 1;
 +
    font-weight: 500;
 +
    font-size: 18px;
 +
    line-height: 20px;
 +
    padding: 15px 40px !important;
 +
    text-transform: uppercase;
 +
    margin-top: 20px;
 +
    margin-right: 10px;
 +
}
 +
 
 +
.carousel-control.left,.carousel-control.right {
 +
    background-image: none !important;
 +
    background-repeat: no-repeat !important;
 +
}
 +
 
 +
.carousel-control {
 +
    width: 4% !important;
 +
}
 +
 
 +
.carousel-caption img {
 +
    height: auto;
 +
}
 +
 
 +
.carousel-indicators {
 +
    bottom: 100px;
 +
    width: 10%;
 +
    left: 45%;
 +
    margin: 0 auto;
 +
    bottom: 30%;
 +
}
 +
 
 +
.carousel-indicators li {
 +
    width: 20px !important;
 +
    height: 20px !important;
 +
    border: 2px solid #FFF !important;
 +
    margin: 0px !important;
 +
    border-radius: 50%;
 +
}
 +
 
 +
.carousel-control.left span {
 +
    padding: 15px;
 +
}
 +
 
 +
.slides-control .carousel-control i {
 +
    line-height: 36px;
 +
    font-size: 32px;
 +
    padding-top: 6px;
 +
    -moz-transition: all 500ms ease;
 +
    -webkit-transition: all 500ms ease;
 +
    -ms-transition: all 500ms ease;
 +
    -o-transition: all 500ms ease;
 +
    transition: all 500ms ease;
 +
    border-radius: 50%;
 +
    width: 50px;
 +
    height: 50px;
 +
}
 +
 
 +
.slides-control .carousel-control {
 +
    position: absolute;
 +
    width: 240px;
 +
    top: 45%;
 +
    z-index: 10;
 +
}
 +
 
 +
.carousel-control.left {
 +
    left: -15px;
 +
}
 +
 
 +
.carousel-control.right {
 +
    right: 0px;
 +
}
 +
 
 +
.carousel-control.left {
 +
    width: 120px;
 +
    height: 40px;
 +
}
 +
 
 +
.carousel-control.right {
 +
    width: 120px;
 +
    height: 40px;
 +
}
 +
 
 +
.overlay-slide {
 +
    background: #000;
 +
    height: 65%;
 +
    width: 100%;
 +
}
 +
 
 +
.overlay-slide img {
 +
    opacity: 1;
 +
    width: 100%;
 +
    height: auto;
 +
}
 +
 
 +
/*-- Animation --*/
 +
 
 +
.carousel .item.active .animated2 {
 +
    -webkit-animation: lightSpeedIn 1s ease-in 200ms both;
 +
    animation: lightSpeedIn 1s ease-in 200ms both;
 +
}
 +
 
 +
.carousel .item.active .animated3 .animated4 {
 +
    -webkit-animation: bounceInLeft 1s ease-in-out 500ms both;
 +
    animation: bounceInLeft 1s ease-in-out 500ms both;
 +
}
 +
.animated4 {color:#4169E1
 +
}
 +
.img{
 +
-webkit-filter: brightness(1);
 +
}
 +
 
 +
  </style>
 +
  <!-- script -->
 +
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 +
  <script type="text/javascript">
 +
  /*
 +
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 +
*
 +
* Uses the built in easing capabilities added In jQuery 1.1
 +
* to offer multiple easing options
 +
*
 +
* TERMS OF USE - jQuery Easing
 +
*
 +
* Open source under the BSD License.
 +
*
 +
* Copyright © 2008 George McGinley Smith
 +
* All rights reserved.
 +
*
 +
* Redistribution and use in source and binary forms, with or without modification,
 +
* are permitted provided that the following conditions are met:
 +
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 +
*/
 +
 
 +
// t: current time, b: begInnIng value, c: change In value, d: duration
 +
jQuery.easing['jswing'] = jQuery.easing['swing'];
 +
 
 +
jQuery.extend( jQuery.easing,
 +
{
 +
def: 'easeOutQuad',
 +
swing: function (x, t, b, c, d) {
 +
//alert(jQuery.easing.default);
 +
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 +
},
 +
easeInQuad: function (x, t, b, c, d) {
 +
return c*(t/=d)*t + b;
 +
},
 +
easeOutQuad: function (x, t, b, c, d) {
 +
return -c *(t/=d)*(t-2) + b;
 +
},
 +
easeInOutQuad: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t + b;
 +
return -c/2 * ((--t)*(t-2) - 1) + b;
 +
},
 +
easeInCubic: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t + b;
 +
},
 +
easeOutCubic: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t + 1) + b;
 +
},
 +
easeInOutCubic: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 +
return c/2*((t-=2)*t*t + 2) + b;
 +
},
 +
easeInQuart: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t + b;
 +
},
 +
easeOutQuart: function (x, t, b, c, d) {
 +
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 +
},
 +
easeInOutQuart: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 +
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 +
},
 +
easeInQuint: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t*t + b;
 +
},
 +
easeOutQuint: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 +
},
 +
easeInOutQuint: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 +
return c/2*((t-=2)*t*t*t*t + 2) + b;
 +
},
 +
easeInSine: function (x, t, b, c, d) {
 +
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 +
},
 +
easeOutSine: function (x, t, b, c, d) {
 +
return c * Math.sin(t/d * (Math.PI/2)) + b;
 +
},
 +
easeInOutSine: function (x, t, b, c, d) {
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 +
},
 +
easeInExpo: function (x, t, b, c, d) {
 +
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 +
},
 +
easeOutExpo: function (x, t, b, c, d) {
 +
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 +
},
 +
easeInOutExpo: function (x, t, b, c, d) {
 +
if (t==0) return b;
 +
if (t==d) return b+c;
 +
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 +
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 +
},
 +
easeInCirc: function (x, t, b, c, d) {
 +
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 +
},
 +
easeOutCirc: function (x, t, b, c, d) {
 +
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 +
},
 +
easeInOutCirc: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 +
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 +
},
 +
easeInElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
},
 +
easeOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 +
},
 +
easeInOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 +
},
 +
easeInBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*(t/=d)*t*((s+1)*t - s) + b;
 +
},
 +
easeOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 +
},
 +
easeInOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 +
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 +
},
 +
easeInBounce: function (x, t, b, c, d) {
 +
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 +
},
 +
easeOutBounce: function (x, t, b, c, d) {
 +
if ((t/=d) < (1/2.75)) {
 +
return c*(7.5625*t*t) + b;
 +
} else if (t < (2/2.75)) {
 +
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 +
} else if (t < (2.5/2.75)) {
 +
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 +
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 +
}
 +
},
 +
easeInOutBounce: function (x, t, b, c, d) {
 +
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 +
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 +
}
 +
});
 +
 
 +
/*
 +
*
 +
* TERMS OF USE - EASING EQUATIONS
 +
*
 +
* Open source under the BSD License.
 +
*
 +
* Copyright © 2001 Robert Penner
 +
* All rights reserved.
 +
*
 +
* Redistribution and use in source and binary forms, with or without modification,
 +
* are permitted provided that the following conditions are met:
 +
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 +
*/
 +
</script>
 +
 
 +
  <script src="https://2017.igem.org/Template:BGIC-Union/newbootstrap-js?action=raw&amp;ctype=text/javascript"></script>
 +
  <!-- SLIDER_TIMELINE -->
 +
<script type="text/javascript" src="https://2017.igem.org/Template:BGIC-Union/timeline-js?action=raw&amp;ctype=text/javascript"></script>
 +
<script type="text/javascript">
  
 +
$(window).load(function() {
 +
// dark
 +
$('.timelineLight').timeline({
 +
openTriggerClass : '.read_more',
 +
startItem : '15/08/2012'
 +
});
 +
});
 +
</script>
 +
<!-- hover    --> 
 +
  <script src="https://2017.igem.org/Template:BGIC-Union/hovernew-js?action=raw&amp;ctype=text/javascript"></script>
 +
  <script src="https://2017.igem.org/Template:BGIC-Union/hoverzoomjs?action=raw&amp;ctype=text/javascript"></script>
 +
  </head>
  
 +
<body>
 +
<div class="column_full_size top1">
 +
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
 +
    <div class="container-fluid">
 +
    <div class="navbar-header">
 +
        <a class="navbar-brand" href="https://2017.igem.org/Team:BGIC-Union">BGIC-Union</a>
 +
        </div>
 +
    <div>
 +
        <ul class="nav navbar-nav navbar-center">
 +
            <li class="active" >  <a href="https://2017.igem.org/Team:BGIC-Union"><b>HOME</b></a></li>
 +
         
 +
           
 +
          <li> <a href="https://2017.igem.org/Team:BGIC-Union/Team">Team</a></li>
 +
  <li class="dropdown">
 +
                            <a href="https://2017.igem.org/Team:BGIC-Union/Team" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 +
                <ul class="dropdown-menu">
 +
                    <li><a href="https://2017.igem.org/Team:BGIC-Union/Team">members</a></li>
 +
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Collaborations">collaborations</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Sponsors">sponsors</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Attributions">attributions</a></li>
 +
                            </ul>
 +
            </li>
 +
 +
                          <li> <a href="https://2017.igem.org/Team:BGIC-Union/Project">Project</a></li>
 +
 +
<li class="dropdown ">
 +
                            <a href="https://2017.igem.org/Team:BGIC-Union/Project" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 +
</a>
 +
                            <ul class="dropdown-menu" >
 +
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Description">description</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Design”></a>design</li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Results">results</a></li>
 +
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Model">model</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Demonstrate">demonstrate</a></li>
 +
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Improve">improve</a></li>
 +
                            </ul>
 +
                        </li>
 +
                       
 +
                        <li>  <a href="https://2017.igem.org/Team:BGIC-Union/Lab">Lab</a></li>
 +
                        <li class="dropdown ">    <a href="https://2017.igem.org/Team:BGIC-Union/Lab" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 +
                            <ul class="dropdown-menu" role="menu">
 +
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Experiments">experiments</a></li>
 +
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Notebook">notebook</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/InterLab">InterLab</a></li></ul>
 +
                        </li>
 +
                     
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Parts">Parts</a></li>
 +
                            <li class="dropdown "> <a href="https://2017.igem.org/Team:BGIC-Union/Parts" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 +
 +
                            <ul class="dropdown-menu" role="menu">
 +
                              <li><a href="https://2017.igem.org/Team:BGIC-Union/Basic_Parts">basic parts</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Composite_Parts">composite parts</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Parts_Collection">parts collection</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Measurement">measurement</a></li>
  
 +
                            </ul>
 +
                        </li>
 +
 +
                      <li>    <a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design">Practices-Design</a></li>
 +
                          <li class="dropdown ">  <a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design" class="dropdown-toggle" data-toggle="dropdown"> <b class="caret"></b></a>
 +
                            <ul class="dropdown-menu" role="menu">
 +
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/Practices-Design">timeline</a></li>
 +
                                <li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Silver">silver</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/HP/Gold_Integrated">gold</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Gold_Integrated">integrated</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Engagement">public engagement</a></li>
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Applied_Design">applied design</a></li>
  
 +
<li><a href="https://2017.igem.org/Team:BGIC-Union/Entrepreneurship">entrepreneurship</a></li>
 +
                            </ul>
 +
                        </li>
 +
<li class="dropdown ">
 +
                            <a href="https://2017.igem.org/Team:BGIC-Union/Safety">Safety </a>
 +
                        </li>
 +
<li class="dropdown ">
 +
                            <a href="https://2017.igem.org/Team:BGIC-Union/Evaluation" >EVALUATION </a>
 +
                        </li>
 +
        </ul>
 +
    </div>
 +
    </div>
 +
</nav>  
 +
        <!-- PAGE CONTENT -->
 +
        <div class="page-content">
 +
            <div class="container">
 +
                <section>
 +
                    <div class="row">
 +
                        <div class="col-md-6">
 +
<groupparts>BGIC-Union</GROUPARTS>
 +
                            </div>
 +
                    </div>
 +
                </section>
 +
                <!-- END OUR CLIENTS -->
 +
            </div>
 +
        </div>
 +
        <!-- END PAGE CONTENT -->
 +
<!-- +++++ Footer Section +++++ -->
 +
 +
<div id="footer">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-lg-4">
 +
    <p>F12 BGI-College，146 Beishan Road，Yantian District 518083
 +
                                    </br> Shenzhen，Guangdong Province, China，Asia
 +
                                </br>Phone:+86-755-36307888
 +
                                </br>Email: info@genomics.cn
 +
</br>Fax:+86-755-36307273</p>
 +
</p>
 +
</div><!-- /col-lg-4 -->
 +
 +
<div class="col-lg-4">
 +
<h4>Links</h4>
 +
<p>
 +
<a href="#">SAFETY</a><br/>
 +
<a href="#">PARTS</a><br/>
 +
<a href="#">EVALUATION</a>
 +
</p>
 +
</div><!-- /col-lg-4 -->
 +
 +
<div class="col-lg-4">
 +
<h4>BGIC-COLLEGE 2017</h4>
 +
<img src="https://static.igem.org/mediawiki/2017/d/de/Repute-logo-light.png" width="60px" height="72px"></img>
 +
<p></br><i class="fa-twitter">TWITTER:@BGIC-Union</i> </p>
 +
 +
</div><!-- /col-lg-4 -->
 +
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
 +
  </body>
 
</html>
 
</html>

Revision as of 00:48, 21 October 2017

Team：BGIC-Union/PROJECT

BGIC-Union