Difference between revisions of "Team:Tianjin/Notebook/"

Line 5: Line 5:
 
<link href="https://2017.igem.org/Team:Tianjin/Resources/CSS:maincss?action=raw&ctype=text/css
 
<link href="https://2017.igem.org/Team:Tianjin/Resources/CSS:maincss?action=raw&ctype=text/css
 
" rel="stylesheet">
 
" rel="stylesheet">
−
<script type="text/javascript" src="https://2017.igem.org/Team:Tianjin/Resources/JS:test?action=raw&ctype=text/javascript"></script>
 
  
−
</head>
+
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:Tianjin/Resources/CSS:fonts?action=raw&ctype=text/css">
−
<style>
+
−
#hello p {
+
−
    font-size: 1.125em;
+
−
    margin-bottom: 1.500em;
+
−
    line-height: 1.6;
+
−
    font-weight: 400;
+
−
text-align:justify;
+
−
+
−
}
+
−
#hello h1{
+
−
    font-size: 2.625em;
+
−
    font-weight: 700;
+
−
    line-height: 1;
+
−
    margin-top: 20px;
+
−
    text-align: center;
+
−
    color: #004a7c;
+
−
}
+
  
−
#hello h2{
+
<link href="https://2017.igem.org/Team:Tianjin/Resources/CSS:tab?action=raw&ctype=text/css
−
    clear: both;
+
" rel="stylesheet">
−
    margin-bottom: 1.500em;
+
 
−
    line-height: 1.5;
+
<script type="text/javascript" src="https://2017.igem.org/Team:Tianjin/Resources/JS:tabbootstrap?action=raw&ctype=text/javascript"></script>
−
    text-align:left;
+
 
−
    color: #004a7c;
+
 
 +
 
 +
<script type="text/javascript" src="https://2017.igem.org/Team:Tianjin/Resources/JS:test?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript">
 +
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 +
window.location.href="https://2017.igem.org/Team:Tianjin/Notebook/";  
 
}
 
}
 +
</script>
  
−
#hello img{
+
 
 +
 
 +
 
 +
 
 +
/* OVERRIDE IGEM SETTINGS */
 +
<style>
 +
#sideMenu, #top_title, #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {display: none}
 +
#content {width: 100%;  background: transparent; margin: 0; padding: 0; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5  { margin-bottom: 2px; }
 +
        #top_menu_under
 +
                height: 0px;
 +
                border-bottom: 0 none;
 +
                display: none;
 +
      }
 +
 
 +
        #top_menu_14 {
 +
                height: 24px;
 +
                border-bottom: 0 none;
 +
      }
 +
 
 +
#globalWrapper, #content  {
 +
width: 100%;
 +
                margin:  0;
 +
float:none
 +
font-size: 100%;
 +
                z-index: 0;
 +
}
 +
 
 +
div[id=mw-content-text] > p {
 +
display: none;
 +
}
 +
 
 +
#sideMenu {
 +
width: 200px;
 +
}
 +
 
 +
#sideMenu .mainMenu_Title, #sideMenu .mainMenu_toggle, #sideMenu #MainPage_menu ul li li {
 +
border: none;
 +
}
 +
 
 +
#sideMenu .sideMenuTitle {
 +
height: 35px;
 +
}
 +
 
 +
#top_menu_inside .submenu {
 +
width: auto;
 +
}
 +
</style>
 +
 
 +
<style>
 +
 
 +
body {
 +
    background-color:#e8f1f5;
 +
font-size: 16px;
 +
    z-index:9999;
 +
}
 +
#description img{
 
text-align:center;
 
text-align:center;
 
margin:3rem auto 3rem auto;
 
margin:3rem auto 3rem auto;
 
padding-top:1.2rem;
 
padding-top:1.2rem;
−
padding-bottom:1.2rem
+
padding-bottom:1.2rem;
 +
max-width:90%;
 
}
 
}
−
#hello h3{
+
#description h1{
 +
