Difference between revisions of "Team:ECUST China/Team"

Line 1: Line 1:
<html>
+
<head>
 +
    <meta charset="UTF-8">
 +
    <title>Title</title>
 +
    <link href="https://fonts.googleapis.com/css?family=Barlow+Condensed&display=swap" rel="stylesheet">
 +
<style>
 +
.navbar .navbar-brand img {
 +
    position: absolute;
 +
left: 50%;right: 50%;
 +
transform: translate(-50%,10%);
 +
width: 12%;
 +
 
 +
}
 +
.navbar .navbar-brand #logo-2{
 +
display: none;
 +
}
 +
.navbar {
 +
height:100px;
 +
    width: 100% !important;
 +
    z-index: 2;
 +
}
 +
.navbar .nav-item .nav-link{
 +
padding-top: 50px;
 +
font-family: 'Barlow', sans-serif;
 +
    font-size: 20px;
 +
}
 +
.navbar .nav-item .dropdown-item{
 +
font-family: arial,sans-serif;
 +
}
  
<div class="column two_thirds_size" >
 
  
<h1>Team</h1>
+
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
#nav1{
 +
padding-left: 5%;
 +
}
 +
#nav2{
 +
padding-left: 6%;
 +
}
 +
#nav3{
 +
padding-left: 6%;
 +
}
 +
#nav4{
 +
padding-left: 380px;
 +
}
 +
#nav5{
 +
padding-left: 6%;
 +
}
 +
#nav6{
 +
padding-left: 6%;
 +
}
  
 +
/*设置主图格式*/
 +
.img-main-box{
 +
width: 100%;height: 800px;
 +
position: relative;
 +
    top: -200px;
 +
overflow-y: visible;
 +
text-align: center;
 +
line-height: 900px;
 +
font-size: 200px;
 +
color: #FFFFFF;
 +
}
 +
#gear .img-main{
 +
transform: translateY(-10%);
 +
}
 +
.img-main-box .img-main{
 +
width: 100%;
 +
z-index: -1;
 +
 +
}
 +
.img-mask{
 +
position: absolute;
 +
top:0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
z-index: 1;
 +
}
  
<h3>What should this page contain?</h3>
+
.navbar:hover {
<ul>
+
background-color: #fff;
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
}
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
.navbar:hover #logo-2{
</ul>
+
display: block;
</div>
+
}
  
 +
.mininav-left{
 +
position: fixed;
 +
top:200px;
 +
padding-left: 36px;
 +
float: left;
 +
width: 25%;
 +
line-height: 30px;
 +
font-size: 24px;
 +
font-family: 'Barlow';
 +
 +
display: none;
 +
}
 +
.mininav-item{
 +
display:inline-block;
 +
}
  
 +
.mian-text-box{
 +
display: block;
 +
 +
padding-top: 60px;
 +
margin-left: 25%;
 +
}
 +
.mian-text-box h1{
 +
padding-left: 26%;
 +
font-weight: bold;
 +
}
 +
.line{
 +
height: 2px;
 +
width: 100px;
 +
background-color: black;
 +
margin-left: 28%;
 +
margin-bottom: 20px;
 +
}
 +
.member-box{
 +
height: 250px;
 +
}
 +
.name-box{
 +
    display: inline-block;
 +
width: 26%;
 +
height: 50%;
 +
}
 +
.name{
 +
text-align: center;
 +
height: 50%;
 +
font-weight: bold;
 +
padding-top: 10px;
 +
}
 +
.text-box{
 +
display: inline;
 +
float: right;
 +
width: 74%;height: 100%;
 +
}
  
<div class="column third_size" >
+
.img-members{
<div class="highlight decoration_A_full">
+
width: 180px;
<h3>Inspiration</h3>
+
margin-left: 50px;
<p>You can look at what other teams did to get some inspiration! <br />
+
}
Here are a few examples:</p>
+
 
