Difference between revisions of "Template:Hong Kong HKUST/css style sheet"
TiffanyMak (Talk | contribs) |
TiffanyMak (Talk | contribs) |
||
| Line 539: | Line 539: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 37px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 553: | Line 553: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 164px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 567: | Line 567: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 288px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 581: | Line 581: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 410px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 595: | Line 595: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 520px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 609: | Line 609: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 636px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 623: | Line 623: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 37px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 637: | Line 637: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 164px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 651: | Line 651: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 288px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 665: | Line 665: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 410px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 679: | Line 679: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 520px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
| Line 693: | Line 693: | ||
position: absolute; | position: absolute; | ||
top: 780px; | top: 780px; | ||
| − | left: | + | left: 636px; |
visibility: inherit; | visibility: inherit; | ||
transition-property: inherit; | transition-property: inherit; | ||
Revision as of 17:05, 18 October 2016
/*mobile*/ @media only screen and (max-width: 768px) {
.Team > h1 { text-align: center; font-family: copperplate; font-size: 40pt; }
.Team > h2 { text-align: left; font-family: copperplate; padding-left: 4%; }
.DesBox > h2{ text-align: center; font-family: copperplate; font-size: 28pt; }
.DesBox > p{ text-align: center; font-family: futura; font-size: 12pt; } } /*desktop*/ @media only screen and (min-width: 768px) {
.Team-d > h1 { text-align: center; font-family: copperplate; font-size: 48pt; }
.Team-d > h2 { text-align: left; font-family: copperplate; padding-left: 4%; }
.DesBox-d > h2{ text-align: center; font-family: copperplate; font-size: 40pt; }
.DesBox-d > p{ text-align: center; font-family: futura; font-size: 20pt; } } /*Classes for Main Team Page - mobile*/ @media only screen and (max-width: 768px) {
.Team { width: 100%; height: 100%; position: relative; visibility: visible; transition-property: visibility; top: 30px; }
.TeamClick { visibility: hidden; }
.Icons > img{ width: 448px; height: 335.156px; max-width: none; visibility: inherit; transition-property: inherit; transition-delay: inherit; }
/*Members*/ .circle-carol { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-cynthia { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; }
.circle-danson { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-eric { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-gary { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-janice { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-joyce { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-kait { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-karen { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-leona { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-luna { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-mike { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-olivia { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-raymon { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-sharon { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-soo { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-steven { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-tiff { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-victor { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-winnie { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } /*Advisors*/ .circle-alice { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-bonnie { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-edward { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-ericMF { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-feli { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-jacq { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-justin { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-mona { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-raul { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-sabrina { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-samiha { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-steph { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-thomas { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } /*Instructors*/ .circle-kc { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-jessica { cursor: pointer; height: 60px; width: 60px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } }
/*Classes for Main Team Page - desktop*/ @media only screen and (min-width: 768px) {
.Team-d { width: 66.2%; height: 100%; position: relative; visibility: visible; transition-property: visibility; left: 16.67%; }
.TeamClick-d { visibility: hidden; }
.Icons-d > img{ width: 800px; height: auto; max-width: none; visibility: inherit; transition-property: inherit; transition-delay: inherit; }
/*Members*/ .circle-carol-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 37px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-cynthia-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 164px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-danson-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 288px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-eric-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 410px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-gary-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 520px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-janice-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 636px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-joyce-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 37px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-kait-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 164px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-karen-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 288px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-leona-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 410px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-luna-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 520px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-mike-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 780px; left: 636px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-olivia-d { cursor: pointer; height: 126px; width: 128px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 340px; left: 37px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-raymon-d { cursor: pointer; height: 124px; width: 110px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 341px; left: 164px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-sharon-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 339px; left: 288px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-soo-d { cursor: pointer; height: 108px; width: 127px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 339px; left: 410px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-steven-d { cursor: pointer; height: 126px; width: 120px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 331px; left: 520px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-tiff-d { cursor: pointer; height: 135px; width: 131px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 323px; left: 636px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-victor-d { cursor: pointer; height: 107px; width: 124px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 464px; left: 30px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-winnie-d { cursor: pointer; height: 124px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 448px; left: 165px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } /*Advisors*/ .circle-alice-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 45px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-bonnie-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 166px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-edward-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 291px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-ericMF-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 413px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-feli-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 537px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-jacq-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 659px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-justin-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 45px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-mona-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 166px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-raul-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 291px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-sabrina-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 413px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-samiha-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 537px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-steph-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 659px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-thomas-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 939px; left: 45px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } /*Instructors*/ .circle-kc-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 1168px; left: 165px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-jessica-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 1168px; left: 44px; visibility: inherit; transition-property: inherit; transition-delay: inherit; }
}
/*Classes for full page profiles - mobile*/ @media only screen and (max-width: 768px) {
.Profile { width: 100%; height: 100%; position: absolute; visibility: hidden; /*Change back to hidden after test*/ // transition-property: visibility; transition: top ease 0.6s; /*-webkit-transition: top ease 0.6s;*/ /*transition-delay: 0.6s; */ } .ProfileClick{ visibility: visible; top: 61px; }
.BkgdPhoto { width: 100%; height: 100%; visibility: inherit; transition-property: inherit; transition-delay: inherit; position: relative; }
.CloseBtn { position: fixed; top: 106px; right: 7px; visibility: inherit; transition-property: inherit; transition-delay: inherit; color: darkgrey; font-size: 32px; }
.CloseBtn:hover { cursor: pointer; }
.GIFBox { width: 82.6%; height: 28.6%; position: absolute; top: 35px; left: 9%; visibility: inherit; transition-property: inherit; transition-delay: inherit; }
/*.HiddenBkgd{ background-color: rgb(219, 210, 191); width: 100%; height: 190%; position: absolute; top: 47%; visibility: inherit;
}*/ .DesBox { width: 91.6%; left: 4%; position: absolute; top: 33%; padding: 0px 40px; visibility: inherit; transition-property: inherit; transition-delay: inherit;
background-color: white; } } /*Classes for full page profiles - mobile*/
/*Classes for full page profiles - desktop*/ @media only screen and (min-width: 768px) {
.Profile-d { width: 100%; height: 0%; /*max-height: 0;*/ position: absolute; /*display: none;*/ visibility: hidden; /*Change back to hidden after test*/ transition-property: visibility; /*transition-delay: 0.6s; */ } .ProfileClick-d{ visibility: visible; top: 0px; height: auto; }
.BkgdPhoto-d { width: 100%; height: 100%; visibility: inherit; transition-property: inherit; transition-delay: inherit; position: relative; }
.CloseBtn-d { position: fixed; top: 25px; right: 29px; visibility: inherit; transition-property: inherit; transition-delay: inherit; color: darkgrey; font-size: 32px; } .CloseBtn-d:hover { cursor: pointer; }
.GIFBox-d { width: 39.6%; height: 39.6%; position: absolute; top: 352px; left: 1%; visibility: inherit; transition-property: inherit; transition-delay: inherit; }
.DesBox-d { width: 55.6%; left: 42%; position: absolute; top: 34%; padding: 0px 40px; visibility: inherit; transition-property: inherit; transition-delay: inherit;
background-color: white; } } /*Classes for full page profiles - desktop*/
