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

Line 19: Line 19:
 
     margin-bottom: 80px;
 
     margin-bottom: 80px;
 
   }
 
   }
−
   .part h1 {
+
   #paragraph.part h1 {
 
     font-family: 'Montserrat', sans-serif;
 
     font-family: 'Montserrat', sans-serif;
−
     font-size: 40px;
+
     font-size: 40px !important;
 
     color: #333;
 
     color: #333;
 
   }
 
   }
Line 41: Line 41:
 
       -webkit-transition: 0.5s;
 
       -webkit-transition: 0.5s;
 
   }
 
   }
−
   .flip .card .namecard {
+
   #paragraph.flip .card .namecard {
 
       width: 100%;
 
       width: 100%;
 
       height: 100%;
 
       height: 100%;
Line 47: Line 47:
 
       -webkit-backface-visibility: hidden;
 
       -webkit-backface-visibility: hidden;
 
       z-index: 2;
 
       z-index: 2;
−
       font-size: 3em;
+
       font-size: 3em !important;
 
       text-align: center;
 
       text-align: center;
 
       line-height: 200px;
 
       line-height: 200px;
Line 111: Line 111:
 
     vertical-align: bottom;
 
     vertical-align: bottom;
 
   }
 
   }
−
   .txt h2 {
+
   #paragraph.txt h2 {
 
     font-family: 'Raleway', sans-serif;
 
     font-family: 'Raleway', sans-serif;
 
     font-size: 30px !important;
 
     font-size: 30px !important;
Line 120: Line 120:
 
     margin-top: 45px;
 
     margin-top: 45px;
 
   }
 
   }
−
   /*.txt h5 {
+
 +
   #paragraph.card .back h2 {
 
     font-family: 'Montserrat', sans-serif;
 
     font-family: 'Montserrat', sans-serif;
−
    color: #0094ad;
+
     font-size: 24px !important;
−
    font-size: 24px;
+
−
    letter-spacing: 4px;
+
−
  }
+
−
  .txt HR {
+
−
    position:absolute;
+
−
    top:250px;
+
−
    margin-left: auto;
+
−
    margin-right: auto;
+
−
  }
+
−
  .txt span {
+
−
    color: rgb(129, 104, 182);
+
−
    font-size: 11px;
+
−
  }*/
+
−
  .card .back h2 {
+
−
    font-family: 'Montserrat', sans-serif;
+
−
     font-size: 24px;
+
 
     font-weight: normal;
 
     font-weight: normal;
 
     color: #f9cb8f;
 
     color: #f9cb8f;
Line 154: Line 139:
 
     color: #f19181;
 
     color: #f19181;
 
   }
 
   }
−
   /*.card .back span {
+
    
−
    font-family: 'Montserrat', sans-serif;
+
  #paragraph.card .back h5 {
−
    padding: 0px;
+
−
    font-size: 18px;
+
−
    color: #0094ad;
+
−
    letter-spacing: 2px;
+
−
  }*/
+
−
  .card .back h5 {
+
 
     font-family: 'Raleway', sans-serif;
 
     font-family: 'Raleway', sans-serif;
 
     color: #555;
 
     color: #555;
−
     font-size: 18px;
+
     font-size: 18px !important;
 
     font-weight: normal;
 
     font-weight: normal;
 
     /* letter-spacing: 2px; */
 
     /* letter-spacing: 2px; */
Line 171: Line 150:
 
     line-height: normal;
 
     line-height: normal;
 
   }
 
   }
−
   /*.card .back HR {
+
    
−
    margin-left: auto;
+
−
    margin-right: auto;
+
−
  }
+
−
  .card .back p {
+
−
    font-family: 'Montserrat', sans-serif;
+
−
    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: 120px;
 
     width: 120px;
Line 202: Line 167:
 
   }
 
   }
 
   /* 動畫 */
 
   /* 動畫 */