<ul>
+
 
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">2014 METU Turkey </a></li>
+
.text-intro{
<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
+
padding: 45px 58px 10px 0;
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
+
}
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
+
 
</ul>
+
#ecust-box{
</div>
+
position: absolute;
 +
top: 0;
 +
margin-left: -35px;
 +
padding: 0;
 +
background-color:#FFFFFF;
 +
width: calc(100vw - 17px);
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 
 +
       
 +
  <div id="ecust-box" >     
 +
  <nav class="navbar navbar-expand-lg navbar-dark primary-color">
 +
 
 +
  <div class="collapse navbar-collapse" id="basicExampleNav">
 +
 
 +
<!-- Team -->
 +
    <ul class="navbar-nav mr-auto">
 +
<li class="nav-item dropdown " id="nav1">
 +
    <a class="nav-link dropdown-toggle navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
 +
    aria-expanded="false">TEAM </a>
 +
    <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLinkr">
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Team">Members</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Collaborations">Collaborations</a>
 +
</div>
 +
</li>
 +
 
 +
        <!-- Project -->
 +
<li class="nav-item dropdown" id="nav2">
 +
    <a class="nav-link dropdown-toggle navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
 +
    aria-expanded="false">PROJECT </a>
 +
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLinkr">
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Description">Description</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Design">Design</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Experiments">Experiments</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Notebook">Notebook</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Contribution">Contribution</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Attributions">Attributions</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Safety">Safety</a>
 +
</div>
 +
</li>
 +
 +
 +
<!--Result -->
 +
<li class="nav-item dropdown" id="nav3">
 +
    <a class="nav-link dropdown-toggle navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
 +
    aria-expanded="false">RESULTS</a>
 +
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLinkr">
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Results">Results</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Demonstrate">Demonstrate</a>
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Improve">Improve</a>
 +
</div>
 +
</li>
 +
 +
       
 +
<a class="navbar-brand" href="https://2019.igem.org/Team:ECUST_China">
 +
<img id="logo-1" src="img/logo.png"  alt="HOME"/>
 +
<img id="logo-2" src="img/logo-color.png"  alt="HOME"/>
 +
 +
</a>
 +
 +
 
 +
<!--Parts -->
 +
<li class="nav-item dropdown" id="nav4">
 +
    <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
 +
    aria-expanded="false">PARTS</a>
 +
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLinkr">
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Parts">Parts</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Basic_Part">Basic Parts</a>
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Composite_Part">Composite Parts</a>
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Part_Collection">Part Collection</a>
 +
</div>
 +
</li>
 +
 +
  <!--human -->
 +
<li class="nav-item dropdown" id="nav5">
 +
    <a class="nav-link dropdown-toggle navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
 +
    aria-expanded="false">HUMAN </a>
 +
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLinkr">
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Human_Practices">Human Practices</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Public_Engagement">Education & Engagement</a>
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Composite_Part">Composite Parts</a>
 +
</div>
 +
</li>
 +
 
 +
        <!--Awards -->
 +
<li class="nav-item dropdown" id="nav6">
 +
    <a class="nav-link dropdown-toggle navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
 +
    aria-expanded="false">AWARDS </a>
 +
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLinkr">
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Entrepreneurship">Entrepreneurship</a>
 +
            <a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Hardware">Hardware</a>
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Measurement">Measurement</a>
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Model">Model</a>
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Plant">Plant</a>
 +
<a class="dropdown-item" href="https://2019.igem.org/Team:ECUST_China/Software">Software</a>
 +
</div>
 +
</li>
 +
       
 +
       
 +
  </ul>
 
</div>
 
</div>
 +
</nav>
 +
 +
<div class="img-main-box">
 +
<img class="img-main" src="img/team-mian.png"/>
 +
<img class="img-mask" src="img/team-mask.png">
 +
</div>
 +
 +
        <div class="mininav-left">
 +
<ul>
 +
