Difference between revisions of "Template:NCKU Tainan/team css"

 
(35 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
  <style>
+
<style>
 +
 
 +
.vertical-container {
 +
  background-image: url('https://static.igem.org/mediawiki/2017/0/09/T--NCKU_Tainan--team-background.png');
 +
  background-attachment: fixed;
 +
}
 +
 
 +
 
 
@media (max-width:1023px) {
 
@media (max-width:1023px) {
 
   .col-md-4 {
 
   .col-md-4 {
Line 10: Line 17:
 
     height: 60px;
 
     height: 60px;
 
     text-align: center;
 
     text-align: center;
 +
    margin-top: 120px;
 +
    margin-bottom: 80px;
 
   }
 
   }
−
   .part h1 {
+
   #font h1 {  
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Montserrat', sans-serif !important;
−
     font-size: 72px;
+
     font-size: 60px !important;
 +
    font-weight: lighter !important;
 +
    color: #333 ;
 
   }
 
   }
 
   .flip {
 
   .flip {
Line 43: Line 54:
 
   }
 
   }
 
   .flip .card .front {
 
   .flip .card .front {
−
      position: absolute;
+
    position: absolute;
−
      z-index: 1;
+
    z-index: 1;
−
      cursor: pointer;
+
    cursor: pointer;
−
      letter-spacing: 1px;
+
    letter-spacing: 1px;
−
      margin: auto;
+
    margin: auto;
−
      border-radius: 15px;
+
    border-radius: 15px;
−
      overflow: hidden;
+
    overflow: hidden;
−
      background-color: rgba(255, 255, 255, 1);
+
    background-color: rgba(255, 255, 255, 1);
−
      letter-spacing: 1px;
+
    letter-spacing: 1px;
−
      color: rgb(8, 7, 1);
+
    color: rgb(8, 7, 1);
−
      border-radius: 15px;
+
    border-radius: 15px;
−
      overflow: hidden;
+
    overflow: hidden;
−
      cursor: pointer;
+
    cursor: pointer;
−
      padding: 15px;
+
    /*border: 10px solid transparent;*/
−
      border-width: 10px;
+
    /*padding: 15px;*/
−
      border-style: solid;
+
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
−
      -webkit-border-image: url(/assets/img/border.png) 20% stretch;
+
    /*-webkit-border-image: url(/assets/img/border.png) 20% stretch;
−
      -moz-border-image: url(/assets/img/border.png) 20% stretch;
+
    -moz-border-image: url(/assets/img/border.png) 20% stretch;*/
−
      /* Safari 3.1-5 */
+
    /* Safari 3.1-5 */
−
      -o-border-image: url(/assets/img/border.png) 20% stretch;
+
    /*-o-border-image: url(/assets/img/border.png) 20% stretch;*/
−
      /* Opera 11-12.1 */
+
    /* Opera 11-12.1 */
−
      border-image: url(/assets/img/border.png) 20% stretch;
+
    /*border-image: url(/assets/img/border.png) 20% stretch;*/
 
   }
 
   }
 
   .flip .card .back {
 
   .flip .card .back {
−
      -webkit-transform: rotatey(-180deg);
+
    -webkit-transform: rotatey(-180deg);
−
      cursor: pointer;
+
    cursor: pointer;
−
      background-color: rgba(255, 255, 255, 1);
+
    background-color: rgba(255, 255, 255, 1);
−
      letter-spacing: 1px;
+
    letter-spacing: 1px;
−
      border-radius: 15px;
+
    border-radius: 15px;
−
      overflow: hidden;
+
    overflow: hidden;
−
      border-width: 10px;
+
    /*border: 10px solid transparent;*/
−
      border-style: solid;
+
    padding-left: 15px;
−
      padding: 15px;
+
    padding-right: 15px;
−
      -webkit-border-image: url(/assets/img/border.png) 20% stretch;
+
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
−
      -moz-border-image: url(/assets/img/border.png) 20% stretch;
+
    /*-webkit-border-image: url(/assets/img/border.png) 20% stretch;
−
      /* Safari 3.1-5 */
+
    -moz-border-image: url(/assets/img/border.png) 20% stretch;*/
−
      -o-border-image: url(/assets/img/border.png) 20% stretch;
+
    /* Safari 3.1-5 */
−
      /* Opera 11-12.1 */
+
    /*-o-border-image: url(/assets/img/border.png) 20% stretch;*/
−
      border-image: url(/assets/img/border.png) 20% stretch;
+
    /* Opera 11-12.1 */
 +
    /*border-image: url(/assets/img/border.png) 20% stretch;*/
 +
    text-align: left;
  
 
   }
 
   }
 
   .namecard img {
 
   .namecard img {
−
     width: 250px;
+
     width: 300px;
−
     height: 250px;
+
     height: 300px;
−
     margin: auto;
+
     /*margin: auto;*/
−
     border-radius: 8px;
+
     border-radius: 8px 8px 0 0;
−
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+
     /*box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);*/
 
     transition-duration: 0.4s;
 
     transition-duration: 0.4s;
 
   }
 
   }
 
   .txt {
 
   .txt {
 
     position: absolute;
 
     position: absolute;
−
     width: 250px;
+
     width: 300px;
 
     height: 100px;
 
     height: 100px;
−
     top: 250px;
+
     top: 280px;
 
     text-align: center;
 
     text-align: center;
 +
    vertical-align: bottom;
 
   }
 
   }
 
   .txt h2 {
 
   .txt h2 {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Raleway', sans-serif;
−
     font-size: 28px;
+
     font-size: 23px;
−
     color: #091d20;
+
    font-style: italic;
 +
    font-weight: 700;
 +
     color: #333;
 +
    height:45px;
 
     letter-spacing: 2px;
 
     letter-spacing: 2px;
 +
    margin-top: 45px;
 
   }
 
   }
−
   .txt h5 {
+
   /*.txt h5 {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Montserrat', sans-serif;
 
     color: #0094ad;
 
     color: #0094ad;
−
     font-size: 22px;
+
     font-size: 24px;
−
     letter-spacing: 2px;
+
     letter-spacing: 4px;
 
   }
 
   }
 
   .txt HR {
 
   .txt HR {
−
     /*position:absolute;*/
+
     position:absolute;
−
     /*top:250px;*/
+
     top:250px;
 
     margin-left: auto;
 
     margin-left: auto;
 
     margin-right: auto;
 
     margin-right: auto;
Line 120: Line 138:
 
     color: rgb(129, 104, 182);
 
     color: rgb(129, 104, 182);
 
     font-size: 11px;
 
     font-size: 11px;
−
   }
+
   }*/
 
   .card .back h2 {
 
   .card .back h2 {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Montserrat', sans-serif;
 
     font-size: 24px;
 
     font-size: 24px;
−
     letter-spacing: 6px;
+
    font-weight: normal;
 +
    color: #f9cb8f;
 +
     letter-spacing: 2px;
 +
    margin: auto;
 +
    margin-top: 15px;
 +
  }
 +
  .dry .card .back h2 {
 +
    color: #75deff;
 +
  }
 +
  .wet .card .back h2 {
 +
    color: #93edd4;
 +
  }
 +
  .advisor .card .back h2 {
 +
    color: #f19181;
 
   }
 
   }
−
   .card .back span {
+
   /*.card .back span {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Montserrat', sans-serif;
 
     padding: 0px;
 
     padding: 0px;
 
     font-size: 18px;
 
     font-size: 18px;
 
     color: #0094ad;
 
     color: #0094ad;
 
     letter-spacing: 2px;
 
     letter-spacing: 2px;
−
   }
+
   }*/
 
   .card .back h5 {
 
   .card .back h5 {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Raleway', sans-serif;
−
     color: #0094ad;
+
     color: #555;
−
     font-size: 22px;
+
     font-size: 18px;
−
     letter-spacing: 4px;
+
     font-weight: normal;
 +
    /* letter-spacing: 2px; */
 +
    margin: auto;
 +
    margin-top: 8px;
 +
    line-height: normal;
 
   }
 
   }
−
   .card .back HR {
+
   /*.card .back HR {
 
     margin-left: auto;
 
     margin-left: auto;
 
     margin-right: auto;
 
     margin-right: auto;
 
   }
 
   }
 
   .card .back p {
 
   .card .back p {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Montserrat', sans-serif;
 
     width: 22 em;
 
     width: 22 em;
 
     word-wrap: break-word;
 
     word-wrap: break-word;
Line 152: Line 187:
 
     color: rgba(13, 1, 6, 0.96);
 
     color: rgba(13, 1, 6, 0.96);
 
     line-height: 24px;
 
     line-height: 24px;
−
     /*display: block;*/
+
     display: block;
−
   }
+
   }*/
 
   .flip .card .namecard .logo {
 
   .flip .card .namecard .logo {
−
     width: 80px;
+
     width: 120px;
−
     height: 106px;
+
     height: 159px;
 
     border-radius: 100%;
 
     border-radius: 100%;
 
     position: absolute;
 
     position: absolute;
 
     transition-duration: 0.5s;
 
     transition-duration: 0.5s;
 
     right: 0px;
 
     right: 0px;
−
     bottom: -20px;
+
     bottom: -35px;
−
     background-image: url(/assets/img/fish.png);
+
     background-image: url('https://static.igem.org/mediawiki/2017/f/fb/Fish.png');
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    background-position: center;
 +
    opacity: 0.1;
 +
    z-index: -1;
 
   }
 
   }
 
   /* 動畫 */
 
   /* 動畫 */
−
   .tit h1 {
+
   #font.tit h1 {
−
    /*position: absolute;*/
+
 
     text-align: center;
 
     text-align: center;
 
     font-size: 80px;
 
     font-size: 80px;
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Montserrat', sans-serif;
−
     color: rgb(55, 55, 55);
+
     color: #333;
 
     font-weight: bold;
 
     font-weight: bold;
 
     letter-spacing: 5px;
 
     letter-spacing: 5px;
−
    /*font-family: 'Open Sans', sans-serif;*/
 
 
   }
 
   }
 
   .tit {
 
   .tit {
 
     height: 200px;
 
     height: 200px;
 
     /*border: 2px solid rgb(173, 83, 213);*/
 
     /*border: 2px solid rgb(173, 83, 213);*/
 +
  }
 +
  hr {
 +
    margin-left: 35%;
 +
    margin-right: 35%;
 
   }
 
   }
  
 
}
 
}
  
