Difference between revisions of "Team:NCKU Tainan"

Line 837: Line 837:
 
    
 
    
  
 
+
 
  /*new card*/
+
 
+
 
+
.container{
+
    width: 1200px;
+
    display: grid;
+
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+
    grid-gap: 15px;
+
    margin: 0 auto;
+
  }
+
 
+
  .cardabc{
+
    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 .faceabc{
+
    position: absolute;
+
    bottom: 0;
+
    left: 0;
+
    width: 100%;
+
    height: 100%;
+
    display: flex;
+
    justify-content: center;
+
    align-items: center;
+
  }
+
 
+
  .card .face.face1abc{
+
    box-sizing: border-box;
+
    padding: 20px;
+
  }
+
 
+
  .card .face.face1abc h2{
+
    margin: 0;
+
    padding: 0;
+
  }
+
 
+
  .card .face.face1abc .content{
+
    font-size:1.2em;
+
    margin:0;
+
    padding:0 0 1em 0;
+
    font-weight:500;
+
  }
+
 
+
  .card .face.face2abc{
+
    background: #111;
+
    transition: 0.5s;
+
  }
+
 
+
  .card:nth-child(1) .face.face2abc{
+
    background: linear-gradient(45deg, #3503ad, #f7308c);
+
    border-radius: 15px;
+
  }
+
 
+
  .card:nth-child(2) .face.face2abc{
+
    background: linear-gradient(45deg, #ccff00, #09afff);
+
    border-radius: 15px;
+
  }
+
 
+
  .card:nth-child(3) .face.face2abc{
+
    background: linear-gradient(45deg, #e91e63, #ffeb3b);
+
    border-radius: 15px;
+
  }
+
 
+
  .card:hover .face.face2abc{
+
    height: 60px;
+
    border-radius: 0 0 15px 15px;
+
  }
+
 
+
  .card .face.face2abc: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.face2abc 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.face2abc h2{
+
    font-size: 2em;
+
  }
+
  
 
</style>
 
</style>
Line 1,294: Line 1,197:
 
         </section>  
 
         </section>  
 
      
 
      
   
+
    <section>
+
      <div class="container">
+
    <div class="cardabc">
+
      <div class="face face1abc">
+
        <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 face2abc">
+
        <h2>01</h2>
+
      </div>
+
    </div>
+
    <div class="cardabc">
+
      <div class="face face1abc">
+
        <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 face2abc">
+
        <h2>02</h2>
+
      </div>
+
    </div>
+
    <div class="cardabc">
+
      <div class="face face1abc">
+
        <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 face2abc">
+
        <h2>03</h2>
+
      </div>
+
    </div>
+
  </div>
+
</section>
+
 
+
 
    
 
    
 
<br></br>
 
<br></br>
Line 1,477: Line 1,342:
 
         });
 
         });
 
</script>
 
