Difference between revisions of "Team:SDU-CHINA/Public Engagement"

Line 2: Line 2:
 
<head>
 
<head>
 
<meta charset="utf-8" />
 
<meta charset="utf-8" />
−
    <link rel="stylesheet" href="https://2018.igem.org/Team:SDU-CHINA/bootstrap337?action=raw&ctype=text/css">
+
<link rel="stylesheet" href="https://2018.igem.org/Team:SDU-CHINA/bootstrap337?action=raw&ctype=text/css">
 +
 
 +
<link href="https://2018.igem.org/wiki/index.php?title=Template:SDU-China/slickcss190&action=raw&ctype=text/css" rel="stylesheet">
 +
<link href="https://2018.igem.org/wiki/index.php?title=Template:SDU-China/slickthemecss190&action=raw&ctype=text/css" rel="stylesheet">
 
   <script src="https://2018.igem.org/Team:SDU-China/jquery211?action=raw&ctype=text/javascript"></script>
 
   <script src="https://2018.igem.org/Team:SDU-China/jquery211?action=raw&ctype=text/javascript"></script>
 
   <script src="https://2018.igem.org/Team:SDU-China/bootjs?action=raw&ctype=text/javascript"></script>
 
   <script src="https://2018.igem.org/Team:SDU-China/bootjs?action=raw&ctype=text/javascript"></script>
−
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
+
  <script src="https://2018.igem.org/Team:SDU-China/jquery311?action=raw&ctype=text/javascript"></script>
 +
 
 +
 
 
     <style>
 
     <style>
 
     #contentSub, #footer-box, #catlinks, #search-controls, #p-logo,
 
     #contentSub, #footer-box, #catlinks, #search-controls, #p-logo,
Line 35: Line 40:
 
         width: 100%;  
 
         width: 100%;  
 
         height: 100%;  
 
         height: 100%;  
−
         background-color: transparent;
+
         background-color: transparent;
 
     }
 
     }
−
li { list-style: none; }
 
−
#menu a { text-decoration: none; }
 
−
#menu a:link,#menu a:visited,#menu a:active { color: white;  }
 
−
#menu a:hover { color: #c1d9ff; }
 
  
−
table { margin: 0 auto; }
+
 
−
td { text-align: center }
+
#logo {
 +
    float: left;
 +
    position: relative;
 +
    margin-left:1%;
 +
    display: block !important;
 +
}
 +
#logo img { width:150px;} /*???*/
  
 
#content{
 
#content{
−
margin: 0px;
+
    margin-top: -22px;
−
padding: 0px;
+
    padding: 0px;
−
background-color: #E6E6F2;
+
    background-color: #E6E6F2;
 
         width: 100%;  
 
         width: 100%;  
 
         height: 100%;
 
         height: 100%;
Line 54: Line 61:
 
}
 
}
  
−
#header, #footer {
+
#header {
−
background: linear-gradient(to right, #005AB5, #007500);
+
    background: linear-gradient(to right, #005AB5, #007500);
−
background: -webkit-linear-gradient(to right, #005AB5, #007500);
+
    background: -webkit-linear-gradient(to right, #005AB5, #007500);
−
background: -moz-linear-gradient(to right, #005AB5, #007500);
+
    background: -moz-linear-gradient(to right, #005AB5, #007500);
−
background: -o-linear-gradient(to right, #005AB5, #007500);
+
    background: -o-linear-gradient(to right, #005AB5, #007500);
−
float: left;
+
    float: left;
−
width: 100%;
+
    width: 100%;
−
padding: 1% 0%;
+
    padding: 2% 0%;
 
         margin: 0 0px !important;
 
         margin: 0 0px !important;
 
}
 
}
  
−
#logo {
+
#footer {
−
float: left;
+
    background: linear-gradient(to right, #005AB5, #007500);
−
position: relative;
+
    background: -webkit-linear-gradient(to right, #005AB5, #007500);
−
margin-left:1%;
+
    background: -moz-linear-gradient(to right, #005AB5, #007500);
−
display: block !important;
+
    background: -o-linear-gradient(to right, #005AB5, #007500);
 +
    float: left;
 +
    width: 100%;
 +
    padding: 7px 0;
 +
        margin: 0 0px !important;
 
}
 
}
−
#logo img {  width:150px;} /*???*/
 
−
 
 
#menu a { text-decoration: none; }
 
#menu a { text-decoration: none; }
−
#menu a:link,#menu a:visited,#menu a:active { color: white; }
+
#menu a:link, a:visited, a:active { color: white; }
 
#menu a:hover { color: #c1d9ff; }
 
#menu a:hover { color: #c1d9ff; }
 
#menu {
 
#menu {
Line 103: Line 112:
  
  
−
 
−
#footer { height: 180px;  color: white; }
 
 
#sponsors {
 
#sponsors {
−
text-align: center;
+
    text-align: center;
−
float: left;
+
    float: left;
−
margin-left: 15px;
+
    margin-left: 15px;
−
margin-top: 2px;
+
    margin-top: 2px;
−
}
+
−
#address {
+
−
text-align: center;
+
−
float: right;
+
−
margin-right: 20px;
+
−
margin-left: 30px;
+
−
margin-top: 2px;
+
 
}
 
}
 
#contact {
 
#contact {
−
text-align: center;
+
    text-align: center;
−
float: right;
+
    float: right;
−
position: relative;
+
    position: relative;
−
margin-right: 30px;
+
    margin-right: 30px;
−
margin-top: 2px;
+
    margin-top: 15px;
 
}
 
}
  
 +
#contact a { text-decoration: none; }
 +
#contact a:link, a:visited, a:active { color: white; }
 +
#contact a:hover { color: #c1d9ff; }
  
  
Line 134: Line 137:
 
overflow: hidden;
 
overflow: hidden;
 
background-color:white !important;}
 
background-color:white !important;}
−
 
 
#main-title {
 
#main-title {
−
font-size: 45px;
+
    font-size: 45px;
−
color: #4b5ea4;
+
    color: #4b5ea4;
−
font-family: sans-serif;  
+
    font-family: sans-serif;  
−
text-align: center;
+
    text-align: center;
−
font-weight: lighter;
+
    font-weight: lighter;
−
margin: 0;
+
    margin: 0;
−
padding: 30px 0px 0px 0px;
+
    padding: 30px 0px 0px 0px;
−
margin: 0px 67px 0px 65px;
+
    margin: 0px 67px 0px 65px;
 
}
 
}
 
.sublinks { text-align: center; }
 
.sublinks { text-align: center; }
 
.sublinks h2 {
 
.sublinks h2 {
−
display: inline-block;
+
    display: inline-block;
−
margin: 20px 40px;
+
    margin: 20px 40px;
 
}
 
}
−
.sublinks a:link, .sublinks a:visited, .sublinks a:active, .p-top a:link, .p-top a:visited, .p-top a:active { color: #8298ec;  font-family: sans-serif;  font-weight: lighter; }
+
.sublinks a:link, .sublinks a:visited, .sublinks a:active, .p-top a:link, .p-top a:visited, .p-top a:active { color: #4b5ea4;  font-family: sans-serif;  font-weight: lighter; }
 
.sub-title {
 
.sub-title {
−
font-family: sans-serif;
+
    font-family: sans-serif;
−
color: white;
+
    color: white;
−
text-align: center;
+
    text-align: center;
 
}
 
}
 
.conteudo {
 
.conteudo {
−
margin: 0 auto;
+
    width:100%;
−
max-width: 1800px;
+
    max-width: 1800px;
−
background-color: white;
+
    background-color: white;
 
     line-height: 1.5;
 
     line-height: 1.5;
 
     clear: both;
 
     clear: both;
 +
 
}
 
}
 
.p-top {
 
.p-top {
−
color: #4b5ea4;
+
    color: #4b5ea4;
−
text-align: center;
+
    text-align: center;
−
margin-top: 5px;
+
    margin-top: 5px;
−
font: 25px sans-serif;
+
    font: 25px sans-serif;
−
transform: translateY(80%);
+
    transform: translateY(80%);
 
}
 
}
  
Line 177: Line 180:
  
  
−
p {
+
p.partone {
 
     text-align: justify;
 
     text-align: justify;
 
     text-justify: inter-word;
 
     text-justify: inter-word;
−
    font-family: 'Calibri', sans-serif;
+
 
 
}
 
}
 
p {
 
p {
Line 198: Line 201:
  
 
h4{
 
h4{
−
display: inline-block;
+
    display: inline-block;
−
display:-webkit-inline-block; /* Safari, Chrome, and Opera */
+
    display:-webkit-inline-block; /* Safari, Chrome, and Opera */
 
     display: -moz-inline-block;/* Firefox */
 
     display: -moz-inline-block;/* Firefox */
 
     display: -o-inline-block;
 
     display: -o-inline-block;
 +
    width: 100%;
 
}
 
}
 +
h1{
 +
  margin-bottom:0px !important;
 +
}
 +
*{margin: 0;padding: 0;}
 +
         
 +
  #box div{
 +
    position: relative;
 +
    display: block;
 +
    width: 600px;
 +
    height: 500px;
 +
    margin: 0 auto;
 +
  }
 +
  #box img{
 +
    width: 600px;
 +
    height: 500px;
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
  text-align: center;
  
−
@media screen and (max-width: 600px) {
+
  }
−
         
+
−
      }
+
  
 +
ul li{
 +
  list-style: none;
 +
}
 +
ol li{​
 +
 +
        list-style-type:decimal;
 +
 +
        list-style-position:inside ;
 +
 +
        font-size: 15px;
 +
 +
}
 +
ol{
 +
  padding-left: 10px ;
 +
  padding-bottom: 40px;
 +
}
 +
 +
.parttwo a{
 +
  display: block;
 +
  text-align: center !important;
 +
}
 
#header{
 
#header{
 
  width: 100%;
 
  width: 100%;
Line 216: Line 257:
 
clear:both;
 
clear:both;
 
z-index: 3;
 
z-index: 3;
 +
 
}
 
}
 
#footer{
 
#footer{
 
     width: 100%;
 
     width: 100%;
−
     height:200px;  /* footer的高度一定要是固定值*/  
+
     height:100px;  /* footer的高度一定要是固定值*/  
 
     position:absolute;
 
     position:absolute;
 
     bottom:0px;
 
     bottom:0px;
Line 228: Line 270:
 
   clear:both;
 
   clear:both;
 
   overflow: hidden;
 
   overflow: hidden;
−
   padding-bottom: 180px;
+
   padding-top: 80px;
−
   padding-top: 95px;
+
   padding-bottom: 100px;
 
   /*保证footer是相对于container位置绝对定位*/
 
   /*保证footer是相对于container位置绝对定位*/
−
     position:relative;
+
     position:relative;  
 +
    margin-bottom: -123px;
 
     width:100%;
 
     width:100%;
 
     min-height:100%;  
 
     min-height:100%;  
Line 238: Line 281:
 
-moz-box-sizing:border-box; /* Firefox */
 
-moz-box-sizing:border-box; /* Firefox */
 
-webkit-box-sizing:border-box; /* Safari */
 
-webkit-box-sizing:border-box; /* Safari */
−
}
 
−
 
−
.paragraphs{
 
−
  padding: 0 150px 0 150px; 
 
−
  font-family: sans-serif;
 
−
  text-align: center;
 
−
}
 
−
.paragraphs img{
 
−
  position: relative;
 
−
  display: inline-block;
 
−
  margin: 10 auto;
 
−
}
 
−
 
−
.paragraphs a:visited { color:#5a3428;text-decoration: none;}
 
−
.paragraphs a:hover { color:#80ddbf;text-decoration: none;}
 
−
p.reference{
 
−
  font-size: 15px !important;
 
−
}
 
−
#tiao{
 
−
margin:0 150px;
 
−
font-size: 20px !important
 
 
}
 
}
 
</style>
 
</style>
Line 354: Line 376:
 
&nbsp;&nbsp;&nbsp;&nbsp;Aiming at popularize the usage of bioplastic and the process of production of PHB using synthetic biology methods, we published a comic named “THE ADVANTURE OF GLYCEROL”. <br></p>
 
&nbsp;&nbsp;&nbsp;&nbsp;Aiming at popularize the usage of bioplastic and the process of production of PHB using synthetic biology methods, we published a comic named “THE ADVANTURE OF GLYCEROL”. <br></p>
 
<img src="https://static.igem.org/mediawiki/2018/5/5b/T--SDU-China--comic1.jpeg" width="400px" alt="">
 
<img src="https://static.igem.org/mediawiki/2018/5/5b/T--SDU-China--comic1.jpeg" width="400px" alt="">
−
<img src="https://static.igem.org/mediawiki/2018/3/3d/T--SDU-China--comic2.jpeg"  width="400px" alt=""><br><br><br><br>
+
<img src="https://static.igem.org/mediawiki/2018/3/3d/T--SDU-China--comic2.jpeg"  width="400px" alt=""> <br><br><br><br>
 
</div>
 
</div>
 
</div>
 
</div>

Revision as of 19:23, 16 October 2018

Public Engagement

#summer camp
    Apart from lab experiments and factory tour, we had a wonderful summer vacation by taking part in a summer camp together with OUC-China.
    Thanks for their invitation, we joined this summer camp devoting to teach high school graduates and first-year students in university some knowledge in life science as well as methods of reading papers and analysing biological questions, which would increase their interests in life and life science, we spent a pleasing and meaningful week together.
    During this summer camp, we have experienced many interesting activities like going for the sea, painting on the culture medium with E. coli and a small Jamboree. Two of our team members also gave two little lectures on metabolic engineering& fermentation engineering and insect taxonomy.
    Besides, as a new team, we were truly thankful for this opportunity to have a communication with OUC-China and we learnt a lot from them. We are looking forward to collaborate with them again!

#comic book about the production of bioplastic (PHB)
    PHB, a secondary metabolic product produced by a great quantity of bacteria, is regarded as an environmental-friendly material since it can be degraded through biological reactions, known as bioplastic. PHB is of great use in many fields and it might be the key to end white pollution.
    Public may have heard of the name “bioplastic”, but most of them do not know what the “bioplastic” is and how the “bioplastic” produces.
    Aiming at popularize the usage of bioplastic and the process of production of PHB using synthetic biology methods, we published a comic named “THE ADVANTURE OF GLYCEROL”.