−
   .tit h1 {
+
   #paragraph.tit h1 {
 
     text-align: center;
 
     text-align: center;
−
     font-size: 80px;
+
     font-size: 80px !important;
 
     font-family: 'Montserrat', sans-serif;
 
     font-family: 'Montserrat', sans-serif;
 
     color: #333;
 
     color: #333;
Line 211: Line 176:
 
   }
 
   }
 
   .tit {
 
   .tit {
−
     height: 200px;
+
     height: 200px;  
−
    /*border: 2px solid rgb(173, 83, 213);*/
+
 
   }
 
   }
 
   hr {
 
   hr {
Line 227: Line 191:
 
     text-align: center;
 
     text-align: center;
 
   }
 
   }
−
   .part h1 {
+
   #paragraph.part h1 {
 
     font-family: 'Montserrat', sans-serif;
 
     font-family: 'Montserrat', sans-serif;
−
     font-size: 60px;
+
     font-size: 60px !important;
 
     font-weight: lighter;
 
     font-weight: lighter;
 
     color: #333;
 
     color: #333;
Line 250: Line 214:
 
       -webkit-transition: 0.5s;
 
       -webkit-transition: 0.5s;
 
   }
 
   }
−
   .flip .card .namecard {
+
   #paragraph.flip .card .namecard {
 
       width: 100%;
 
       width: 100%;
 
       height: 100%;
 
       height: 100%;
Line 257: Line 221:
 
       z-index: 2;
 
       z-index: 2;
 
       font-family: Georgia;
 
       font-family: Georgia;
−
       font-size: 3em;
+
       font-size: 3em !important;
 
       text-align: center;
 
       text-align: center;
 
       line-height: 200px;
 
       line-height: 200px;
Line 274: Line 238:
 
       border-radius: 15px;
 
       border-radius: 15px;
 
       overflow: hidden;
 
       overflow: hidden;
−
       cursor: pointer;
+
       cursor: pointer;    
−
      /*border: 10px solid transparent;*/
+
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);    
−
      /*padding: 15px;*/
+
−
       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 */
+
−
      /*-o-border-image: url(/assets/img/border.png) 20% stretch;*/
+
−
      /* Opera 11-12.1 */
+
−
      /*border-image: url(/assets/img/border.png) 20% stretch;*/
+
 
   }
 
   }
 
   .flip .card .back {
 
   .flip .card .back {
Line 292: Line 248:
 
       border-radius: 15px;
 
       border-radius: 15px;
 
       overflow: hidden;
 
       overflow: hidden;
−
      /*border: 10px solid transparent;*/
 
 
       padding-left: 15px;
 
       padding-left: 15px;
 
       padding-right: 15px;
 
       padding-right: 15px;
−
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
       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 */
+
−
      /*-o-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;
 
       text-align: left;
  
Line 307: Line 256:
 
   .namecard img {
 
   .namecard img {
 
     width: 300px;
 
     width: 300px;
−
     height: 300px;
+
     height: 300px;  
−
    /*margin: auto;*/
+
     border-radius: 8px 8px 0 0;  
−
     border-radius: 8px 8px 0 0;
+
−
    /*box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);*/
+
 
     transition-duration: 0.4s;
 
     transition-duration: 0.4s;
 
   }
 
   }
Line 322: Line 269:
 
     vertical-align: bottom;
 
     vertical-align: bottom;
 
   }
 
   }
−
   .txt h2 {
+
   #paragraph.txt h2 {
 
     font-family: 'Raleway', sans-serif;
 
     font-family: 'Raleway', sans-serif;
−
     font-size: 30px;
+
     font-size: 30px !important;
 
     font-style: italic;
 
     font-style: italic;
 
     font-weight: 700;
 
     font-weight: 700;
Line 331: Line 278:
 
     margin-top: 45px;
 
     margin-top: 45px;
 
   }
 
   }
−
   .card .back h2 {
+
   #paragraph.card .back h2 {
 
     font-family: 'Montserrat', sans-serif;
 
     font-family: 'Montserrat', sans-serif;
−
     font-size: 24px;
+
     font-size: 24px important;
 
     font-weight: normal;
 
     font-weight: normal;
 
     color: #f9cb8f;
 
     color: #f9cb8f;
Line 349: Line 296:
 
     color: #f19181;
 
     color: #f19181;
 
   }
 
   }
