Difference between revisions of "Team:SZU-China/HP Demo"

Line 5: Line 5:
  
 
</head>
 
</head>
<style>
 
.portfolio-item {
 
  display: block;
 
  position: relative;
 
  overflow: hidden;
 
  max-width: 530px;
 
  margin: auto auto 1rem;
 
}
 
  
.portfolio-item .caption {
+
<body>
  display: -webkit-box;
+
  display: -ms-flexbox;
+
<div class="row"></div>
  display: flex;
+
  height: 100%;
+
  width: 100%;
+
  background-color: rgba(33, 37, 41, 0.2);
+
  position: absolute;
+
  top: 0;
+
  bottom: 0;
+
  z-index: 1;
+
}
+
 
+
.portfolio-item .caption .caption-content {
+
  color: #fff;
+
  margin: auto 1rem 1rem;
+
}
+
 
+
.portfolio-item .caption .caption-content h2 {
+
  font-size: 2rem;
+
  /*text-transform: uppercase;*/
+
}
+
 
+
.portfolio-item .caption .caption-content p {
+
  font-weight: 400;
+
  font-size: 1.2rem;
+
}
+
 
+
@media (min-width: 992px) {
+
  .portfolio-item {
+
    max-width: none;
+
    margin: 0;
+
  }
+
  .portfolio-item .caption {
+
    -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
+
    -webkit-clip-path: inset(0px);
+
    clip-path: inset(0px);
+
  }
+
  .portfolio-item .caption .caption-content {
+
    -webkit-transition: opacity 0.25s;
+
    transition: opacity 0.25s;
+
    margin-left: 2.5rem;
+
    margin-right: 2.5rem;
+
    margin-bottom: 3rem;
+
  }
+
  .portfolio-item img {
+
    -webkit-transition: -webkit-clip-path 0.25s ease-out;
+
    -webkit-clip-path: inset(-1px);
+
    clip-path: inset(-1px);
+
  }
+
  .portfolio-item:hover img {
+
    -webkit-clip-path: inset(2rem);
+
    clip-path: inset(2rem);
+
  }
+
  .portfolio-item:hover .caption {
+
    background-color: rgba(29, 128, 159, 0.9);
+
    -webkit-clip-path: inset(2rem);
+
    clip-path: inset(2rem);
+
  }
+
}
+
#HQ_page p {
+
    font-size: 20px;
+
    color: #fff;
+
 
+
h2{
+
    font-weight: bold;
+
font-weight: 500;
+
    }
+
</style>
+
+
<body data-spy="scroll" data-target="#myScrollspy" data-offset="10">
+
<div class="row"></div>
+
 
<div class="text-center">
 
<div class="text-center">
<h1>Human Practices</h1>
+
<h1 style="color: #3880A0;">Human Practices</h1>
 
</div>
 
</div>
 
<div class="row">
 
<div class="row">
Line 279: Line 202:
 
</div>
 
</div>
  
   
 
</body>
 
  
 +
</body>
  
  

Revision as of 17:34, 16 October 2018

Human Practices

Applet
At the beginning of 2018 SZU-China team, we had a brainstorming to decide our topic. We carried out three topics which were all close to daily lives and we didn’t know which to choose.
To strengthen the communication between iGEM and the public, we designed an applet named biocompany and post our ideas there. It’s a platform for the public to engage in the iGEM.
With the comments that people gave in Biocompany, we finally decided our project, cockroach terminator. For more details about our applet, please read our applet part.