clear: both;
 +
        margin-top: 1.1em;
 +
        margin-bottom: 1.1em;
 +
        line-height: 1.3;
 
text-align:center;
 
text-align:center;
−
font-size:1.2rem;
+
font-size: 3.5 em;
 +
        font-weight: 400;
 +
font-family: 'righteous',Verdana,sans-serif;
 +
text-align:center;
 +
}
 +
#description h3{
 +
text-align:center;
 +
font-size:1.2 em;
 
font-weight:bold;
 
font-weight:bold;
 
color:#0D0F3D;
 
color:#0D0F3D;
−
         margin-bottom:1.2rem;
+
         margin-bottom:2em;
 +
      font-famliy:'righteous',san-serif;
 
}
 
}
 +
#description a{
 +
font-family:oblique;
 +
}
 +
#description .zoom {
 +
display:inline-block;
 +
}
 +
#description .zoom:after {
 +
content:'';display:block;position:absolute;top:0;right:0;
 +
}
 +
#description .zoom img{
 +
display:block;
 +
}
 +
#description .zoom img::selection{
 +
background-color:transparent;
 +
}
  
 +
#p1 {
 +
font-size: 1.5em;
 +
line-height: 1em;
 +
font-weight: 400;
 +
font-family: 'relaway',Verdana,sans-serif;
 +
margin: 2em auto;
 +
        padding-top:2em;
 +
}
 +
 +
 +
.content p {
 +
padding: 10px 15px 4px 10px;
 +
margin-left: 15px;
 +
border-left: 10px solid
 +
}
 +
.nav p {
 +
font-size: 1.325em;
 +
        font-family: 'Montserrat', sans-serif;
 +
margin-bottom: 1.5em;
 +
line-height: 1.5em;
 +
font-weight: 400;
 +
text-align: justify
 +
}
 +
 +
#description p {
 +
    font-size: 1.225em;
 +
    margin-bottom: 1.500em;
 +
    line-height: 1em;
 +
    font-weight: 400;
 +
    text-align:justify;
 +
    font-family: 'Montserrat', sans-serif;
 +
 +
}
 +
.nav hr {
 +
    background-color: #324b5a;
 +
    border: 0 none;
 +
    height: 12px;
 +
    margin: 1.3em auto;
 +
    width: 63px;
 +
    margin-bottom:1.1em
 +
}
 
</style>
 
</style>
 +
 +
<style type="text/css">
 +
 +
a:hover,a:focus{
 +
outline: none;
 +
text-decoration: none;
 +
}
 +
.tab .nav-tabs{
 +
position: relative;
 +
border-bottom: 0 none;
 +
}
 +
.tab .nav-tabs li{
 +
text-align: center;
 +
}
 +
.tab .nav-tabs li a{
 +
display: block;
 +
height: 70px;
 +
line-height: 65px;
 +
background: #51698b ;
 +
font-size: 2rem;
 +
font-weight: 600;
 +
color: #fff;
 +
text-transform: uppercase;
 +
margin-right: 0;
 +
border-radius: 0;
 +
border: none;
 +
position: relative;
 +
transition: all 0.5s ease 0s;
 +
}
 +
.tab .nav-tabs li.active a,
 +
.tab .nav-tabs li a:hover{
 +
background:#afcada;
 +
border: none;
 +
color: #51698b;
 +
}
 +
 +
.tab .nav-tabs li:last-child a:before{
 +
border: none;
 +
}
 +
.tab .tab-content{
 +
font-size: 14px;
 +
color: #51698b;
 +
line-height: 26px;
 +
background: #afcada;
 +
padding: 20px;
 +
}
 +
.tab .tab-content h3{
 +
font-size: 24px;
 +
color: #51698b;
 +
margin-top: 0;
 +
}
 +
.tab .tab-content p{
 +
margin-bottom: 0;
 +
}
 +
