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

Line 17: Line 17:
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
body {background-color:white;
 
−
}
 
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 +
body{
 +
margin: 0;
 +
color:#685454;
 +
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
/* font-family: "Times New Roman", Cambria,  serif;*/
 +
}
  
−
      .left h1{
+
.icon {
−
          font-family: "Times New Roman", Cambria,  serif;
+
  position: fixed;
−
text-align: center;
+
  float: left;
 +
  top: 0px;
 +
  background-color: #685454;
 +
  margin-top:0px;  
 +
  width: 10%;
 +
  height: 100%;
 +
}
  
−
          color:#555;}
 
−
.left {text-align: center;}
 
−
.left .123{
 
−
color:#666;
 
  
−
font-family: "Times New Roman", Cambria,  serif;
+
.icon ul{
 +
  position: fixed;
 +
  overflow:none;
 +
  display:inline-block;
 +
  vertical-align: middle;
 +
  width: 10%;
 +
  height: 100%;
 +
  /*background-color: #685454;*/
 +
  padding-left: 33px;
 +
  padding-top: 6px;
 +
  transition: 0.3s;
 +
}
  
 +
.icon ul li{
 +
  display:inline-block;
 +
  vertical-align: middle;
 +
  list-style: none;
 +
  transition: 0.3s;
 +
  margin-bottom:  15px;
 
}
 
}
  
−
+
.icon ul li:hover{
 +
  transform: scale(1.2);
 +
  transition: all 0.3s;
 +
}
  
 +
.left {
 +
  position: fixed;
 +
  float: left;
 +
  top: 0px;
 +
  left:10%;
 +
  background-color: #ffe286;
 +
  width: 15%;
 +
  height: 100%;
 +
  padding-right: 20px;
 +
  padding-top:10px;
 +
}
  
 +
.left ul{
 +
  display:inline-block;
 +
  text-align: center;
 +
  padding-left: -5px;
 +
  margin-top: 20px;
 +
}
  
 +
.left ul a{
 +
  text-decoration:none;
  
−
</style>
+
}
  
 +
.left ul li{
 +
  color:#685454;
 +
  list-style: none;
 +
  padding-bottom:20px;
 +
  transition: 0.3s;
 +
  margin-bottom:  15px;
 +
  padding-top:10px;
 +
  border-bottom: 0.5px solid #685454;
 +
}
  
−
<div class="left">
 
−
    <h1>What is Alpha Ant?</h1>
 
−
    <span class="123">Already got a brilliant idea in metabolic engineering?</br>
 
−
      Too much information to search?</br>
 
−
      Still,</br>
 
−
      You need Alpha Ant as a guide</br></span>
 
  
−
      Alpha ant is a computational tool for pathway design and reconstruction. With full consideration of metabolic burden</br>     
+
.picture{
−
      and some useful functions, we provide an efficient and powerful pathway design guide.
+
  position: absolute;
 +
  top: 0px;
 +
  height:auto;
 +
  right:0px;
 +
}
  
−
</div>
+
}
 +
 
 +
 
 +
 
 +
</style>
 +
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 +
<boy>
 +
<div class="icon">
 +
    <ul>
 +
    <li><img src="img/SVG/logo.svg" width="55%"  ></li>
 +
    <li><img src="img/SVG/Pro.svg" width="35%" ></li>
 +
    <li><img src="img/SVG/Tea.svg" width="35%" ></li>
 +
    <li><img src="img/SVG/Att.svg" width="35%" ></li>
 +
    <li><img src="img/SVG/Mod.svg" width="35%" ></li>
 +
    <li><img src="img/SVG/Col.svg" width="35%" ></li>
 +
    <li><img src="img/SVG/Req.svg" width="35%" ></li>
 +
    <li><img src="img/SVG/Hum.svg" width="35%" ></li>
 +
    <li><img src="img/SVG/Med.svg" width="35%" ></li>
 +
  </ul>
 +
  </div>
 +
  <div class="left">
 +
    <ul>
 +
      <a href=""><li>What is Alpha Ant</li></a>
 +
      <a href=""><li>Why Alpha Ant</li></a>
 +
      <a href=""><li>Origin of Name</li></a>
 +
      <a href=""><li>Characteristics</li></a>
 +
      <a href=""><li>Data processing</li></a>
 +
      <a href=""><li>Algorithm</li></a>
 +
      <a href=""><li>Ranking criteria</li></a>
 +
      <a href=""><li>Additional functions</li></a>
 +
    </ul>
 +
   
 +
  </div>
 +
  <div class="picture">
 +
    <img src="img/main3.jpg" width="700px"  >
 +
  </div>
 +
 
 +
</body>

Revision as of 06:47, 2 October 2018

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////