|
|
Line 369: |
Line 369: |
| | | |
| <h1 class="row"> Our Advisors </h1> | | <h1 class="row"> Our Advisors </h1> |
− | <div class="spacing"> | + | <div class="spacing"></div> |
− | </div> | + | |
− | <div class="row" style="top: 50%">
| + | |
− | <figure class="snip1482 hover">
| + | |
− | <figcaption>
| + | |
− | <h2>Norman Gordon</h2>
| + | |
− | <p>You don't get to be mom if you can't fix everything just right.</p>
| + | |
− | </figcaption>
| + | |
− | <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample45.jpg" alt="sample45" />
| + | |
− | </figure>
| + | |
− | <figure class="snip1482 hover">
| + | |
− | <figcaption>
| + | |
− | <h2>Desmond Eagle</h2>
| + | |
− | <p>Until you stalk and overrun, you can't devour anyone.</p>
| + | |
− | </figcaption>
| + | |
− | <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample59.jpg" alt="sample59" />
| + | |
− | </figure>
| + | |
− | <figure class="snip1482 hover">
| + | |
− | <figcaption>
| + | |
− | <h2>Benjamin Evalent</h2>
| + | |
− | <p>There's never enough time to do all the nothing you want.</p>
| + | |
− | </figcaption>
| + | |
− | <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample60.jpg" alt="sample60" />
| + | |
− | </figure>
| + | |
− | </div>
| + | |
| </body> | | </body> |
| <style> | | <style> |
Line 523: |
Line 501: |
| div.spacing { | | div.spacing { |
| padding: 30px; | | padding: 30px; |
− | }
| |
− |
| |
− | @import url(https://fonts.googleapis.com/css?family=Playfair+Display);
| |
− | @import url(https://fonts.googleapis.com/css?family=Fauna+One);
| |
− | .snip1482 {
| |
− | font-family: 'Fauna One', Arial, sans-serif;
| |
− | position: relative;
| |
− | float: left;
| |
− | margin: 10px 20px;
| |
− | min-width: 230px;
| |
− | max-width: 295px;
| |
− | min-height: 440px;
| |
− | width: 100%;
| |
− | height: 30%
| |
− | top: 20%
| |
− | color: #ffffff;
| |
− | text-align: right;
| |
− | line-height: 1.4em;
| |
− | background-color: #FFFFFF;
| |
− | font-size: 16px;
| |
− | }
| |
− | .snip1482 * {
| |
− | //-webkit-box-sizing: border-box;
| |
− | //box-sizing: border-box;
| |
− | -webkit-transition: all 0.35s ease;
| |
− | transition: all 0.35s ease;
| |
− | }
| |
− | .snip1482 img {
| |
− | position: absolute;
| |
− | right: 0%;
| |
− | //top: 50%;
| |
− | opacity: 1;
| |
− | width: 100%;
| |
− | -webkit-transform: translate(0%, -50%);
| |
− | transform: translate(0%, -50%);
| |
− | }
| |
− | .snip1482 figcaption {
| |
− | position: absolute;
| |
− | width: 50%;
| |
− | //top: 50%;
| |
− | left: 0;
| |
− | -webkit-transform: translateY(-50%);
| |
− | transform: translateY(-50%);
| |
− | padding: 20px 0 20px 20px;
| |
− | }
| |
− | .snip1482 h2,
| |
− | .snip1482 p {
| |
− | 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;
| |
− | margin-bottom: 5px;
| |
− | }
| |
− | .snip1482 p {
| |
− | font-size: 0.8em;
| |
− | }
| |
− | .snip1482 a {
| |
− | position: absolute;
| |
− | top: 0;
| |
− | bottom: 0;
| |
− | left: 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);
| |
− | opacity: 1;
| |
| } | | } |
| </style> | | </style> |