Difference between revisions of "Team:Tongji-Software/Team"

Line 191: Line 191:
 
   vertical-align:middle;
 
   vertical-align:middle;
 
}
 
}
−
.flip-container {
+
 
−
perspective:1000px;
+
 
−
        padding-left: 100px;
+
* {
 +
padding:0;
 +
margin:0;
 
}
 
}
−
.flip-container:hover .flipper {
+
body {
−
transform:rotateY(180deg);
+
background:#333;
 
}
 
}
−
.flip-container,.front,.back {
+
ul,li,ol {
 +
list-style-type:none;
 +
}
 +
a {
 +
text-decoration:none;
 +
}
 +
img {
 
width:250px;
 
width:250px;
 
height:400px;
 
height:400px;
−
}
+
display:block;
−
.flip-container img
+
−
{
+
−
display:block;
+
 
/*去除多余边框*/
 
/*去除多余边框*/
 
}
 
}
−
.flipper {
+
#content {
−
transition:0.6s;
+
width:1200px;
−
transform-style:preserve-3d;
+
margin:50px auto 0;
 +
}
 +
#content ul {
 
position:relative;
 
position:relative;
 
}
 
}
−
.front,.back {
+
#content .bar li {
−
position:absolute;
+
width:250px;
 +
height:400px;
 +
float:left;
 +
margin-right:30px;
 
}
 
}
−
.back {
+
#content ul li a {
 +
width:250px;
 +
height:400px;
 +
display:block;
 +
position:relative;
 +
/*远近度*/
 +
perspective:400px;
 +
transition:all 1s;
 +
}
 +
#content ul li a>div {
 +
transition:all 1s;
 +
/*背面不可视*/
 +
backface-visibility:hidden;
 +
}
 +
#content ul li a:hover .forward {
 +
transform:rotateY(-180deg);
 +
}
 +
.tips {
 +
width:250px;
 +
height:400px;
 +
color:#fff;
 +
background:linear-gradient(#333,#666);
 
transform:rotateY(180deg);
 
transform:rotateY(180deg);
 +
transition:all 1s;
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
}
 +
.tips p {
 +
text-indent:2em;
 +
line-height:1.5em;
 +
padding:20px;
 +
font-size:18px;
 +
font-weight:400px;
 +
}
 +
#content ul li a:hover .tips {
 +
transform:none;
 +
box-shadow:0 0 10px 5px pink;
 +
border-radius:10px;
 
}
 
}
  
Line 284: Line 331:
 
         Team members</br>  
 
         Team members</br>  
 
       </span>
 
       </span>
−
<div class="flip-container">
+
 
−
     <div class="flipper">
+
<div id="content">
−
         <div class="front" >
+
     <ul class="bar">
−
            <img src="https://static.igem.org/mediawiki/2018/8/83/T--Tongji-Software--Team-Haiyan.jpeg" width="100%">
+
         <li>
−
            <p>Initiative idea of being an iGEMer is my passion for biology and programming. Joining iGEM and developing Alpha Ant is like an adventure for me, which is full of surprises and difficulties. The joy, experience and friendship I got matter most.</p>
+
            <a>
−
        </div>
+
                <div class="forward">
−
        <div class="back" style="background-color: gray">
+
                    <img src="https://static.igem.org/mediawiki/2018/8/83/T--Tongji-Software--Team-Haiyan.jpeg" width= "100%">
−
            <p>Initiative idea of being an iGEMer is my passion for biology and programming. Joining iGEM and developing Alpha Ant is like an adventure for me, which is full of surprises and difficulties. The joy, experience and friendship I got matter most.</p>
+
                </div>
−
        </div>
+
                <div class="tips">
−
    </div>
+
                    <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>
 +
                </div>
 +
            </a>
 +
        </li>
 +
      </ul>
 
</div>
 
</div>
 +
 +
 
<span class="h1" id="Instructors">  
 
<span class="h1" id="Instructors">  
 
         Instructors</br>  
 
         Instructors</br>  

Revision as of 05:11, 4 October 2018

    •
Team
Overview
 The collective is the source of power and the cradle of wisdom. Our team is consisted of different people with same passion for inter-discipline. Differences make the team integrated. Some of us were best friends before iGEM 2018. Some of us didn’t even meet. We are from various majors, biology, biotechnology, bioinformatics, computer engineering & design. Since we only have seven team members, each of us has made great difference in our project. Team members
Instructors