−
 
−
@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
 
 
@media (min-width:1024px) {
 
@media (min-width:1024px) {
 
   .part {
 
   .part {
Line 190: Line 230:
 
     text-align: center;
 
     text-align: center;
 
   }
 
   }
−
   .part h1 {
+
   #font h1 {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Montserrat', sans-serif;
−
     font-size: 90px;
+
     font-size: 60px;
 +
    font-weight: lighter;
 +
    color: #333;
 
   }
 
   }
 
   .flip {
 
   .flip {
Line 236: Line 278:
 
       overflow: hidden;
 
       overflow: hidden;
 
       cursor: pointer;
 
       cursor: pointer;
−
       border: 10px solid transparent;
+
       /*border: 10px solid transparent;*/
−
       padding: 15px;
+
       /*padding: 15px;*/
−
       -webkit-border-image: url(/assets/img/border.png) 20% stretch;
+
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
−
       -moz-border-image: url(/assets/img/border.png) 20% stretch;
+
      /*-webkit-border-image: url(/assets/img/border.png) 20% stretch;
 +
       -moz-border-image: url(/assets/img/border.png) 20% stretch;*/
 
       /* Safari 3.1-5 */
 
       /* Safari 3.1-5 */
−
       -o-border-image: url(/assets/img/border.png) 20% stretch;
+
       /*-o-border-image: url(/assets/img/border.png) 20% stretch;*/
 
       /* Opera 11-12.1 */
 
       /* Opera 11-12.1 */
−
       border-image: url(/assets/img/border.png) 20% stretch;
+
       /*border-image: url(/assets/img/border.png) 20% stretch;*/
 
   }
 
   }
 
   .flip .card .back {
 
   .flip .card .back {
Line 252: Line 295:
 
       border-radius: 15px;
 
       border-radius: 15px;
 
       overflow: hidden;
 
       overflow: hidden;
−
       border: 10px solid transparent;
+
       /*border: 10px solid transparent;*/
−
       padding: 15px;
+
       padding-left: 15px;
−
       -webkit-border-image: url(/assets/img/border.png) 20% stretch;
+
       padding-right: 15px;
−
       -moz-border-image: url(/assets/img/border.png) 20% stretch;
+
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +
      /*-webkit-border-image: url(/assets/img/border.png) 20% stretch;
 +
       -moz-border-image: url(/assets/img/border.png) 20% stretch;*/
 
       /* Safari 3.1-5 */
 
       /* Safari 3.1-5 */
−
       -o-border-image: url(/assets/img/border.png) 20% stretch;
+
       /*-o-border-image: url(/assets/img/border.png) 20% stretch;*/
 
       /* Opera 11-12.1 */
 
       /* Opera 11-12.1 */
−
       border-image: url(/assets/img/border.png) 20% stretch;
+
       /*border-image: url(/assets/img/border.png) 20% stretch;*/
 +
      text-align: left;
  
 
   }
 
   }
 
   .namecard img {
 
   .namecard img {
−
     width: 250px;
+
     width: 300px;
−
     height: 250px;
+
     height: 300px;
−
     margin: auto;
+
     /*margin: auto;*/
−
     border-radius: 8px;
+
     border-radius: 8px 8px 0 0;
−
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+
     /*box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);*/
 
     transition-duration: 0.4s;
 
     transition-duration: 0.4s;
 
   }
 
   }
Line 273: Line 319:
 
   .txt {
 
   .txt {
 
     position: absolute;
 
     position: absolute;
−
     width: 250px;
+
     width: 300px;
 
     height: 100px;
 
     height: 100px;
−
     top: 250px;
+
     top: 280px;
 
     text-align: center;
 
     text-align: center;
−
 
+
    vertical-align: bottom;
 
   }
 
   }
 
   .txt h2 {
 
   .txt h2 {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Raleway', sans-serif;
−
     font-size: 28px;
+
     font-size: 23px;
−
     color: #091d20;
+
    font-style: italic;
 +
    font-weight: 700;
 +
    height:45px;
 +
     color: #333;
 
     letter-spacing: 2px;
 
     letter-spacing: 2px;
 +
    margin-top: 45px ;
 
   }
 
   }
−
   .txt h5 {
+
   .card .back h2 {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Montserrat', sans-serif;
−
     color: #0094ad;
+
     font-size: 24px;
−
     font-size: 22px;
+
     font-weight: normal;
 +
    color: #f9cb8f;
 
     letter-spacing: 2px;
 
     letter-spacing: 2px;
−
     z-index: 2;
+
     margin: auto;
 +
    margin-top: 15px;
 
   }
 
   }
−
   .txt HR {
+
   .dry .card .back h2 {
−
     /*position:absolute;*/
+
     color: #75deff;
−
    /*top:250px;*/
+
−
    margin-left: auto;
+
−
    margin-right: auto;
+
 
   }
 
   }
−
   .txt span {
+
   .wet .card .back h2 {
−
     color: rgb(129, 104, 182);
+
     color: #93edd4;
−
    font-size: 11px;
+
 
   }
 
   }
−
   .card .back h2 {
+
   .advisor .card .back h2 {
−
     font-family: 'Nanum Pen Script', cursive;
+
     color: #f19181;
−
    font-size: 24px;
+
−
    letter-spacing: 6px;
+
 
   }
 
   }
−
   .card .back span {
+
   .card .back h5 {
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Raleway', sans-serif;
−
     padding: 0px;
+
     color: #555;
 
     font-size: 18px;
 
     font-size: 18px;
−
    color: #0094ad;
+
     font-weight: normal;
−
    letter-spacing: 2px;
+
     /* letter-spacing: 2px; */
−
  }
+
     margin: auto;
−
  .card .back h5 {
+
     margin-top: 8px;
−
     font-family: 'Nanum Pen Script', cursive;
+
     line-height: normal;
−
    color: #0094ad;
+
−
    font-size: 22px;
+
−
     letter-spacing: 4px;
+
−
  }
+
−
  .card .back HR {
+
−
     margin-left: auto;
+
−
     margin-right: auto;
+
−
  }
+
−
  .card .back p {
+
−
    font-family: 'Nanum Pen Script', cursive;
+
−
    width: 22 em;
+
−
    word-wrap: break-word;
+
−
    font-size: 24px;
+
−
    font-weight: 900;
+
−
    word-wrap: break-word;
+
−
    color: rgba(13, 1, 6, 0.96);
+
−
     line-height: 24px;
+
−
    /*display: block;*/
+
 
   }
 
   }
 
   .flip .card .namecard .logo {
 
   .flip .card .namecard .logo {
−
     width: 80px;
+
     width: 120px;
−
     height: 106px;
+
     height: 159px;
 
     border-radius: 100%;
 
     border-radius: 100%;
 
     position: absolute;
 
     position: absolute;
 
     transition-duration: 0.5s;
 
     transition-duration: 0.5s;
 
     right: 0px;
 
     right: 0px;
−
     bottom: -20px;
+
     bottom: -35px;
−
     background-image: url(/assets/img/fish.png);
+
     background-image: url('https://static.igem.org/mediawiki/2017/f/fb/Fish.png');
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    background-position: center;
 +
    opacity: 0.1;
 +
    z-index: -1;
 
   }
 
   }
−
 
+
  /* 動畫 */
−
   .tit h1 {
+
   #font.tit h1 {
−
    /*position: absolute;*/
+
 
     text-align: center;
 
     text-align: center;
−
     font-size: 80px;
+
     font-size: 120px;
−
     font-family: 'Nanum Pen Script', cursive;
+
     font-family: 'Montserrat', sans-serif;
−
     color: rgb(55, 55, 55);
+
     color: #333;
 
     font-weight: bold;
 
     font-weight: bold;
 
     letter-spacing: 5px;
 
     letter-spacing: 5px;
−
    /*font-family: 'Open Sans', sans-serif;*/
 
 
   }
 
   }
 
   .tit {
 
   .tit {
Line 360: Line 391:
 
     /*border: 2px solid rgb(173, 83, 213);*/
 
     /*border: 2px solid rgb(173, 83, 213);*/
 
   }
 
   }
 +
  hr {
 +
    margin-left: 46%;
 +
    margin-right: 46%;
 +
  }
 +
 
}
 
}
 +
 +
