Difference between revisions of "Template:TUST China/css/team"

 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
 
.at-section__title {
 
.at-section__title {
 
     margin: 0 0 70px;
 
     margin: 0 0 70px;
Line 8: Line 9:
 
     text-align: center;
 
     text-align: center;
 
}
 
}
 +
 
.at-grid {
 
.at-grid {
 
     display: -webkit-box;
 
     display: -webkit-box;
Line 132: Line 134:
 
         -ms-flex-preferred-size: 50% !important;
 
         -ms-flex-preferred-size: 50% !important;
 
         flex-basis: 50% !important;
 
         flex-basis: 50% !important;
 +
    }
 +
}
 +
@media (width: 1024px) {
 +
    .at-column span{
 +
        font-size: 1.4vw!important;
 
     }
 
     }
 
}
 
}
Line 175: Line 182:
 
     color: #6F808A;
 
     color: #6F808A;
 
     font-family: 'Roboto', sans-serif;
 
     font-family: 'Roboto', sans-serif;
−
     font-size: 0.875rem;
+
     font-size:18px;
 +
 
 
     line-height: 2.375rem;
 
     line-height: 2.375rem;
 
}
 
}
Line 190: Line 198:
 
     max-width: 1170px;
 
     max-width: 1170px;
 
     width: 100%;
 
     width: 100%;
−
     margin: 100px auto;
+
     margin: 80px auto;
 
     padding: 0 20px;
 
     padding: 0 20px;
 
     box-sizing: border-box;
 
     box-sizing: border-box;
Line 201: Line 209:
 
}
 
}
 
