Difference between revisions of "Template:TUST China/css/team"
| Line 180: | Line 180: | ||
body { | body { | ||
| − | + | background-color: #17BEBB; | |
font-family: 'Roboto', sans-serif; | font-family: 'Roboto', sans-serif; | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
Revision as of 17:53, 5 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 (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: 0.875rem; line-height: 2.375rem;
}
body { background-color: #17BEBB;
font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
} .container {
max-width: 1170px; width: 100%; margin: 100px 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);
}
.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(72, 27, 174, .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;
}