<li>01
 +
<a class="mininav-item"  href="#main1">Members</a>
 +
</li>
 +
<li>02
 +
<a class="mininav-item"  href="#mian2">Attributions</a>
 +
</li>
 +
<li>03
 +
<a class="mininav-item"  href="###">Collabrations</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="mian-text-box">
 +
<h1 id="main1">Members</h1>
 +
<div class="line"></div>
 +
 +
<div class="member-box">
 +
<div class="name-box">
 +
<img class="img-members" src="img/陈默.png"/>
 +
<div class="name">Sophia Chen</div></div>
 +
<div class="text-box"><p class="text-intro">
 +
Sophia Chen is a junior student at East China University of Science and Technology. She majors in bioengineering and has joined the successive postgraduate and doctoral programs of study. She distinguishes herself not only in the grades she earned, but also in her ability to work independently. She ranks the third in major. As one of the most creative team members, she often contributes good ideas. She minors in English and is fluent both in English and Chinese. She has a good sense of teamwork and strong responsibility. Besides iGEM, sophia also plays a leadership role in National Undergraduate Training Programs for Innovation and Entrepreneurship.
 +
</p></div></div>
 +
<div class="member-box">
 +
<div class="name-box">
 +
<img class="img-members" src="img/段海容.png"/>
 +
<div class="name">Aqua Duan</div></div>
 +
<div class="text-box"><p class="text-intro">
 +
Aqua Duan is a life science major. She loves biology and small animals very much. She has many hobbies, such as wearing hanfu, listening to crosstalk and buying crystal.She likes the sea and whales very much and hopes to work in a laboratory with sea views in the future. She also likes to do experiments, so she can give up a chance to watch whales in the sea in order to complete the experiment.</p></div></div>
 +
<div class="member-box">
 +
<div class="name-box">
 +
<img class="img-members" src="img/顾晓冰.png"/>
 +
<div class="name">Xiaobing Gu</div></div>
 +
<div class="text-box"><p class="text-intro">
 +
Xiaobing Gu is a junior student in East China University of Science and Technology, majoring in bioengineering. She is a girl of passion for new knowledge. In her spare time, she devote herself to dozens of books in order to broaden her horizon. As a member of ECUST iGEMer, she is a part of model group. Though model is a tough work, she have the confidence that she can figure it out and present the best model for the subject.
 +
</p></div></div>
 +
<div class="member-box">
 +
<div class="name-box">
 +
<img class="img-members" src="img/刘旭.png"/>
 +
<div class="name">Liu Xu</div></div>
 +
<div class="text-box"><p class="text-intro">
 +
Liu Xu is a sophomore, majoring in biotechnology of Applied Biology department. She believes in Hegel’s “what exists is reasonable.” In her free time, she volunteers to promote popular science and participates many volunteer labors. By the way, she likes K-pop and reading poems.
 +
</p></div></div>
 +
<div class="member-box">
 +
<div class="name-box">
 +
<img class="img-members" src="img/巫苑桢.png"/>
 +
<div class="name">Erene Wu</div></div>
 +
<div class="text-box"><p class="text-intro">
 +
Erene Wu is a junior majoring in biotechnology. This is her first igem competition. In addition to her biotechnology major, she minored in math on weekends and was a strong member of the modeling team. She hopes to continue her studies in biomedical engineering. In her spare time, she likes photography, playing the piano, reading and so on.
 +
</p></div></div>
 +
<div class="member-box">
 +
<div class="name-box">
 +
<img class="img-members" src="img/俞世嘉.png"/>
 +
<div class="name">Lydia Yu</div></div>
 +
<div class="text-box"><p class="text-intro">
 +