@media only screen and (max-width: 480px){
 +
.tab .nav-tabs li{
 +
width: 100%;
 +
margin-bottom: 8px;
 +
}
 +
.tab .nav-tabs li:last-child{
 +
margin-bottom: 0;
 +
}
 +
.tab .nav-tabs li a:before{
 +
border: none;
 +
}
 +
}
 +
</style>
 +
 +
 +
 +
</head>
  
  
Line 56: Line 240:
  
 
<div  class="page">
 
<div  class="page">
−
 
  
  
Line 66: Line 249:
 
<main id="main" class="about-main" role="main">
 
<main id="main" class="about-main" role="main">
  
−
             <article id="hello">       
+
             <article id="description">       
 
                 <h1>Notebook</h1>
 
                 <h1>Notebook</h1>
 
                     <hr />
 
                     <hr />
−
                   
+
<div id="p1">
 +
<p><i class="fa fa-random fa-x"></i> Notebook 1:mating type switching</p>
 +
<p><i class="fa fa-refresh fa-x"></i> Notebook 2:SCRaMbLE</i></p>
 +
<p><i class="fa fa-bar-chart fa-x"></i> Notebook 3:Verification of Mating swicher </i></p>
 +
<p><i class="fa fa-cogs fa-x"></i> Notebook 4:Heavy Metal</p>
 +
</div>
  
−
<h2>Background</h2>
+
<div class="container">
−
<p>Human existence on earth is almost impossible without the heavy metals. Even though important to mankind, exposure to them during production, usage and their uncontrolled discharge in to the environment has caused lots of hazards to man, other organisms and the environment itself. Heavy metals can enter human tissues and organs via inhalation, diet, and manual handling. As the process of urbanization and industrialization goes deeper and deeper, heavy metal pollution, a noticeable threaten to almost all the creatures, has become an essential problem to solve.</p>
+
<div class="row">
−
<p>According to our human practice, the situation of heavy metal pollution (copper and cadmium ions) is marked on a world map, and the severity of heavy metal pollution has been increasing all over this map. Places with serious pollution includes middle Asia, eastern Asia, southern Europe, and Latin America. In addition, not only fresh water sources, but also soil and crops are seriously contaminated by heavy metals. On average, during three out of ten suppers we have, we absorb excess heavy metals over the standard concentration.</p>
+
<div class="col-md-offset-3 col-md-6">
−
<p>Considering the rigorous situation we face, our team decided to design an advanced system for typical toxic heavy metal disposal based on Saccharomyces cerevisiae.</p>
+
<div class="tab" role="tabpanel">
−
<div style=" margin:0 auto 0 auto;">
+
<!-- Nav tabs -->
−
<p>click the download bottom to download our notebook</p>
+
<ul class="nav nav-tabs" role="tablist">
−
<input type="button" name="click here" value="" onClick="location='https://static.igem.org/mediawiki/2017/c/cc/1-s2.0-S0968089617302584-main.pdf'" style=" background-color:#e8f1f5; border:hidden; background-image:url(https://static.igem.org/mediawiki/2017/f/f1/Download.png); width:218px; height:46px; background-clip:!important;>
+
<li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-random fa-2x"></i></a></li>
 +
<li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-refresh fa-2x"></i></a></li>
 +
<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-bar-chart fa-2x"></i></a></li>
 +
                                                <li role="presentation"><a href="#Section4" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-cogs fa-2x"></i></a></li>
 +
</ul>
 +
<!-- Tab panes -->
 +
<div class="tab-content tabs">
 +
<div role="tabpanel" class="tab-pane fade in active" id="Section1">
 +
<h3>mating type switching</h3>
 +
<div style="height:60em; margin:0 auto 0 auto;">
 +
<object data="https://static.igem.org/mediawiki/2017/d/dd/Tianjin-nb-matingswitching.pdf" type="application/pdf" width="100%" height="80%">
 +
</object>
 +
