Difference between revisions of "Team:NCKU Tainan"

Line 838: Line 838:
  
 
    
 
    
−
   
+
  /*new card*/
 +
 
 +
 
 +
  .container{
 +
    width: 1200px;
 +
    display: grid;
 +
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 +
    grid-gap: 15px;
 +
    margin: 0 auto;
 +
  }
 +
 
 +
  .card{
 +
    position: relative;
 +
    width: 350px;
 +
    height: 400px;
 +
    margin: 0 auto;
 +
    background: #fff;
 +
    box-shadow: 0 15px 60px rgba(0,0,0, .5);
 +
    border-radius: 15px;
 +
  }
 +
 
 +
  .card .face{
 +
    position: absolute;
 +
    bottom: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
  }
 +
 
 +
  .card .face.face1{
 +
    box-sizing: border-box;
 +
    padding: 20px;
 +
  }
 +
 
 +
  .card .face.face1 h2{
 +
    margin: 0;
 +
    padding: 0;
 +
  }
 +
 
 +
  .card .face.face1 .content{
 +
    font-size:1.2em;
 +
    margin:0;
 +
    padding:0 0 1em 0;
 +
    font-weight:500;
 +
  }
 +
 
 +
  .card .face.face2{
 +
    background: #111;
 +
    transition: 0.5s;
 +
  }
 +
 
 +
  .card:nth-child(1) .face.face2{
 +
    background: linear-gradient(45deg, #3503ad, #f7308c);
 +
    border-radius: 15px;
 +
  }
 +
 
 +
  .card:nth-child(2) .face.face2{
 +
    background: linear-gradient(45deg, #ccff00, #09afff);
 +
    border-radius: 15px;
 +
  }
 +
 
 +
  .card:nth-child(3) .face.face2{
 +
    background: linear-gradient(45deg, #e91e63, #ffeb3b);
 +
    border-radius: 15px;
 +
  }
 +
 
 +
  .card:hover .face.face2{
 +
    height: 60px;
 +
    border-radius: 0 0 15px 15px;
 +
  }
 +
 
 +
  .card .face.face2:before{
 +
    content:'';
 +
    position: absolute;
 +
    top:0;
 +
    left:0;
 +
    width: 50%;
 +
    height: 100%;
 +
    background: rgba(255,255,255, 0.1);
 +
    border-radius: 15px 0 0 15px;
 +
  }
 +
 
 +
  .card .face.face2 h2{
 +
    margin: 0;
 +
    padding: 0;
 +
    font-size: 10em;
 +
    color: #fff;
 +
    transition: 0.5s;
 +
    text-shadow: 0 2px 5px rgba(0,0,0, .2);
 +
  }
 +
 
 +
  .card:hover .face.face2 h2{
 +
    font-size: 2em;
 +
  }
  
 
</style>
 
</style>
Line 1,198: Line 1,294:
 
         </section>  
 
         </section>  
 
      
 
      
−
        
+
   
 +
    <section>
 +
      <div class="container">
 +
    <div class="cardabc">
 +
       <div class="face face1">
 +
        <div class="content">
 +
          <h2>Lorem Ipsum</h2>
 +
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
 +
        </div>
 +
      </div>
 +
      <div class="face face2">
 +
        <h2>01</h2>
 +
      </div>
 +
    </div>
 +
    <div class="cardabc">
 +
      <div class="face face1">
 +
        <div class="content">
 +
          <h2>Lorem Ipsum</h2>
 +
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
 +
        </div>
 +
      </div>
 +
      <div class="face face2">
 +
        <h2>02</h2>
 +
      </div>
 +
    </div>
 +
    <div class="cardabc">
 +
      <div class="face face1">
 +
        <div class="content">
 +
          <h2>Lorem Ipsum</h2>
 +
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
 +
        </div>
 +
      </div>
 +
      <div class="face face2">
 +
        <h2>03</h2>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</section>
  
 
    
 
    

Revision as of 11:45, 14 October 2021

MenTAUR

MenTAUR, your live's mentor

s1
s1
s1

MenTAUR

MenTAUR,your live’s mentor. We aim to provide a special solution for the above problem.Learn more on our description page!

s1
s1

Menble

Bubble milk tea has always been a popular drink in the world, and it comes from the land we live in, Taiwan. Learn more on our description page!

s1

f(int)

In order to know if the bubbles could work well after eating them, we have come up with a microfluidic chip that can simulate the environment of the human intestine.Learn more on our hardware page!

s1
s1
s1
s1

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry when an unknown printer took a galley of type and scrambled it to make a type specimen book.

01

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry when an unknown printer took a galley of type and scrambled it to make a type specimen book.

02

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry when an unknown printer took a galley of type and scrambled it to make a type specimen book.

03



References

  1. Kessler RC, Bromet EJ. The Epidemiology of Depression Across Cultures. Annual Review of Public Health. 2013;34(1):119-138. doi:10.1146/annurev-publhealth-031912-114409
  2. Nochaiwong S, Ruengorn C, Thavorn K, et al. Global prevalence of mental health issues among the general population during the coronavirus disease-2019 pandemic: a systematic review and meta-analysis. Scientific Reports. 2021;11(1). doi:10.1038/s41598-021-89700-8


e-mail : igem.ncku.tainan@gmail.com
phone : 06-2757575