Lydia Yu is a sophomore majoring in bioengineering. She is fond of the mystery of biology and enjoys immersing herself in the laboratory to explore the unknown. This summer, she was very happy to fight for the iGEM competition with many of her schoolmates. For her, this is not only a rare experience of scientific research and exploration, but also a valuable opportunity to cooperate and get acquaintance with more excellent students. She is an enthusiastic and active girl who also has many interests in life, such as playing badminton, Hip-Hop dancing, learning about geomorphology and so on. This wonderful world is so kind to she --a curious girl to keep on exploring.
 +
</p></div></div>
 +
<div class="member-box">
 +
<div class="name-box">
 +
<img class="img-members" src="img/xuj.png"/>
 +
<div class="name">Joy Xu</div></div>
 +
<div class="text-box"><p class="text-intro">
 +
Joy Xu is a final year bioengineering student at the ECUST. Passionate about all kinds of challenging tasks she could face, such as synthetic biology experiments, web programming and art design. She enjoys the sense of accomplishment and joy that comes with a successful challenge. However, she may go bald soon.
 +
</p></div></div>
 +
 +
<h1 id="main2">Attributions</h1>
 +
<div class="line"></div>
 +
 +
 +
 +
 +
 +
 +
  </div></div>
 +
 +
 
 +
  <script>
 +
      $(function(){
 +
var h3_height = $(".mininav-left").offset().top;
 +
 +
$(window).scroll(function(){
 +
var this_scrollTop = $(this).scrollTop();
 +
if(this_scrollTop>640 ){
 +
$(".mininav-left").show();
 +
}
 +
else{
 +
$(".mininav-left").hide();
 +
}
 +
});  
 +
});
 +
  </script>
 +
</body>
 
</html>
 
</html>

Revision as of 00:40, 11 August 2019

<head>

   <meta charset="UTF-8">
   <title>Title</title>
    <link href="https://fonts.googleapis.com/css?family=Barlow+Condensed&display=swap" rel="stylesheet">
<style>

.navbar .navbar-brand img { position: absolute; left: 50%;right: 50%; transform: translate(-50%,10%); width: 12%;

} .navbar .navbar-brand #logo-2{ display: none; } .navbar { height:100px; width: 100% !important; z-index: 2; } .navbar .nav-item .nav-link{ padding-top: 50px; font-family: 'Barlow', sans-serif; font-size: 20px; } .navbar .nav-item .dropdown-item{ font-family: arial,sans-serif; }


  1. nav1{

padding-left: 5%; }

  1. nav2{

padding-left: 6%; }

  1. nav3{

padding-left: 6%; }

  1. nav4{

padding-left: 380px; }

  1. nav5{

padding-left: 6%; }

  1. nav6{

padding-left: 6%; }

/*设置主图格式*/ .img-main-box{ width: 100%;height: 800px; position: relative;

   top: -200px;

overflow-y: visible; text-align: center; line-height: 900px; font-size: 200px; color: #FFFFFF; }

  1. gear .img-main{

transform: translateY(-10%); } .img-main-box .img-main{ width: 100%; z-index: -1;

} .img-mask{ position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 1; }

.navbar:hover { background-color: #fff;

-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

}

.navbar:hover #logo-2{

display: block; }

.mininav-left{ position: fixed; top:200px; padding-left: 36px; float: left; width: 25%; line-height: 30px; font-size: 24px; font-family: 'Barlow';

display: none; } .mininav-item{ display:inline-block; }

.mian-text-box{ display: block;

padding-top: 60px; margin-left: 25%; } .mian-text-box h1{ padding-left: 26%; font-weight: bold; } .line{ height: 2px; width: 100px; background-color: black; margin-left: 28%; margin-bottom: 20px; } .member-box{ height: 250px; } .name-box{

   display: inline-block;

width: 26%; height: 50%; } .name{ text-align: center; height: 50%; font-weight: bold; padding-top: 10px; } .text-box{ display: inline; float: right; width: 74%;height: 100%; }

.img-members{ width: 180px; margin-left: 50px; }


