Team:NWU-CHINA-A/HP Overview

/*********************default CSS pattern**********************/

a {

   text-decoration: none !important;

}

  1. content {
   width: 100% !important;
   /*宽度占据页面*/
   padding: 0 !important;
   /*清除内边距*/
   margin: 0 !important;
   /*清除外边距*/
   border-width: 0 !important;
   /*清除边框*/
   font-size: 16px;
   /*设置内容基础字体大小*/
   font-family: OpenSans;

}

  1. content a {
   padding-right: 0px !important;

}

/*清除超链接默认右边距*/

  1. top_menu_14 {
   border-bottom-width: 0 !important;
   /*清除top_menu下边框*/

}

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {

   margin: 0 !important;
   /*清除列表页边距*/

}

  1. mw-content-text p {
   display: none;
   /*清除内容页边距*/

}

  1. top_title {
   display: none !important;
   /*清除默认页面标题*/

}

  1. content a:hover {
   text-decoration: none;
   /*清除下划线*/

}

  1. content a:visited {
   color: #000 !important;
   /*清除超链接访问后颜色变化*/
   text-decoration: none;
   /*清除超链接访问后下划线*/

}

  1. content a:focus {
   text-decoration: none;
   /*清除超链接获得焦点后下划线*/

}

  1. globalWrapper {
   padding-bottom: 0 !important;

}

/*#mw-content-text p,#mw-content-text ol,pre{

   display: none ;

}*/

  1. top_menu_under {
   /*清除一些奇怪的东西*/
   height: 16px !important;

}

.text-wrapper p {

   display: block !important;
   /*段落显示*/
   font-family: OpenSans !important;

}


/*框架部分*/ @font-face {

   font-family: Hemi Head;
   src: url("https://static.igem.org/mediawiki/2020/4/40/T--NWU-CHINA-A--hemi_head_bd_it.ttf")format("truetype");

}

@font-face {

   font-family: a Atmospheric;
   src: url("https://static.igem.org/mediawiki/2020/6/64/T--NWU-CHINA-A--aAtmospheric.ttf")format("truetype"),
       url("https://static.igem.org/mediawiki/2020/5/5d/T--NWU-CHINA-A--aAtmospheric.otf")format("opentype");

}

@font-face {

   font-family: OpenSans;
   src: url("https://static.igem.org/mediawiki/2020/c/c3/T--NWU-CHINA-A--OpenSans-Regular.ttf")format("truetype");

}

@font-face {

   font-family: OpenSans-Bold;
   src: url("https://static.igem.org/mediawiki/2020/5/58/T--NWU-CHINA-A--OpenSans-Bold.ttf")format("truetype");

}

@font-face {

   font-family: OpenSans-BoldItalic;
   src: url("https://static.igem.org/mediawiki/2020/8/80/T--NWU-CHINA-A--OpenSans-BoldItalic.ttf")format("truetype");

}

@font-face {

   font-family: OpenSans-ExtraBold;
   src: url("https://static.igem.org/mediawiki/2020/f/f6/T--NWU-CHINA-A--OpenSans-ExtraBold.ttf")format("truetype");

}

@font-face {

   font-family: OpenSans-ExtraBoldItalic;
   src: url("https://static.igem.org/mediawiki/2020/7/70/T--NWU-CHINA-A--OpenSans-ExtraBoldItalic.ttf")format("truetype");

}

@font-face {

   font-family: OpenSans-Light;
   src: url("https://static.igem.org/mediawiki/2020/3/34/T--NWU-CHINA-A--OpenSans-Light.ttf")format("truetype");

}

@font-face {

   font-family: OpenSans-LightItalic;
   src: url("https://static.igem.org/mediawiki/2020/f/fc/T--NWU-CHINA-A--OpenSans-LightItalic.ttf")format("truetype");

}

@font-face {

   font-family: OpenSans-SemiBold;
   src: url("https://static.igem.org/mediawiki/2020/2/26/T--NWU-CHINA-A--OpenSans-SemiBold.ttf")format("truetype");

}

@font-face {

   font-family: OpenSans-SemiBoldItalic;
   src: url("https://static.igem.org/mediawiki/2020/d/d1/T--NWU-CHINA-A--OpenSans-SemiBoldItalic.ttf")format("truetype");

}

@font-face {

   font-family: OpenSans-Italic;
   src: url("https://static.igem.org/mediawiki/2020/c/c1/T--NWU-CHINA-A--OpenSans-Italic.ttf")format("truetype");

}

