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

 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<html>
+
  body {
−
<style>
+
−
.row::after {
+
−
    content: "";
+
−
    clear: both;
+
−
    display: table;
+
−
}
+
−
[class*="col-"] {
+
−
    float: left;
+
−
    padding: 15px;
+
−
}
+
−
@media only screen and (max-width: 768px) {
+
−
    /* For mobile phones: */
+
−
    [class*="col-"] {
+
−
        width: 100%;
+
−
    }
+
−
}
+
−
@media only screen and (min-width: 600px) {
+
−
    /* For tablets: */
+
−
    .col-s-1 {width: 8.33%;}
+
−
    .col-s-2 {width: 16.66%;}
+
−
    .col-s-3 {width: 25%;}
+
−
    .col-s-4 {width: 33.33%;}
+
−
    .col-s-5 {width: 41.66%;}
+
−
    .col-s-6 {width: 50%;}
+
−
    .col-s-7 {width: 58.33%;}
+
−
    .col-s-8 {width: 66.66%;}
+
−
    .col-s-9 {width: 75%;}
+
−
    .col-s-10 {width: 83.33%;}
+
−
    .col-s-11 {width: 91.66%;}
+
−
    .col-s-12 {width: 100%;}
+
−
}
+
−
@media only screen and (min-width: 768px) {
+
−
    /* For desktop: */
+
−
    .col-1 {width: 8.33%;}
+
−
    .col-2 {width: 16.66%;}
+
−
    .col-3 {width: 25%;}
+
−
    .col-4 {width: 33.33%;}
+
−
    .col-5 {width: 41.66%;}
+
−
    .col-6 {width: 50%;}
+
−
    .col-7 {width: 58.33%;}
+
−
    .col-8 {width: 66.66%;}
+
−
    .col-9 {width: 75%;}
+
−
    /*.col-10 {width: 83.33%;}*/
+
−
    .col-10 {width: 76%;}
+
−
    .col-11 {width: 91.66%;}
+
−
    .col-12 {width: 100%;}
+
−
}
+
−
html {
+
−
    font-family: "Lucida Sans", sans-serif;
+
−
}
+
−
img {
+
−
    width: 100%;
+
−
    height: auto;
+
−
}
+
−
#headerimg {
+
−
    width: 80%;
+
−
    height: auto;
+
−
    filter: opacity(60%);
+
−
    transform: rotate(180deg);
+
−
}
+
−
.gototop {
+
−
    bottom: 55px;
+
−
    right: 10px;
+
−
    position: fixed;
+
−
    width: 60px;
+
−
    height: 30px;
+
−
    cursor: pointer;
+
−
    color: #FFE6D5;
+
−
    background-color: rgba(0,0,0,0);
+
−
}
+
−
.gototop img {
+
−
    background-color: rgba(0,0,0,0);
+
−
}
+
−
.topbar{
+
−
    overflow: hidden;
+
 
     background-color: #272625;
 
     background-color: #272625;
−
    position: fixed;
+
  }
−
    top: 0;
+
  h4, h1, p {
−
    width: 100%;
+
−
    z-index: 1;
+
−
    margin-top: 18px;
+
−
}
+
−
.topbar a {
+
−
    float: left;
+
−
    color: #f2f2f2;
+
−
    text-align: center;
+
−
    padding: 25px 16px;
+
−
    text-decoration: none;
+
−
    font-size: 17px;
+
−
} 
+
−
.topbar a:hover {
+
−
    background-color: #ddd;
+
−
    color: black;
+
−
}
+
−
.barclass {
+
−
    text-decoration-line: none;
+
−
    font-size: 30px;
+
−
    background-color: #272625;
+
−
    color: #f2f2f2;
+
−
}
+
−
.barclass:hover {
+
−
    color:white;
+
−
}
+
−
#bartitle {
+
−
    background-color: #272625;
+
−
    color: #f2f2f2;
+
−
    font-size: 35px;
+
−
    padding-top : 25px;
+
−
    padding-bottom: 25px;
+
−
}
+
−
.topbar .active {
+
−
    background-color: #C8BCC7;
+
 
     color: white;
 
     color: white;
−
}
+
  }
−
.headertitle{  
+
  p {
−
    letter-spacing: 2px;
+
     font-size: 18px;
−
    margin-left: 10px;
+
  }
−
    margin-top: 100px; 
+
  .container.content {
−
    height: 50px;
+
     margin-top: 80px;
−
    padding: 20px 0;
+
  }
−
    color: #CE1441;
+
 
−
}
+
  /*folded-corner*/