.text-intro{ padding: 45px 58px 10px 0; }

  1. ecust-box{

position: absolute; top: 0; margin-left: -35px; padding: 0; background-color:#FFFFFF; width: calc(100vw - 17px); } </style> </head> <body>


 <nav class="navbar navbar-expand-lg navbar-dark primary-color">

</nav>

<img class="img-main" src="img/team-mian.png"/> <img class="img-mask" src="img/team-mask.png">

  • 01 <a class="mininav-item" href="#main1">Members</a>
  • 02 <a class="mininav-item" href="#mian2">Attributions</a>
  • 03 <a class="mininav-item" href="###">Collabrations</a>

Members

<img class="img-members" src="img/陈默.png"/>

Sophia Chen

Sophia Chen is a junior student at East China University of Science and Technology. She majors in bioengineering and has joined the successive postgraduate and doctoral programs of study. She distinguishes herself not only in the grades she earned, but also in her ability to work independently. She ranks the third in major. As one of the most creative team members, she often contributes good ideas. She minors in English and is fluent both in English and Chinese. She has a good sense of teamwork and strong responsibility. Besides iGEM, sophia also plays a leadership role in National Undergraduate Training Programs for Innovation and Entrepreneurship.

<img class="img-members" src="img/段海容.png"/>

Aqua Duan

Aqua Duan is a life science major. She loves biology and small animals very much. She has many hobbies, such as wearing hanfu, listening to crosstalk and buying crystal.She likes the sea and whales very much and hopes to work in a laboratory with sea views in the future. She also likes to do experiments, so she can give up a chance to watch whales in the sea in order to complete the experiment.

<img class="img-members" src="img/顾晓冰.png"/>

Xiaobing Gu

Xiaobing Gu is a junior student in East China University of Science and Technology, majoring in bioengineering. She is a girl of passion for new knowledge. In her spare time, she devote herself to dozens of books in order to broaden her horizon. As a member of ECUST iGEMer, she is a part of model group. Though model is a tough work, she have the confidence that she can figure it out and present the best model for the subject.

<img class="img-members" src="img/刘旭.png"/>

Liu Xu

Liu Xu is a sophomore, majoring in biotechnology of Applied Biology department. She believes in Hegel’s “what exists is reasonable.” In her free time, she volunteers to promote popular science and participates many volunteer labors. By the way, she likes K-pop and reading poems.

<img class="img-members" src="img/巫苑桢.png"/>

Erene Wu

Erene Wu is a junior majoring in biotechnology. This is her first igem competition. In addition to her biotechnology major, she minored in math on weekends and was a strong member of the modeling team. She hopes to continue her studies in biomedical engineering. In her spare time, she likes photography, playing the piano, reading and so on.

<img class="img-members" src="img/俞世嘉.png"/>

Lydia Yu

Lydia Yu is a sophomore majoring in bioengineering. She is fond of the mystery of biology and enjoys immersing herself in the laboratory to explore the unknown. This summer, she was very happy to fight for the iGEM competition with many of her schoolmates. For her, this is not only a rare experience of scientific research and exploration, but also a valuable opportunity to cooperate and get acquaintance with more excellent students. She is an enthusiastic and active girl who also has many interests in life, such as playing badminton, Hip-Hop dancing, learning about geomorphology and so on. This wonderful world is so kind to she --a curious girl to keep on exploring.

<img class="img-members" src="img/xuj.png"/>

Joy Xu

Joy Xu is a final year bioengineering student at the ECUST. Passionate about all kinds of challenging tasks she could face, such as synthetic biology experiments, web programming and art design. She enjoys the sense of accomplishment and joy that comes with a successful challenge. However, she may go bald soon.

Attributions





  <script>
     $(function(){

var h3_height = $(".mininav-left").offset().top;

$(window).scroll(function(){ var this_scrollTop = $(this).scrollTop(); if(this_scrollTop>640 ){ $(".mininav-left").show(); } else{ $(".mininav-left").hide(); } }); });

  </script>

</body> </html>