.template-wrapper {

   font-size: 16px;
   /*set basic font size*/

}

.template-wrapper a {

   text-decoration-line: none;
   /*clear decroration line*/

}

.template-wrapper li {

   list-style: none;
   /*clear list marker*/

}

.nav-wrapper {

   display: flex;
   position: fixed;
   width: 100%;
   left: 0;
   top: 16px;
   background-color: white;
   justify-content: center;
   box-shadow: 0px 10px 50px -40px inset;
   /*font-family: Algerian;*/
   font-family: OpenSans !important;
   z-index: 100000;

}

.nav-wrapper a:visited {

   color: #000 !important;

}

.item-wrapper {

   display: grid;
   /*basic nav-bar set*/
   width: 1000px;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr minmax(150px, 1fr);
   grid-template-rows: 75px;

}

.nav-drop {

   display: none;
   padding: 0;
   /*清除列表缩进*/

}

.nav-item {

   margin: 25px 0 15px 0;

}

.nav-drop {

   margin: 0;
   background-color: #fff;
   box-shadow: 0 0 3px -1px;
   border-radius: 3px;

}

.nav-link {

   display: block;
   width: 100px;
   height: 35px;
   margin: auto;
   font-size: 1.25rem;
   font-weight: 1000;
   text-align: center;

}

.drop-link {

   display: block;
   font-size: 1.1rem;
   text-align: center;
   line-height: 3.2rem;
   height: 3.2rem;

}

.nav-link, .drop-link, .nav-link:visited, .drop-link:visited {

   color: #000 !important;

}

/*dropmenu*/ .nav-item:hover .nav-drop {

   display: block;
   animation: fadein 0.6s;
   -webkit-animation: fadein 0.6s;
   -moz-animation: fadein 0.6s;
   -o-animation: fadein 0.6s;

}

.nav-link:hover, .drop-link:hover {

   color: #bdc3c7;
   animation: changecolor 0.4s;
   -webkit-animation: changecolor 0.4s;
   -moz-animation: changecolor 0.4s;
   -o-animation: changecolor 0.4s;

}

.divide {

   display: block;
   padding: 0;
   margin: 0;
   width: 100%;
   height: 80px;
   /*75+16+5*/

}

.logo {

   background-image: url(T--NWU-CHINA-A--shield_logo.png) !important;
   background-position: center !important;
   background-size: auto 100% !important;
   background-repeat: no-repeat !important;

}

/*processbar*/ .processbar {

   position: fixed;
   top: 91px;
   width: 0%;
   height: 5px;
   z-index: 99999;
   background-image: linear-gradient(112.9deg, rgba(112, 255, 151, 1) 6.2%, rgba(70, 195, 255, 1) 99.7%);
   background-size: 100% auto;

}

.processbar-back {

   position: fixed;
   top: 91px;
   width: 100%;
   height: 5px;
   z-index: 99999;
   background-color: grey;

}

/*topbutton*/ .topbtn {

   display: none;
   position: fixed;
   right: 20px;
   bottom: 20px;
   width: 50px;
   height: 50px;
   border-radius: 25px;
   z-index: 99999;
   cursor: pointer;
   background-color: rgba(70, 195, 255, 1);
   text-align: center;
   line-height: 50px;
   font-size: 1.2rem;
   user-select: none;
   /*防止文字被选中*/

}

.topbtn-img {

   width: 35px;
   height: 35px;
   margin-top: 7.5px;
   border-radius: 25px;
   z-index: 99999;
   cursor: pointer;
   background-color: rgba(70, 195, 255, 1);
   text-align: center;
   line-height: 50px;
   font-size: 1.2rem;
   user-select: none;

}

/*footer*/ .footer-wrapper {

   position: absolute;
   float: left;
   width: 100%;
   left: 0;
   bottom: 0;
   height: 300px;
   background-color: rgb(36, 50, 66);
   box-shadow: 0 0px 10px -3px;

} .footer-icon{

   display: block;
   float: left;
   background-color: #fff;
   width: 60%;
   margin: 50px 50px ;
   height: 200px;

} .footer-info{

   display: block;
   float: left;
   background-color: transparent;
   font-size: 1.2rem;
   color: #bdc3c7;
   height: 100px;
   width: 10%;
   border-left: #bdc3c7 solid 1px;
   margin: 50px 50px ;
   padding: 50px 50px;

} .footer-wrapper::before {

   content: "";
   display: block;
   position: absolute;
   height: 300px;
   width: 100%;
   top: 0;
   left: 0;

}