−
.row h1 {
+
  .post {
−
    background-color: #272625;
+
−
    padding: 30px;
+
−
    padding-top: 40px;
+
−
     font-size: 50px;
+
−
    letter-spacing: 2px;
+
−
    margin-top: 10px;
+
−
    text-align: center;
+
−
    font-family: Patua One;
+
−
    color: #FFE6D5;
+
−
}
+
−
.menu {
+
−
    padding: 10px;
+
−
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
−
     margin-top: 100px;
+
−
    position: absolute;
+
−
    background-color: #C8BCC7;
+
−
    font-family: Patua One;
+
−
    font-size: 20px;
+
−
}
+
−
.menu ul {
+
−
    list-style-type: none;
+
−
    list-style-image: none;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    background-color: #C8BCC7;
+
−
}
+
−
.menu li {
+
−
    padding: 10px;
+
−
    margin-bottom: 7px;
+
−
    background-color: #434343;
+
−
    color: #FFE6D5;
+
−
    box-shadow: 1px 1px 3px rgba(0,0,0,0.12), 2px 2px 2px rgba(0,0,0,0.24);
+
−
    cursor: pointer;
+
−
}
+
−
.menu li:hover {
+
−
    background-color: #585757;
+
−
}
+
−
.menu li.active {
+
−
    background-color: #585757;
+
−
    color: white;
+
−
}
+
−
@media screen and (max-width: 930px) {
+
−
    div.menu {
+
−
      display: none;
+
−
    }
+
−
}
+
−
/*folded-corner*/
+
−
.post {
+
 
     position: relative;
 
     position: relative;
−
}
+
  }
−
.folded-corner {
+
  .folded-corner {
 
     position: absolute;
 
     position: absolute;
 
     bottom: 0px;   
 
     bottom: 0px;   
Line 182: Line 25:
 
     box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);
 
     box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);
 
     border-radius: 15px 0 0 0;
 
     border-radius: 15px 0 0 0;
−
     border-color: transparent #FFEEEE transparent transparent;
+
     border-color: transparent #B9DEBB transparent transparent;
 
     transition: border-width 0.2s ease-out;
 
     transition: border-width 0.2s ease-out;
−
}
+
  }
−
.post:hover .folded-corner {
+
  .post:hover .folded-corner {
 
     border-width: 40px 40px 0 0;
 
     border-width: 40px 40px 0 0;
−
}
+
  }