</script>
<script>
 
  document.getElementById("EUmark1").addEventListener("mouseover", function() {
 
  document.getElementById("Europe1").style.visibility = "visible";
 
  document.getElementById("Africa1").style.visibility = "hidden";
 
  document.getElementById("Taiwan1").style.visibility = "hidden";
 
  document.getElementById("East_Asia1").style.visibility = "hidden";
 
  document.getElementById("South_Asia1").style.visibility = "hidden";
 
  document.getElementById("America1").style.visibility = "hidden";   
 
}); 
 
  document.getElementById("AFmark1").addEventListener("mouseover", function() {
 
  document.getElementById("Africa1").style.visibility = "visible";
 
  document.getElementById("Europe1").style.visibility = "hidden";
 
  document.getElementById("Taiwan1").style.visibility = "hidden";
 
  document.getElementById("East_Asia1").style.visibility = "hidden";
 
  document.getElementById("South_Asia1").style.visibility = "hidden"; 
 
  document.getElementById("America1").style.visibility = "hidden";       
 
}); 
 
  document.getElementById("TWmark1").addEventListener("mouseover", function() {
 
  document.getElementById("Taiwan1").style.visibility = "visible";
 
  document.getElementById("Europe1").style.visibility = "hidden";
 
  document.getElementById("Africa1").style.visibility = "hidden";
 
  document.getElementById("East_Asia1").style.visibility = "hidden"; 
 
  document.getElementById("South_Asia1").style.visibility = "hidden";
 
  document.getElementById("America1").style.visibility = "hidden";       
 
}); 
 
  document.getElementById("EAmark1").addEventListener("mouseover", function() {
 
  document.getElementById("East_Asia1").style.visibility = "visible";
 
  document.getElementById("Europe1").style.visibility = "hidden";
 
  document.getElementById("Africa1").style.visibility = "hidden";
 
  document.getElementById("Taiwan1").style.visibility = "hidden";
 
  document.getElementById("South_Asia1").style.visibility = "hidden";
 
  document.getElementById("America1").style.visibility = "hidden";       
 
}); 
 
  document.getElementById("SAmark1").addEventListener("mouseover", function() {
 
  document.getElementById("South_Asia1").style.visibility = "visible";
 
  document.getElementById("Europe1").style.visibility = "hidden";
 
  document.getElementById("Africa1").style.visibility = "hidden";
 
  document.getElementById("Taiwan1").style.visibility = "hidden";
 
  document.getElementById("East_Asia1").style.visibility = "hidden";
 
  document.getElementById("America1").style.visibility = "hidden";       
 
}); 
 
  document.getElementById("AMmark1").addEventListener("mouseover", function() {
 
  document.getElementById("America1").style.visibility = "visible";
 
  document.getElementById("Europe1").style.visibility = "hidden";
 
  document.getElementById("Africa1").style.visibility = "hidden";
 
  document.getElementById("Taiwan1").style.visibility = "hidden";
 
  document.getElementById("East_Asia1").style.visibility = "hidden";
 
  document.getElementById("South_Asia1").style.visibility = "hidden";   
 
}); 
 
  
 
 
</script> 
 
 
<script>
 
  document.getElementById("EUmark").addEventListener("mouseover", function() {
 
  document.getElementById("Europe").style.visibility = "visible";
 
  document.getElementById("Africa").style.visibility = "hidden";
 
  document.getElementById("Taiwan").style.visibility = "hidden";
 
  document.getElementById("East_Asia").style.visibility = "hidden";
 
  document.getElementById("South_Asia").style.visibility = "hidden";
 
  document.getElementById("America").style.visibility = "hidden";   
 
}); 
 
  document.getElementById("AFmark").addEventListener("mouseover", function() {
 
  document.getElementById("Africa").style.visibility = "visible";
 
  document.getElementById("Europe").style.visibility = "hidden";
 
  document.getElementById("Taiwan").style.visibility = "hidden";
 
  document.getElementById("East_Asia").style.visibility = "hidden";
 
  document.getElementById("South_Asia").style.visibility = "hidden"; 
 
  document.getElementById("America").style.visibility = "hidden";       
 
}); 
 
  document.getElementById("TWmark").addEventListener("mouseover", function() {
 
  document.getElementById("Taiwan").style.visibility = "visible";
 
  document.getElementById("Europe").style.visibility = "hidden";
 
  document.getElementById("Africa").style.visibility = "hidden";
 
  document.getElementById("East_Asia").style.visibility = "hidden"; 
 
  document.getElementById("South_Asia").style.visibility = "hidden";
 
  document.getElementById("America").style.visibility = "hidden";       
 
}); 
 
  document.getElementById("EAmark").addEventListener("mouseover", function() {
 
  document.getElementById("East_Asia").style.visibility = "visible";
 
  document.getElementById("Europe").style.visibility = "hidden";
 
  document.getElementById("Africa").style.visibility = "hidden";
 
  document.getElementById("Taiwan").style.visibility = "hidden";
 
  document.getElementById("South_Asia").style.visibility = "hidden";
 
  document.getElementById("America").style.visibility = "hidden";       
 
}); 
 
  document.getElementById("SAmark").addEventListener("mouseover", function() {
 
  document.getElementById("South_Asia").style.visibility = "visible";
 
  document.getElementById("Europe").style.visibility = "hidden";
 
  document.getElementById("Africa").style.visibility = "hidden";
 
  document.getElementById("Taiwan").style.visibility = "hidden";
 
  document.getElementById("East_Asia").style.visibility = "hidden";
 
  document.getElementById("America").style.visibility = "hidden";       
 
}); 
 
  document.getElementById("AMmark").addEventListener("mouseover", function() {
 
  document.getElementById("America").style.visibility = "visible";
 
  document.getElementById("Europe").style.visibility = "hidden";
 
  document.getElementById("Africa").style.visibility = "hidden";
 
  document.getElementById("Taiwan").style.visibility = "hidden";
 
  document.getElementById("East_Asia").style.visibility = "hidden";
 
  document.getElementById("South_Asia").style.visibility = "hidden";   
 
}); 
 
 
 
 
</script> 
 
  
  

Revision as of 11:49, 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


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