<input type="button" name="kkk" value="Click here to check up the installation of Adobe Acrobat" onClick="if(isAcrobatPluginInstall()) alert('Adobe Acrobat has already been installed');else alert('Please install Adobe Acrobat');"/>
 +
<input type="button" name="click here" value="click here to download our notebook" onClick="location='https://static.igem.org/mediawiki/2017/d/dd/Tianjin-nb-matingswitching.pdf'" style="float:right;">
 
</div>
 
</div>
 +
</div>
 +
<div role="tabpanel" class="tab-pane fade" id="Section2">
 +
<h3>SCRaMbLE</h3>
 +
<div style="height:60em; margin:0 auto 0 auto;">
 +
<object data="https://static.igem.org/mediawiki/2017/0/03/Tianjin-nb-scramble.pdf" type="application/pdf" width="100%" height="80%">
 +
</object>
 +
<input type="button" name="kkk" value="Click here to check up the installation of Adobe Acrobat" onClick="if(isAcrobatPluginInstall()) alert('Adobe Acrobat has already been installed');else alert('Please install Adobe Acrobat');"/>
 +
<input type="button" name="click here" value="click here to download our notebook" onClick="location='https://static.igem.org/mediawiki/2017/0/03/Tianjin-nb-scramble.pdf'" style="float:right;">
 +
</div>
 +
</div>
 +
<div role="tabpanel" class="tab-pane fade" id="Section3">
 +
<h3>Verification of Mating swicher</h3>
 +
<div style="height:60em; margin:0 auto 0 auto;">
 +
<object data="https://static.igem.org/mediawiki/2017/c/cc/Tianjin-nb-Verification.pdf" type="application/pdf" width="100%" height="80%">
 +
</object>
 +
<input type="button" name="kkk" value="Click here to check up the installation of Adobe Acrobat" onClick="if(isAcrobatPluginInstall()) alert('Adobe Acrobat has already been installed');else alert('Please install Adobe Acrobat');"/>
 +
<input type="button" name="click here" value="click here to download our notebook" onClick="location='https://static.igem.org/mediawiki/2017/c/cc/Tianjin-nb-Verification.pdf'" style="float:right;">
 +
</div>
 +
</div>
 +
                                              <div role="tabpanel" class="tab-pane fade" id="Section4">
 +
<h3>Heavy Metal</h3>
 +
<div style="height:60em; margin:0 auto 0 auto;">
 +
<object data="https://static.igem.org/mediawiki/2017/3/3c/Tianjin-nb-heavymetal.pdf" type="application/pdf" width="100%" height="80%">
 +
</object>
 +
<input type="button" name="kkk" value="Click here to check up the installation of Adobe Acrobat" onClick="if(isAcrobatPluginInstall()) alert('Adobe Acrobat has already been installed');else alert('Please install Adobe Acrobat');"/>
 +
<input type="button" name="click here" value="click here to download our notebook" onClick="location='https://static.igem.org/mediawiki/2017/3/3c/Tianjin-nb-heavymetal.pdf'" style="float:right;">
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
  
 
<div class='content-column one_half'>
 
<div class='content-column one_half'>
  
−
<div style="padding-top:1em;padding-right:1em;">
+
<div style="padding-top:10em;padding-right:1em;">
 
</article>
 
</article>
  
 
</div>
 
</div>
−
 
−
 
  
 +
 
   
 
   
 
   
 
   
 
</main><!-- #main -->
 
</main><!-- #main -->
 
</div><!-- #primary -->
 
</div><!-- #primary -->
 +
  
  

Revision as of 11:26, 31 October 2017

/* OVERRIDE IGEM SETTINGS */

Notebook

Notebook 1:mating type switching

Notebook 2:SCRaMbLE

Notebook 3:Verification of Mating swicher

Notebook 4:Heavy Metal

mating type switching

SCRaMbLE

Verification of Mating swicher

Heavy Metal