−
.photo .folded-corner {background: hsla(260,5%,75%,0.5);}
+
  .photo .folded-corner {
−
.member {
+
    background: hsla(260,5%,75%,0.5);
−
    padding: 10px;
+
   }
−
    margin: 20px;
+
−
    margin-top: 1px;
+
−
    background-color: #272625;
+
−
}
+
−
.principle {
+
−
    margin: 20px;
+
−
    border-style: none none double none;
+
−
    border-bottom-width: 7px;
+
−
    border-color: #F88EAE;
+
−
}
+
−
.advisor {
+
−
    margin: 20px;
+
−
    border-style: none none double none;
+
−
    border-bottom-width: 7px;
+
−
    border-color: #EA931F;
+
−
}
+
−
.wet {
+
−
    margin: 20px;
+
−
    border-style: none none double none;
+
−
    border-bottom-width: 7px;
+
−
    border-color: #28BD55;
+
−
}
+
−
.dry {
+
−
    margin: 20px;
+
−
    border-style: none none double none;
+
−
    border-bottom-width: 7px;
+
−
    border-color: #FFE049;
+
−
}
+
−
.hp {
+
−
    margin: 20px;
+
−
    border-style: none none double none;
+
−
    border-bottom-width: 10px;
+
−
    border-color: #8BBDE7;
+
−
}
+
−
.person {    
+
−
    margin: 20px 13px;
+
−
    box-shadow: 1px 1px 3px rgba(0,0,0,0.12), 2px 2px 2px rgba(0,0,0,0.24);
+
−
    background-color: #FFEEEE;
+
−
}
+
−
.person h3 {
+
−
    padding: 10px;
+
−
    font-size: 25px;
+
−
    font-style: italic;
+
−
    font-weight: 600;
+
−
    color: #2F3632;
+
−
    height: 65px;
+
−
    letter-spacing: 2px;
+
−
    margin-top: 20px;
+
−
    text-align: center;
+
−
    background-color: #FFEEEE;
+
−
}
+
−
/*set people center*/
+
−
.person.flip.none{
+
−
    background: #272625;
+
−
    box-shadow: 0px 0px 0px;
+
−
}
+
−
.person.flip.none2{
+
−
    background: #272625;
+
−
    box-shadow: 0px 0px 0px;
+
−
}
+
−
.person.flip.none3{
+
−
    background: #272625;
+
−
    box-shadow: 0px 0px 0px;
+
−
}
+
−
.person.flip.none4{
+
−
    background: #272625;
+
−
    box-shadow: 0px 0px 0px;
+
−
}
+
−
@media only screen and (max-width: 1700px) {
+
−
    /* 3 */
+
−
    .col-1.col-s-1.person.flip.none.principlenone{
+
−
        width: 12%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.advisornone{
+
−
        display: none;
+
−
    } 
+
−
    .col-1.col-s-1.person.flip.none3.wetnone{
+
−
        width: 12%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none4.wetnone{
+
−
        width: 12%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none2.wetnone{
+
−
        width: 12%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.drynone{
+
−
        width: 12%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none2.drynone{
+
−
        width: 12%;
+
−
    }
+
−
    .col-3.col-s-6.person.flip.none.hpnone{
+
−
        width: 29%;
+
−
    }
+
−
    .header h1 {font-size: 60px;}
+
−
}
+
−
@media only screen and (min-width: 1700px) {
+
−
    /* 4 */
+
−
    .col-1.col-s-1.person.flip.none.principlenone{
+
−
        width: 20%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.advisornone{
+
−
        width: 10%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none3.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none4.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none2.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.drynone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none2.drynone{
+
−
        display: none;
+
−
    }
+
−
    .col-3.col-s-6.person.flip.none.hpnone{
+
−
        width: 33.33%;
+
−
    }
+
−
    .header h1 {font-size: 60px;}
+
−
}
+
−
@media only screen and (min-width: 2100px) {
+
−
    /* 5 */
+
−
    .col-1.col-s-1.person.flip.none.principlenone{
+
−
        width: 28%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.advisornone{
+
−
        width: 16.5%;
+
−
    } 
+
−
    .col-1.col-s-1.person.flip.none.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none2.wetnone{
+
−
        display: inline;
+
−
        width: 28%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.drynone{
+
−
        display: none;
+
−
    }
+
−
    .col-3.col-s-6.person.flip.none.hpnone{
+
−
        width: 37%;
+
−
    }
+
−
    .header h1 {font-size: 60px;}
+
−
}
+
−
@media only screen and (min-width: 2470px) {
+
−
    /* 6 */
+
−
    .col-1.col-s-1.person.flip.none.principlenone{
+
−
        width: 31%;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.advisornone{
+
−
        width: 25%;
+
−
    } 
+
−
    .col-1.col-s-1.person.flip.none.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none2.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.drynone{
+
−
        display: inline;
+
−
        width: 7%;
+
−
    }
+
−
    .col-3.col-s-6.person.flip.none.hpnone{
+
−
        width: 40%;
+
−
    }
+
−
    .header h1 {font-size: 60px;}
+
−
}
+
  
−
@media only screen and (max-width: 1330px) {
+
  [class*="col-"] {
−
    /* For mobile phones: */
+
     float: left;
−
    .col-1.col-s-1.person.flip.none.principlenone{
+
     padding: 15px;
−
        display: none;
+
  }
−
     }
+
  .flip {
−
    .col-1.col-s-1.person.flip.none.advisornone{
+
−
        display: none;
+
−
     } 
+
−
    .col-1.col-s-1.person.flip.none.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none2.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none3.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none4.wetnone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none.drynone{
+
−
        display: none;
+
−
    }
+
−
    .col-1.col-s-1.person.flip.none2.drynone{
+
−
        display: none;
+
−
    }
+
−
    .col-3.col-s-6.person.flip.none.hpnone{
+
−
        display: none;
+
−
    }
+
−
}
+
−
.flip {
+
−
    perspective: 800;
+
 
     width: 240px;
 
     width: 240px;
 
     height: 370px;
 
     height: 370px;
−
}
+
  }
−
.flip .card {
+
  .flip .card {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 +
    text-align: center;
 
     transform-style: preserve-3d;
 
     transform-style: preserve-3d;
−
     background-color: #FFEEEE;
+
     background-color: #B9DEBB;
−
}
+
  }
−
.flip .card .namecard {
+
  .flip .card .namecard {
 
     backface-visibility: hidden;
 
     backface-visibility: hidden;
 
     z-index: 2;
 
     z-index: 2;
 
     font-size: 3em;
 
     font-size: 3em;
 
     line-height: 26px;
 
     line-height: 26px;
−
}
+
  }
−
.flip .card .front {
+
  .flip .card .front {
 +
    margin: 15px;
 
     position: absolute;
 
     position: absolute;
 
     z-index: 1;
 
     z-index: 1;
 
     letter-spacing: 1px;
 
     letter-spacing: 1px;
−
     background-color: #FFEEEE;
+
     background-color: #B9DEBB;
 
     letter-spacing: 1px;
 
     letter-spacing: 1px;
−
    color: rgb(8, 7, 1);
 
 
     overflow: hidden;
 
     overflow: hidden;
 
     cursor: pointer;
 
     cursor: pointer;
−
}
+
  }
−
.flip .card .back {
+
  .flip .card .back {
 
     transform: rotatey(-180deg);
 
     transform: rotatey(-180deg);
 
     cursor: pointer;
 
     cursor: pointer;
 
     letter-spacing: 1px;
 
     letter-spacing: 1px;
 
     overflow: hidden;
 
     overflow: hidden;
−
     padding: 15px;
+
     margin: 15px;
 
     text-align: left;
 
     text-align: left;
−
     background-color: #272625;
+
     background-color: #B9DEBB;
−
}
+
  }
−
.card .back h2 {
+
  .flipped {
−
    font-size: 23px;
+
−
    letter-spacing: 1px;
+
−
    margin-top: 1px;
+
−
    margin-bottom: 3px;
+
−
    background-color: #272625;
+
−
}
+
−
.card .back .quote {
+
−
    font-family: 'Courgette', cursive;
+
−
    letter-spacing: 0px;
+
−
    font-size: 20px;
+
−
    font-weight: normal;
+
−
}
+
−
.card .back p {
+
−
    color: #fff1b9;
+
−
    font-size: 13px;
+
−
    letter-spacing: 0px;
+
−
    margin-top: 1px;
+
−
    margin-bottom: 1px;
+
−
    background-color: #272625;
+
−
    line-height: 15px;
+
−
}
+
−
.card .back h5 {
+
−
    color: #fff1b9;
+
−
    font-size: 15px;
+
−
    letter-spacing: 1px;
+
−
    margin-top: 1px;
+
−
    margin-bottom: 1px;
+
−
    background-color: #272625;
+
−
    font-weight: normal;
+
−
}
+
−
.card .back h3 {
+
−
    background-color: #272625;
+
−
    color: #fff1b9;
+
−
    margin-top: 5px;
+
−
    margin-bottom: 1px;
+
−
    height: 40px;
+
−
    padding: 1px;
+
−
}
+
−
.principle .card .back h2 {
+
−
    color: #F88EAE;
+
−
}
+
−
.advisor .card .back h2 {
+
−
    color: #EA931F;
+
−
}
+
−
.advisor .card .back .quote {
+
−
    color: rgb(241, 196, 137);
+
−
}
+
−
.wet .card .back h2 {
+
−
    color: #28BD55;
+
−
}
+
−
.wet .card .back .quote {
+
−
    color: #C5F0A4;
+
−
}
+
−
.dry .card .back h2 {
+
−
    color: #FFE049;
+
−
}
+
−
.dry .card .back .quote {
+
−
    color: rgb(253, 233, 135);
+
−
}
+
−
.hp .card .back h2 {
+
−
    color: #8BBDE7;
+
−
}
+
−
.hp .card .back .quote {
+
−
    color: rgb(193, 214, 231);
+
−
}
+
−
.flipped {
+
 
     transform: rotatey(-180deg);
 
     transform: rotatey(-180deg);
−
}
+
  }
−
</style>
+
  .card h3 {
−
</html>
+
      margin-top: 10px;
 +
  }

Latest revision as of 08:48, 10 July 2018

 body {
   background-color: #272625;
 }
 h4, h1, p {
   color: white;
 }
 p {
   font-size: 18px;
 }
 .container.content {
   margin-top: 80px;
 }

 /*folded-corner*/
 .post {
   position: relative;
 }
 .folded-corner {
   position: absolute;
   bottom: 0px;  
   right: 0px;
   border-width: 0;
   border-style: solid;
   background: hsla(260,100%,100%,0.2);
   box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);
   border-radius: 15px 0 0 0;
   border-color: transparent #B9DEBB transparent transparent;
   transition: border-width 0.2s ease-out;
 }
 .post:hover .folded-corner {
   border-width: 40px 40px 0 0;
 }
 .photo .folded-corner {
   background: hsla(260,5%,75%,0.5);
 }

 [class*="col-"] {
   float: left;
   padding: 15px;
 }
 .flip {
   width: 240px;
   height: 370px;
 }
 .flip .card {
   width: 100%;
   height: 100%;
   text-align: center;
   transform-style: preserve-3d;
   background-color: #B9DEBB;
 }
 .flip .card .namecard {
   backface-visibility: hidden;
   z-index: 2;
   font-size: 3em;
   line-height: 26px;
 }
 .flip .card .front {
   margin: 15px;
   position: absolute;
   z-index: 1;
   letter-spacing: 1px;
   background-color: #B9DEBB;
   letter-spacing: 1px;
   overflow: hidden;
   cursor: pointer;
 }
 .flip .card .back {
   transform: rotatey(-180deg);
   cursor: pointer;
   letter-spacing: 1px;
   overflow: hidden;
   margin: 15px;
   text-align: left;
   background-color: #B9DEBB;
 }
 .flipped {
   transform: rotatey(-180deg);
 }
 .card h3 {
     margin-top: 10px;
 }