Oycheungad (Talk | contribs) |
Oycheungad (Talk | contribs) |
||
Line 367: | Line 367: | ||
<h1> Our Advisors </h1> | <h1> Our Advisors </h1> | ||
− | <figure class=" | + | <figure class="snip1482"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<figcaption> | <figcaption> | ||
− | <p> | + | <h2>Norman Gordon</h2> |
+ | <p>You don't get to be mom if you can't fix everything just right.</p> | ||
</figcaption> | </figcaption> | ||
− | <a href="#"></a> | + | <a href="#"></a><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample45.jpg" alt="sample45" /> |
</figure> | </figure> | ||
− | <figure class=" | + | <figure class="snip1482 hover"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<figcaption> | <figcaption> | ||
− | <p> | + | <h2>Desmond Eagle</h2> |
+ | <p>Until you stalk and overrun, you can't devour anyone.</p> | ||
</figcaption> | </figcaption> | ||
− | <a href="#"></a> | + | <a href="#"></a><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample59.jpg" alt="sample59" /> |
</figure> | </figure> | ||
− | <figure class=" | + | <figure class="snip1482"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<figcaption> | <figcaption> | ||
− | <p> | + | <h2>Benjamin Evalent</h2> |
+ | <p>There's never enough time to do all the nothing you want.</p> | ||
</figcaption> | </figcaption> | ||
− | <a href="#"></a> | + | <a href="#"></a><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample60.jpg" alt="sample60" /> |
</figure> | </figure> | ||
Line 536: | Line 520: | ||
} | } | ||
− | @import url(https://fonts.googleapis.com/css?family= | + | @import url(https://fonts.googleapis.com/css?family=Playfair+Display); |
− | @import url(https:// | + | @import url(https://fonts.googleapis.com/css?family=Fauna+One); |
− | + | .snip1482 { | |
− | font-family: ' | + | font-family: 'Fauna One', Arial, sans-serif; |
position: relative; | position: relative; | ||
float: left; | float: left; | ||
− | + | margin: 10px 20px; | |
− | margin: 10px | + | |
min-width: 230px; | min-width: 230px; | ||
− | max-width: | + | max-width: 295px; |
+ | min-height: 220px; | ||
width: 100%; | width: 100%; | ||
color: #ffffff; | color: #ffffff; | ||
− | text-align: | + | text-align: right; |
+ | line-height: 1.4em; | ||
+ | background-color: #1a1a1a; | ||
font-size: 16px; | font-size: 16px; | ||
− | |||
} | } | ||
− | + | .snip1482 * { | |
− | + | ||
− | + | ||
-webkit-box-sizing: border-box; | -webkit-box-sizing: border-box; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
− | -webkit-transition: all 0. | + | -webkit-transition: all 0.35s ease; |
− | transition: all 0. | + | transition: all 0.35s ease; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .snip1482 img { | |
position: absolute; | position: absolute; | ||
− | top: | + | right: 0%; |
− | + | top: 50%; | |
− | + | opacity: 1; | |
+ | width: 100%; | ||
+ | -webkit-transform: translate(0%, -50%); | ||
+ | transform: translate(0%, -50%); | ||
} | } | ||
− | + | .snip1482 figcaption { | |
− | + | ||
− | + | ||
− | + | ||
position: absolute; | position: absolute; | ||
− | + | width: 50%; | |
− | + | top: 50%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | top: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
left: 0; | left: 0; | ||
− | -webkit-transform: translateY(- | + | -webkit-transform: translateY(-50%); |
− | transform: translateY(- | + | transform: translateY(-50%); |
+ | padding: 20px 0 20px 20px; | ||
} | } | ||
− | + | .snip1482 h2, | |
− | + | .snip1482 p { | |
margin: 0; | margin: 0; | ||
+ | width: 100%; | ||
+ | -webkit-transform: translateX(20px); | ||
+ | transform: translateX(20px); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .snip1482 h2 { | ||
+ | font-family: 'Playfair Display', Arial, sans-serif; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
+ | margin-bottom: 5px; | ||
} | } | ||
− | + | .snip1482 p { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
font-size: 0.8em; | font-size: 0.8em; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .snip1482 a { | |
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Line 647: | Line 583: | ||
left: 0; | left: 0; | ||
right: 0; | right: 0; | ||
+ | z-index: 1; | ||
} | } | ||
− | + | .snip1482:hover img, | |
− | + | .snip1482.hover img { | |
− | + | width: 55%; | |
− | + | right: -10%; | |
− | + | ||
− | + | ||
} | } | ||
− | + | .snip1482:hover figcaption h2, | |
− | + | .snip1482.hover figcaption h2, | |
− | + | .snip1482:hover figcaption p, | |
− | + | .snip1482.hover figcaption p { | |
− | + | -webkit-transform: translateX(0px); | |
− | + | transform: translateX(0px); | |
− | + | ||
− | + | ||
− | -webkit-transform: | + | |
− | transform: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
opacity: 1; | opacity: 1; | ||
− | |||
− | |||
} | } | ||
/* Demo purposes only */ | /* Demo purposes only */ | ||
Line 683: | Line 602: | ||
background-color: #212121; | background-color: #212121; | ||
} | } | ||
+ | |||
</style> | </style> | ||
Line 692: | Line 612: | ||
} | } | ||
); | ); | ||
− | |||
</script> | </script> | ||
</html> | </html> | ||
{{Hong_Kong_HKUST/Footer}} | {{Hong_Kong_HKUST/Footer}} |
Revision as of 07:49, 28 September 2017
Our Advisors