.copyright {

   position: absolute;
   text-align: center;
   color:  #bdc3c7;
   width: 100%;
   left: 0;
   bottom: 10px;
   font-size: 0.8rem;
   opacity: 0.6;

}

.school-icon {

   float: left;
   width: 100px;
   margin: 20px 20px;

} .college-icon{

   float: left;
   width: 100px;
   margin: 20px 20px;

} .snapgene-icon {

   float: left;
   height: 40px;
   margin: 40px 20px;

}

/*侧边栏按钮*/ .side-btn {

   position: fixed;
   right: 50px;
   top: 30px;
   z-index: 100000;

}

/*侧边栏*/ .side-wrapper {

   position: fixed;
   display: none;
   top: 96px;
   right: -300px;
   width: 300px;
   z-index: 100000;
   border-radius: 3px;
   box-shadow: 0 0px 5px -3px;
   font-family: OpenSans;
   background-color: #fff;
   opacity: 0.9;

}

.side-wrapper a:visited, .side-link:visited, .side-drop:visited {

   color: #000 !important;

}

.side-item {

   width: 300px;
   text-align: center;

}

.side-link {

   display: inline-block;
   padding: 20px 0 !important;
   margin: 0 !important;
   font-size: 2rem;
   font-weight: 700;
   color: #000;
   width: 300px;
   margin: auto 25px;
   text-align: center;

}

.side-drop {

   display: block;
   padding: 0;
   margin: 0 !important;
   width: 300px;
   height: 0;
   overflow: hidden;
   z-index: 100000;
   text-align: center;
   font-family: OpenSans;
   font-size: 1.4rem;
   background-color: #fff;
   transition: height .3s ease;

}

.side-drop-link {

   color: #000;

}

/*.side-link::after{

       content: "\25BC";
       font-size: 1.1rem;
   }*/

.side-link:hover+.side-drop, .side-drop:hover {

   height: 6.4rem;

}

/*定义动画fadein*/ @keyframes fadein {

   0% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }

}

@-moz-keyframes fadein {

   0% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }

}

@-webkit-keyframes fadein {

   0% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }

}

@-o-keyframes fadein {

   0% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }

}

/*定义动画changecolor*/ @keyframes changecolor {

   0% {
       color: #000;
   }
   100% {
       color: #bdc3c7;
   }

}

@-moz-keyframes fadein {

   0% {
       color: #000;
   }
   100% {
       color: #bdc3c7;
   }

}

@-webkit-keyframes fadein {

   0% {
       color: #000;
   }
   100% {
       color: #bdc3c7;
   }

}

@-o-keyframes fadein {

   0% {
       color: #000;
   }
   100% {
       color: #bdc3c7;
   }

}

/*实现网页自适应*/ @media screen and (max-width:1000px) {

   .nav-item a {
       display: none;
   }
   .side-btn {
       display: block !important;
   }

}

@media screen and (min-width: 1000px) {

   .side-btn {
       display: none !important;
   }
   .side-wrapper {
       display: none !important;
   }

}

HP Overview

In iGEM, we are more likely to ignore a fact that our project needs to be used in the real world. As an important part of the competition, human practice makes our project much more complete and helps us test the practicality of our project. We believe that only the contribution of both experts and consumers makes our product perfect and benefits the whole world.


The human practice part of our project consists of thoughts of team members and suggestions of experts. Besides, we also have obtained some feedbacks of the public to make sure that our project fits the reality. At the same time, we popularized synthetic biology, so that people would have a deeper understanding of it. The most important part of our human practice is that we adjust our project according to the results of every human practice. There are a lot of problems to solve. Band-aids already have a relatively mature market now. What about the new type of band-aid we produced, will it have a market?


Can we bring it to market? Can it be accepted by consumers? How can we popularize it? Can it survive in the severe competitive environment? How can we ensure the advantages of our products in the market? In order to make sure that our products can satisfy more people, we decided to seek the advice of people from different industries in society, including doctors, professors, drug developers, marketing professionals, consumers, students, experts and the public, so as to learn more about how to improve our projects.

交流会(描述,贡献,下一步)

  • 6.14 The 4th Southern China Regional Online Meeting
  • 7.11 Eastern China iGEM Meetup:
  • 7.25 Shaanxi iGEM Meetup:
  • 8.15 Friend Team Meetup:
  • 8.27-31 The 7th Conference of China iGEMer Meetup: