Difference between revisions of "Team:SBS SH 112144/test"

(Replaced content with "<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SBS_SH_112144/main.css&action=raw&ctype=text/css" /> <link rel="stylesheet"...")
Line 1: Line 1:
−
{{:Team:Mingdao/test9}}
+
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SBS_SH_112144/main.css&action=raw&ctype=text/css" />
−
<html lang="en">
+
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SBS_SH_112144/animate.css&action=raw&ctype=text/css" />
−
  <head>
+
−
    <meta charset="UTF-8">
+
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
+
−
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
+
−
    <title>test</title>
+
−
  </head>
+
−
 
+
−
<style type="text/css">
+
−
 
+
−
* {
+
−
    box-sizing: border-box;
+
−
}
+
−
 
+
−
/* The grid: Three equal columns that floats next to each other */
+
−
.column {
+
−
    float: left;
+
−
    width: 25%;
+
−
    padding: 10px;
+
−
    text-align: center;
+
−
    font-size: 40px;
+
−
    cursor: pointer;
+
−
    color: white;
+
−
}
+
−
 
+
−
.column2 {
+
−
    float: left;
+
−
    width: 25%;
+
−
    padding: 10px;
+
−
    text-align: center;
+
−
    font-size: 40px;
+
−
    cursor: pointer;
+
−
    color: white;
+
−
}
+
−
.column3 {
+
−
    float: left;
+
−
    width: 12.5%;
+
−
    padding: 10px;
+
−
    text-align: center;
+
−
    font-size: 40px;
+
−
    cursor: pointer;
+
−
    color: white;
+
−
}
+
−
.column4 {
+
−
    float: left;
+
−
    width: 80%;
+
−
    padding: 10px;
+
−
    text-align: center;
+
−
    font-size: 40px;
+
−
    cursor: pointer;
+
−
    color: white;
+
−
}
+
−
 
+
−
.column5 {
+
−
    float: left;
+
−
    width: 10%;
+
−
    padding: 10px;
+
−
    text-align: center;
+
−
    font-size: 60px;
+
−
    cursor: pointer;
+
−
    color: white;
+
−
}
+
−
 
+
−
.containerTab {
+
−
    padding: 20px;
+
−
    color: white;
+
−
}
+
−
 
+
−
/* Clear floats after the columns */
+
−
.row: {
+
−
    content: "";
+
−
    display: table;
+
−
    clear: both;
+
−
}
+
−
 
+
−
/* Closable button inside the container tab */
+
−
.closebtn {
+
−
    float: right;
+
−
    color: white;
+
−
    font-size: 35px;
+
−
    cursor: pointer;
+
−
}
+
−
/* Clear floats after the columns */
+
−
.row: {
+
−
  content: "";
+
−
  display: table;
+
−
  clear: both;
+
−
}
+
−
 
+
−
/* Responsive columns */
+
−
@media screen and (max-width: 600px) {
+
−
  .column {
+
−
    width: 100%;
+
−
    display: block;
+
−
    margin-bottom: 20px;
+
−
    margin-left: 0px;
+
−
  }
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* Style the counter cards */
+
−
.card {
+
−
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+
−
  padding: 30px;
+
−
  text-align: center;
+
−
  background-color: #f1f1f1;
+
−
}
+
−
.card2 {
+
−
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+
−
  padding: 16px;
+
−
  text-align: center;
+
−
  background-color:#000000;
+
−
}
+
−
.card3 {
+
−
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+
−
  padding: 16px;
+
−
  font-size:60px;
+
−
  text-align: center;
+
−
  background-color:#000000;
+
−
}
+
−
 
+
−
* {
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  box-sizing: border-box; }
+
−
 
+
−
body {
+
−
  width: 100%;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  font-family: 'Ubuntu' !important;
+
−
  background-color:black;
+
−
}
+
−
 
+
−
.bg-container {
+
−
  background-attachment: fixed;
+
−
  background-color: black;
+
−
  margin-top:0px;
+
−
  overflow: hidden;
+
−
  position: relative;
+
−
}
+
−
 
+
−
.my-main-container {
+
−
  width: 100%;
+
−
  padding: 0% 0% 0% 0%;
+
−
}
+
−
 
+
−
.main-content {
+
−
  width: 60%;
+
−
  margin-top: 0%;
+
−
  margin-left: 20%;
+
−
margin-bottom:0%;
+
−
  padding: 0%;
+
−
min-height: 600vh;
+
−
}
+
−
 
+
−
.m-block img {
+
−
  width: 100%; }
+
−
 
+
−
.path-btns {
+
−
  position: fixed;
+
−
  width: 250px;
+
−
  top: 200px;
+
−
  left: 225px; }
+
−
  .path-btns .path-dot {
+
−
    width: 25px;
+
−
    height: 25px;
+
−
    border-radius: 50%;
+
−
    position: absolute;
+
−
    background-color: #fff;
+
−
    top: 5px;
+
−
    left: 27px;
+
−
    border: 5px solid #385e66;
+
−
    cursor: pointer; }
+
−
    .path-btns .path-dot.active {
+
−
      background-color: #385e66; }
+
−
    .path-btns .path-dot:hover {
+
−
      transition: all .3s;
+
−
      transform: scale(1.2); }
+
−
 
+
−
.path {
+
−
  height: 100px;
+
−
  display: flex; }
+
−
  .path .pathSvg {
+
−
    display: block; }
+
−
  .path .pathWord {
+
−
    padding-right: 10%; }
+
−
  .path .path-btn {
+
−
    cursor: pointer;
+
−
    fill: #fff; }
+
−
    .path .path-btn.path-active {
+
−
      fill: #385e66; }
+
−
  .path .path-word-sm {
+
−
    font-size: 12px; }
+
−
#HQ_page .path .pathWord p {
+
−
      font-weight: 700;
+
−
      text-align: left !important;
+
−
      font-size: 16px;
+
−
}
+
−
#HQ_page .text-area p {
+
−
  font-size: 22px;
+
−
  font-family: 'Ubuntu';
+
−
  font-weight: 500; }
+
−
img.center {
+
−
  display: block;
+
−
  margin: 0 auto;
+
−
width: 60%;  }
+
−
 
+
−
.p {
+
−
  font-size: 40px;
+
−
  font-family: 'Ubuntu';
+
−
  font-weight: 500;
+
−
  color:white; }
+
−
 
+
−
h1 {
+
−
    text-align:center;
+
−
    font-size: 50px;
+
−
    font-weight: 700;
+
−
    font-family: 'Arizonia' !important;
+
−
    color:white !important;
+
−
    text-align: center;
+
−
    margin-bottom: 1rem; }
+
−
 
+
−
h2{
+
−
    text-align: center;
+
−
    margin-bottom: 2rem !important;
+
−
    margin-top: 2rem;
+
−
    color: pink !important;
+
−
    font-size: 40px;
+
−
    font-weight:bold;
+
−
    font-family:Helvetica;
+
−
}
+
−
h3{
+
−
  text-align: left;
+
−
  margin-bottom: 2rem !important;
+
−
  margin-top: 2rem;
+
−
  color: #4682B4  !important;
+
−
  font-size: 20px;
+
−
  font-weight:bold;
+
−
    font-family:Helvetica;
+
−
}
+
−
h5{
+
−
  text-align: center;
+
−
  color:#ffffff  !important;
+
−
  font-size: 12px;
+
−
  font-weight:bold;
+
−
}
+
−
 
+
−
.top {
+
−
  position: fixed;
+
−
  right: 50px;
+
−
  bottom: 50px;
+
−
  height: 50px;
+
−
  width: 50px;
+
−
  cursor: pointer; }
+
−
 
+
−
.top img {
+
−
    width: 100%; }
+
−
 
+
−
img.pic {
+
−
  display: block !important;
+
−
  margin: 40px auto !important;
+
−
}
+
−
 
+
−
.top-picture{
+
−
  z-index:2;
+
−
width:100%;
+
−
position:absolute;
+
−
}
+
−
 
+
−
video {
+
−
            position:relative;
+
−
            width: 100%;
+
−
            height:auto;
+
−
            margin: 0px auto !important;
+
−
            z-index:1;
+
−
          }
+
−
 
+
−
.fig_block{
+
−
    position: relative;//設為相對定位(relative)
+
−
            width: 60%;
+
−
            height:auto;
+
−
            margin: 0px auto !important;
+
−
    text-align: center;
+
−
    border:2px solid black;
+
−
z-index:-1;
+
−
background-color: black;
+
−
}
+
−
 
+
−
//hot紅色區塊
+
−
.fig_icon{
+
−
    position: absolute;//設為絕對定位(absolute)
+
−
    font-weight: bold;
+
−
    font-size:8;
+
−
    top: 40%;
+
−
    bottom: 0px;
+
−
    left: 200px;
+
−
    right : 0px; //右邊上面都設0，則出現在右上方
+
−
    color: white;
+
−
    display: block;
+
−
    background: red;
+
−
    width: 110px;
+
−
    height: 40px;
+
−
    text-align: center;
+
−
}
+
−
 
+
−
.fig_icon1{
+
−
    position: absolute;//設為絕對定位(absolute)
+
−
    font-weight: bold;
+
−
    font-size:8;
+
−
    top: 46.25%;
+
−
    bottom: 0px;
+
−
    left: 470px;
+
−
    right : 0px; //右邊上面都設0，則出現在右上方
+
−
    color: white;
+
−
    display: block;
+
−
    background: red;
+
−
    width: 110px;
+
−
    height: 30px;
+
−
    text-align: center;
+
−
 
+
−
}
+
−
.fig_icon2{
+
−
    position: absolute;//設為絕對定位(absolute)
+
−
    font-weight: bold;
+
−
    font-size:8;
+
−
    top: 54%;
+
−
    bottom: 0px;
+
−
    left: 850px;
+
−
    right : 0px; //右邊上面都設0，則出現在右上方
+
−
    color: white;
+
−
    display: block;
+
−
    background: red;
+
−
    width: 110px;
+
−
    height: 30px;
+
−
    text-align: center;
+
−
 
+
−
}
+
−
 
+
−
</style>
+
−
</head>
+
−
 
+
−
<body bgcolor="black">
+
−
<div class="bg-container">
+
−
</br>
+
−
<h2>6th Asia-Pacific iGEM Conference</h2>
+
−
<div class="row">
+
−
<div class="column5">
+
−
    <div class="card2">
+
−
<img src="" style="width:100%">
+
−
      <h3></h3>
+
−
      <p></p>
+
−
      <p>  </p>
+
−
      <p>  </p>
+
−
      <p>  </p>
+
−
    </div>
+
−
  </div>
+
−
  <div class="column4">
+
−
    <div class="card">
+
−
<p style="color:black; font-size:20px;">
+
−
 
+
−
<strong>Date:</strong> Jul. 30 – Aug. 2, 2018 </br>
+
−
<strong>Location:</strong> National Chung Hsing University </br>
+
−
 
+
−
</br>
+
−
<center>
+
−
<img src="https://static.igem.org/mediawiki/2018/8/8a/T--Mingdao--2-1-4-P1.jpeg" alt="" style="width:30%">
+
−
<img src="https://static.igem.org/mediawiki/2018/5/5c/T--Mingdao--2-1-4-P3.jpeg" alt="" style="width:32%">
+
−
<img src="https://static.igem.org/mediawiki/2018/5/53/T--SBS_SH_112144--2-1-4-P4.jpeg" alt="" style="width:32%">
+
−
<img src="https://static.igem.org/mediawiki/2018/0/06/T--Mingdao--2-1-4-P2.jpeg" alt="" style="width:15%">
+
−
<img src="https://static.igem.org/mediawiki/2018/7/73/T--Mingdao--2-1-4-P5.jpeg" alt="" style="width:15%">
+
−
</center>
+
−
</br>
+
−
 
+
−
</br>
+
−
<p style="text-indent:2em; color:black; font-size:20px;">
+
−
On behalf of my team, great thanks to every participant who shares their values and exchange opinions with us. Also, all thanks to NCHU to host such a wonderful conference for all of us! </br></br>
+
−
+
−
After the lecture of TAS-Taipei team, which is at the same age as us, we were extremely shocked by their expertise as well as confidence when answering tough questions from the public. Every member knows their project and experiment well and in depth. They could clearly clarify their project!</br></br>
+
−
+
−
Therefore, we know we still have a lot to learn and improve. Actually, we have no more than 2 months to finalize our project. Although it takes time and effort, we'll try to pursue our goal!</br></br>
+
−
+
−
The following are some point of views from other teams or experts:</br></br>
+
−
 
+
−
1. Biosafety: Consider the safety on how you design your product and ensure every step is carefully decided. A good survey could help you check out whether your prototype convinces people.</br></br>
+
−
+
−
2. Questions: </br>
+
−
- Does the mosquito digests HIV quickly?</br>
+
−
- Do you rear the mosquito and modify its genome when it's at birth?</br>
+
−
- Or do you inject the DNA into its guts? How about the stability?</br></br>
+
−
+
−
3. Comments in PPT presentation:</br>
+
−
- Images speak louder than words!</br>
+
−
- control body language on the stage</br>
+
−
- Slide numbers are important</br>
+
−
- design a flow in presentation slides</br>
+
−
- present your idea in a story-telling way</br>
+
−
 
+
−
</br>
+
−
<strong>Reflection:</strong>
+
−
<p style="text-indent:2em; color:black; font-size:20px;">
+
−
It's a great honor to be a co-organizer of Asia-Pacific iGEM Conference, which was held in National Chung Hsing University by team NCHU-Taichung. Through listening to other teams' presentation, we learned more details about their project and were fascinated by their innovations. Also, our members who manage HP seized the opportunity to interact with participants from other teams. Thanks to this event, we arranged a meeting with team CCU-Taiwan shortly after the conference and talked about the collaboration. Throughout the conference, we learned a lot. After listening to our presentation, the professor from NCHU gave us some advice for better performance. Moreover, questions from other iGEMers helped us identify the blind spot in our project. We are looking forward to the Giant Jamboree and hope that we can perform well at the competition!
+
−
</p></br>
+
−
<button onclick="goBack()"><p style="font-size:15px; text-align:center;">  <img src="" alt=""> Go Back  <img src="" alt=""> </p></button>
+
−
</p>
+
−
</p>
+
−
</p>
+
−
    </div>
+
−
  </div>
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
<script>
+
−
function goBack() {
+
−
    window.history.back();
+
−
}
+
−
</script>
+
−
 
+
−
* {
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  box-sizing: border-box; }
+
−
 
+
−
body {
+
−
  width: 100%;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  font-family: 'Ubuntu' !important; }
+
−
 
+
−
 
+
−
.bg-container {
+
−
  background-attachment: fixed;
+
−
  background-color: black;
+
−
  margin-top:-10px;
+
−
  overflow: hidden;
+
−
  position: relative;
+
−
  background-image: url();
+
−
  background-repeat: no-repeat;
+
−
  background-size: 100%;
+
−
 
+
−
}
+
−
 
+
−
.my-main-container {
+
−
  width: 100%;
+
−
  padding: 0%;
+
−
 
+
−
}
+
−
 
+
−
.main-content {
+
−
  background-color:  black;
+
−
  width: 100%;
+
−
  margin-left: 0%;
+
−
  padding: 50px;
+
−
  min-height: 150vh;
+
−
  z-index: 10; }
+
−
 
+
−
.text-area {
+
−
  margin-bottom: 80px; }
+
−
  .text-area h1 {
+
−
    font-size: 130px;
+
−
    font-weight: 700;
+
−
    font-family: 'Arizonia' !important;
+
−
    text-align: center;
+
−
    margin-bottom: 1rem; }
+
−
  .text-area p {
+
−
    font-size: 22px;
+
−
    font-weight: 500; }
+
−
 
+
−
.m-block img {
+
−
  width: 100%; }
+
−
 
+
−
.path-btns {
+
−
  position: fixed;
+
−
  width: 250px;
+
−
  top: 100px;
+
−
  left: 225px; }
+
−
  .path-btns .path-dot {
+
−
    width: 25px;
+
−
    height: 25px;
+
−
    border-radius: 50%;
+
−
    position: absolute;
+
−
    background-color: #fff;
+
−
    top: 5px;
+
−
    left: 27px;
+
−
    border: 5px solid #385e66;
+
−
    cursor: pointer; }
+
−
    .path-btns .path-dot.active {
+
−
      background-color: #385e66; }
+
−
    .path-btns .path-dot:hover {
+
−
      transition: all .3s;
+
−
      transform: scale(1.2); }
+
−
 
+
−
 
+
−
.path {
+
−
  height: 100px;
+
−
  display: flex; }
+
−
  .path .pathSvg {
+
−
    display: block; }
+
−
  .path .pathWord {
+
−
    padding-right: 10%; }
+
−
  .path .path-btn {
+
−
    cursor: pointer;
+
−
    fill: #fff; }
+
−
    .path .path-btn.path-active {
+
−
      fill: #385e66; }
+
−
  .path .path-word-sm {
+
−
    font-size: 12px; }
+
−
#HQ_page .path .pathWord p {
+
−
      font-weight: 700;
+
−
      text-align: left !important;
+
−
      font-size: 16px;
+
−
}
+
−
#HQ_page .text-area p {
+
−
  font-size: 22px;
+
−
  font-family: 'Ubuntu';
+
−
  font-weight: 500; }
+
−
img.center {
+
−
  display: block;
+
−
  margin: 0 auto; }
+
−
 
+
−
.text-area h2{
+
−
    text-align: center;
+
−
    margin-bottom: 2rem !important;
+
−
    margin-top: 2rem;
+
−
    color: black !important;
+
−
    font-size: 40px;
+
−
    font-weight:bold;
+
−
    font-family:serif;
+
−
}
+
−
  .text-area h3{
+
−
  text-align: left;
+
−
  margin-bottom: 2rem !important;
+
−
  margin-top: 2rem;
+
−
  color: #4682B4  !important;
+
−
  font-size: 28px;
+
−
  font-weight:bold;
+
−
}
+
−
//hot紅色區塊
+
−
.fig_icon{
+
−
    position: absolute;//設為絕對定位(absolute)
+
−
    font-weight: bold;
+
−
    font-size:8;
+
−
    top: 40%;
+
−
    bottom: 0px;
+
−
    left: 50px;
+
−
    right : 0px; //右邊上面都設0，則出現在右上方
+
−
    color: white;
+
−
    display: block;
+
−
    background: red;
+
−
    width: 110px;
+
−
    height: 40px;
+
−
    text-align: center;
+
−
z-index:1;
+
−
}
+
−
.fig_icon1{
+
−
    position: absolute;//設為絕對定位(absolute)
+
−
    font-weight: bold;
+
−
    font-size:50;
+
−
    top: 85%;
+
−
    bottom: 0px;
+
−
    left: 40px;
+
−
    right : 0px; //右邊上面都設0，則出現在右上方
+
−
    color: white;
+
−
    display: block;
+
−
 
+
−
    width: 110px;
+
−
    height: 30px;
+
−
    text-align: center;
+
−
 
+
−
}
+
−
.top {
+
−
  position: fixed;
+
−
  right: 50px;
+
−
  bottom: 50px;
+
−
  height: 50px;
+
−
  width: 50px;
+
−
  cursor: pointer; }
+
−
  .top img {
+
−
    width: 100%; }
+
−
img.pic {
+
−
  display: block !important;
+
−
  margin: 40px auto !important;
+
−
}
+
−
.top-picture{
+
−
  z-index:1;
+
−
}
+
−
 
+
−
 
+
−
video {
+
−
            position:relative;
+
−
            width: 100%;
+
−
            height:auto;
+
−
            margin: 20px auto !important;
+
−
          }
+
−
 
+
−
</style>
+
−
 
+
−
<body>
+
−
    <div class="bg-container" style="max-height:none;">
+
−
<!--      <div class="my-main-container">
+
−
        <div class="main-content">
+
−
          <div class="text-area">
+
−
-->     
+
−
 
+
−
 
+
−
 
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
−
 
+
−
 
+
−
 
+
−
  </body>
+
−
+
−
 
+
−
</html>
+
−
{{:Team:Mingdao/test6}}
+

Revision as of 06:08, 17 October 2018

<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SBS_SH_112144/main.css&action=raw&ctype=text/css" /> <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SBS_SH_112144/animate.css&action=raw&ctype=text/css" />