.part {
 +
  margin-top: 70px;
 +
}
 +
 +
.teacher {
 +
  width: 350px;
 +
  height: 460px;
 +
}
 +
.teacher .namecard img {
 +
  width: 350px;
 +
  height: 350px;
 +
}
 +
.teacher .txt {
 +
  width: 350px;
 +
  margin-top: 50px;
 +
}
 +
.teacher .txt h2 {
 +
  /*font-size: 48px;*/
 +
}
 +
.teacher p {
 +
  font-family: 'Raleway', sans-serif;
 +
  width: 330px;
 +
  word-wrap: break-word;
 +
  font-size: 17px;
 +
  font-weight: normal;
 +
  word-wrap: break-word;
 +
  color: rgba(13, 1, 6, 0.96);
 +
  padding: 5px;
 +
  line-height: 20px;
 +
  display: block;
 +
  margin-top: 10px;
 +
}
 +
hr {
 +
  height: 5px;
 +
  border: 0;
 +
  padding: 0;
 +
  background-color: #f9cb8f;;
 +
  margin-bottom: 45px;
 +
}
 +
.dryhr {
 +
  background-color: #75deff;
 +
}
 +
.wethr {
 +
  background-color: #93edd4;
 +
}
 +
.advisorhr {
 +
  background-color: #f19181;
 +
}
 +
 +
}
 +
 +
 +
 +
 +
 +
 
</style>
 
</style>
 
   <script>
 
   <script>

Latest revision as of 13:48, 31 October 2017