−
   .card .back h5 {
+
   #paragraph.card .back h5 {
 
     font-family: 'Raleway', sans-serif;
 
     font-family: 'Raleway', sans-serif;
 
     color: #555;
 
     color: #555;
−
     font-size: 18px;
+
     font-size: 18px !impotant;
 
     font-weight: normal;
 
     font-weight: normal;
 
     /* letter-spacing: 2px; */
 
     /* letter-spacing: 2px; */
Line 375: Line 322:
 
   }
 
   }
 
   /* 動畫 */
 
   /* 動畫 */
−
   .tit h1 {
+
   #paragraph.tit h1 {
 
     text-align: center;
 
     text-align: center;
−
     font-size: 120px;
+
     font-size: 120px !important;
 
     font-family: 'Montserrat', sans-serif;
 
     font-family: 'Montserrat', sans-serif;
 
     color: #333;
 
     color: #333;
Line 411: Line 358:
 
}
 
}
 
.teacher .txt h2 {
 
.teacher .txt h2 {
−
   /*font-size: 48px;*/
+
    
 
}
 
}
−
.teacher p {
+
#paragraph.teacher p {
 
   font-family: 'Raleway', sans-serif;
 
   font-family: 'Raleway', sans-serif;
 
   width: 330px;
 
   width: 330px;
 
   word-wrap: break-word;
 
   word-wrap: break-word;
−
   font-size: 17px;
+
   font-size: 17px !important;
 
   font-weight: normal;
 
   font-weight: normal;
 
   word-wrap: break-word;
 
   word-wrap: break-word;
Line 442: Line 389:
 
   background-color: #f19181;
 
   background-color: #f19181;
 
}
 
}
−
 
−
 
−
 