.html-content{
 
.html-content{
−
     position: absolute;
+
     position: relative;
 
     display: block;
 
     display: block;
 
     width: 100%;
 
     width: 100%;
Line 270: Line 278:
 
     width: 80%;
 
     width: 80%;
 
     top: 20px;
 
     top: 20px;
−
     font-size: 20px;
+
     font-size: 1.1vw;
 
     z-index: 5;
 
     z-index: 5;
 
     opacity: 0;
 
     opacity: 0;
Line 276: Line 284:
 
.at-column:hover span{
 
.at-column:hover span{
 
     opacity: 1;
 
     opacity: 1;
 +
 
}
 
}
  
Line 288: Line 297:
 
     height: 500px;
 
     height: 500px;
 
}
 
}
−
.team-img img{
 
−
    position: fixed;
 
−
    width: 100%;
 
  
−
    height: auto;
 
−
    -webkit-transform: translateY(-25%);
 
−
    -moz-transform: translateY(-25%);
 
−
    -ms-transform: translateY(-25%);
 
−
    -o-transform: translateY(-25%);
 
−
    transform: translateY(-25%);
 
−
 
−
 
−
}
 
 
.content-text{
 
.content-text{
 
     position: relative;
 
     position: relative;
 
     width: 100%;
 
     width: 100%;
−
     height: 200px;
+
     height: auto;
−
     padding-top: 20px;
+
     padding: 20px;
 
     text-align: center;
 
     text-align: center;
 
     background-color: #262262;
 
     background-color: #262262;

Latest revision as of 04:30, 14 October 2018

.at-section__title { 

   margin: 0 0 70px;
   color: #000;
   font-family: 'Roboto', sans-serif;
   font-size: 3.5rem;
   font-weight: 300;
   line-height: 2.625rem;
   text-align: center;

}

.at-grid { 

   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   background: #FFF;
   border: 1px solid #E2E9ED;

} .at-grid[data-column="1"] .at-column { 

   width: 100%;
   max-width: 100%;
   min-width: 100%;
   -webkit-flex-basis: 100%;
   -ms-flex-preferred-size: 100%;
   flex-basis: 100%;

} .at-grid[data-column="2"] .at-column { 

   width: 50%;
   max-width: 50%;
   min-width: 50%;
   -webkit-flex-basis: 50%;
   -ms-flex-preferred-size: 50%;
   flex-basis: 50%;

} .at-grid[data-column="3"] .at-column { 

   width: 33.33333%;
   max-width: 33.33333%;
   min-width: 33.33333%;
   -webkit-flex-basis: 33.33333%;
   -ms-flex-preferred-size: 33.33333%;
   flex-basis: 33.33333%;

} .at-grid[data-column="4"] .at-column { 

   width: 25%;
   max-width: 25%;
   min-width: 25%;
   -webkit-flex-basis: 25%;
   -ms-flex-preferred-size: 25%;
   flex-basis: 25%;

} .at-grid[data-column="5"] .at-column { 

   width: 20%;
   max-width: 20%;
   min-width: 20%;
   -webkit-flex-basis: 20%;
   -ms-flex-preferred-size: 20%;
   flex-basis: 20%;

} .at-grid[data-column="6"] .at-column { 

   width: 16.66667%;
   max-width: 16.66667%;
   min-width: 16.66667%;
   -webkit-flex-basis: 16.66667%;
   -ms-flex-preferred-size: 16.66667%;
   flex-basis: 16.66667%;

} .at-grid[data-column="7"] .at-column { 

   width: 14.28571%;
   max-width: 14.28571%;
   min-width: 14.28571%;
   -webkit-flex-basis: 14.28571%;
   -ms-flex-preferred-size: 14.28571%;
   flex-basis: 14.28571%;

} .at-grid[data-column="8"] .at-column { 

   width: 12.5%;
   max-width: 12.5%;
   min-width: 12.5%;
   -webkit-flex-basis: 12.5%;
   -ms-flex-preferred-size: 12.5%;
   flex-basis: 12.5%;

} .at-grid[data-column="9"] .at-column { 

   width: 11.11111%;
   max-width: 11.11111%;
   min-width: 11.11111%;
   -webkit-flex-basis: 11.11111%;
   -ms-flex-preferred-size: 11.11111%;
   flex-basis: 11.11111%;

} .at-column { 

   position: relative;
   background: #FFF;
   overflow: hidden;
   text-align: center;
   box-shadow: 0 0 0 1px #E2E9ED;
   padding: 10px;
   box-sizing: border-box;
   -webkit-transition: box-shadow 0.2s ease, -webkit-transform 0.2s ease;
   transition: box-shadow 0.2s ease, -webkit-transform 0.2s ease;
   transition: box-shadow 0.2s ease, transform 0.2s ease;
   transition: box-shadow 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;

} .at-column:before { 

   content: "";
   display: block;
   padding-top: 100%;

} .at-column:hover { 

   z-index: 1;
   box-shadow: 0 8px 50px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(1.05);
   transform: scale(1.05);

} .at-column:hover .at-social { 

   margin: 16px 0 0;
   opacity: 1;

} @media (max-width: 800px) { 

   .at-column {
       width: 50% !important;
       max-width: 50% !important;
       min-width: 50% !important;
       -webkit-flex-basis: 50% !important;
       -ms-flex-preferred-size: 50% !important;
       flex-basis: 50% !important;
   }

} @media (width: 1024px) { 

   .at-column span{
       font-size: 1.4vw!important;
   }

} @media (max-width: 600px) { 

   .at-column {
       width: 100% !important;
       max-width: 100% !important;
       min-width: 100% !important;
       -webkit-flex-basis: 100% !important;
       -ms-flex-preferred-size: 100% !important;
       flex-basis: 100% !important;
   }

} .at-user { 

   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
   text-align: center;

} .at-user__avatar { 

   width: 125px;
   height: 125px;
   border-radius: 100%;
   margin: 0 auto 20px;
   overflow: hidden;

} .at-user__avatar img { 

   display: block;
   width: 100%;

} .at-user__name { 

   color: #313435;
   font-family: 'Roboto', sans-serif;
   font-size: 1.5rem;
   font-weight: 500;
   line-height: 2.625rem;

} .at-user__title { 

   color: #6F808A;
   font-family: 'Roboto', sans-serif;
   font-size:18px;

   line-height: 2.375rem;

}

body { 

   background: #FFF;
   font-family: 'Roboto', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   margin: 0px;

} .container { 

   display: block;
   max-width: 1170px;
   width: 100%;
   margin: 80px auto;
   padding: 0 20px;
   box-sizing: border-box;
   -webkit-transform-origin: top center;
   transform-origin: top center;
   -webkit-transform: scale(0.8);
   transform: scale(0.8);


} .html-content{ 

   position: relative;
   display: block;
   width: 100%;
   height: auto;
   background-color: #fff;

}




.teamy1 { 

   overflow: hidden;
   width: 100%;
   height: 100%;

}

.teamy1:before { 

   content: "";
   position: absolute;

   top: 50%;
   left: 50%;
   z-index: 2;

}


.at-column .teamy1:before { 

   width: 0;
   height: 0;
   padding: 25%;
   border-radius: 50%;
   -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease;
   transition: opacity .3s ease-out, -webkit-transform .3s ease;
   transition: transform .3s ease, opacity .3s ease-out;
   transition: transform .3s ease, opacity .3s ease-out, -webkit-transform .3s ease;
   will-change: opacity, transform;
   opacity: 0;
   -webkit-transform: translate(-50%, -50%) scale(0);
   transform: translate(-50%, -50%) scale(0);

} .at-column:hover .teamy1:before { 

   opacity: 1;
   -webkit-transform: translate(-50%, -50%) scale(4);
   transform: translate(-50%, -50%) scale(4);
   -webkit-transition-duration: .6s;
   transition-duration: .6s;

}


.teamy1:before { 

   background-color: rgba(38,34,98, .8);

}

.at-column span{ 

   display: inherit;
   position: absolute;
   text-align: left;
   white-space: pre-wrap;

   color: #fff;
   width: 80%;
   top: 20px;
   font-size: 1.1vw;
   z-index: 5;
   opacity: 0;

} .at-column:hover span{ 

   opacity: 1;

}

.team-header{ 

   display: block;
   width: 100%;
   height: auto;
   margin: 0px;

} .team-img{ 

   width: 100%;
   height: 500px;

}

.content-text{ 

   position: relative;
   width: 100%;
   height: auto;
   padding: 20px;
   text-align: center;
   background-color: #262262;

} .content-text span{ 

   white-space: pre-wrap;
   text-align: center;
   font-size: 1.2em;
   color: #fff;

} hr{ 

   color: black;
   width: 2px;

}