−
@media (min-width:10240px) {
 
−
  .part {
 
−
    width: auto;
 
−
    height: 100px;
 
−
    text-align: center;
 
−
  }
 
−
  .part h1 {
 
−
    font-family: 'Montserrat', sans-serif;
 
−
    font-size: 90px;
 
−
  }
 
−
  .flip {
 
−
  -webkit-perspective: 800;
 
−
          perspective: 800;
 
−
  }
 
−
  .flip .card.flipped {
 
−
    -webkit-transform: rotatey(-180deg);
 
−
    -moz-transform: rotatey(-180deg);
 
−
    -o-transform: rotatey(-180deg);
 
−
    transform: rotatey(-180deg);
 
−
  }
 
−
  .flip .card {
 
−
    width: 300px;
 
−
    height: 400px;
 
−
    margin: auto;
 
−
    -webkit-transform-style: preserve-3d;
 
−
    -webkit-transition: 0.5s;
 
−
    -moz-transform-style: preserve-3d;
 
−
    -moz-transition: 0.5s;
 
−
    -o-transform-style: preserve-3d;
 
−
    -o-transition: 0.5s;
 
−
    transform-style: preserve-3d;
 
−
    transition: 0.5s;
 
−
    background-color: #fff;
 
−
  }
 
−
  .flip .card .namecard {
 
−
    -webkit-backface-visibility: hidden;
 
−
    -moz-backface-visibility: hidden;
 
−
    -o-backface-visibility: hidden;
 
−
    backface-visibility: hidden;
 
−
    z-index: 2;
 
−
  }
 
−
  .flip .card .front {
 
−
    position: absolute;
 
−
    width: 300px;
 
−
    height: 400px;
 
−
    letter-spacing: 1px;
 
−
    margin: auto;
 
−
    border-radius: 15px;
 
−
    overflow: hidden;
 
−
    z-index: 100;
 
−
    cursor: pointer;
 
−
    background-color: rgba(255, 255, 255, 1);
 
−
    letter-spacing: 1px;
 
−
    color: rgb(8, 7, 1);
 
−
    border-radius: 15px;
 
−
    overflow: hidden;
 
−
    cursor: pointer;
 
−
    border: 10px solid transparent;
 
−
    padding: 15px;
 
−
    -webkit-border-image: url(/assets/img/border.png) 20% stretch;
 
−
    -moz-border-image: url(/assets/img/border.png) 20% stretch;
 
−
    /* Safari 3.1-5 */
 
−
    -o-border-image: url(/assets/img/border.png) 20% stretch;
 
−
    /* Opera 11-12.1 */
 
−
    border-image: url(/assets/img/border.png) 20% stretch;
 
−
    z-index: 1;
 
−
  }
 
−
  .flip .card .back {
 
−
    width: 300px;
 
−
    height: 400px;
 
−
    letter-spacing: 1px;
 
−
    margin: auto;
 
−
    border-radius: 15px;
 
−
    overflow: hidden;
 
−
    z-index: 100;
 
−
    cursor: pointer;
 
−
    background-color: rgba(255, 255, 255, 1);
 
−
    letter-spacing: 1px;
 
−
    color: rgb(8, 7, 1);
 
−
    border-radius: 15px;
 
−
    overflow: hidden;
 
−
    border: 10px solid transparent;
 
−
    padding: 15px;
 
−
    -webkit-border-image: url(/assets/img/border.png) 20% stretch;
 
−
    -moz-border-image: url(/assets/img/border.png) 20% stretch;
 
−
    /* Safari 3.1-5 */
 
−
    -o-border-image: url(/assets/img/border.png) 20% stretch;
 
−
    /* Opera 11-12.1 */
 
−
    border-image: url(/assets/img/border.png) 20% stretch;
 
−
    padding-top: 10%;
 
−
    -webkit-transform: rotatey(-180deg);
 
−
    -moz-transform: rotatey(-180deg);
 
−
    -o-transform: rotatey(-180deg);
 
−
    transform: rotatey(-180deg);
 
−
  }
 
−
  .namecard img {
 
−
    position: absolute;
 
−
    width: 250px;
 
−
    height: 250px;
 
−
    margin: auto;
 
−
    border-radius: 8px;
 
−
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
 
−
    transition-duration: 0.4s;
 
−
  }
 
−
  .txt {
 
−
    position: absolute;
 
−
    width: 250px;
 
−
    height: 100px;
 
−
    top: 280px;
 
−
    text-align: center;
 
−
  }
 
−
  .txt h2 {
 
−
    font-family: 'Montserrat', sans-serif;
 
−
    font-size: 28px;
 
−
    color: #091d20;
 
−
    letter-spacing: 2px;
 
−
  }
 
−
  .txt h5 {
 
−
    font-family: 'Montserrat', sans-serif;
 
−
    color: #0094ad;
 
−
    font-size: 24px;
 
−
    letter-spacing: 4px;
 
−
  }
 
−
  .txt span {
 
−
    color: rgb(129, 104, 182);
 
−
    font-size: 11px;
 
−
  }
 
−
  .card .back h2 {
 
−
    font-family: 'Montserrat', sans-serif;
 
−
    font-size: 24px;
 
−
    letter-spacing: 6px;
 
−
  }
 
−
  .card .back span {
 
−
    font-family: 'Montserrat', sans-serif;
 
−
    padding: 0px;
 
−
    font-size: 18px;
 
−
    color: #0094ad;
 
−
    letter-spacing: 2px;
 
−
  }
 
−
  .card .back h5 {
 
−
    font-family: 'Montserrat', sans-serif;
 
−
    color: #0094ad;
 
−
    font-size: 22px;
 
−
    letter-spacing: 4px;
 
−
  }
 
−
  .card .back p {
 
−
    font-family: 'Montserrat', sans-serif;
 
−
    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 {
 
−
    width: 80px;
 
−
    height: 106px;
 
−
    border-radius: 100%;
 
−
    position: absolute;
 
−
    transition-duration: 0.5s;
 
−
    right: 0px;
 
−
    bottom: -20px;
 
−
    background-image: url(/assets/img/fish.png);
 
−
  }
 
−
  /* 動畫 */
 
−
  .tit h1 {
 
−
    /*position: absolute;*/
 
−
    text-align: center;
 
−
    font-size: 120px;
 
−
    font-family: 'Montserrat', sans-serif;
 
−
    color: rgb(55, 55, 55);
 
−
    font-weight: bold;
 
−
    letter-spacing: 5px;
 
−
    /*font-family: 'Open Sans', sans-serif;*/
 
−
  }
 
−
  .tit {
 
−
    height: 200px;
 
−
    /*border: 2px solid rgb(173, 83, 213);*/
 
−
  }
 
 
}
 
}
  

Revision as of 12:57, 30 October 2017