|
|
Line 370: |
Line 370: |
| <h1 style="padding-left: 10px;"> Our Advisors </h1> | | <h1 style="padding-left: 10px;"> Our Advisors </h1> |
| <div class="spacing"></div> | | <div class="spacing"></div> |
− | <div class="gallery">
| |
− | <figure>
| |
− | <img src="https://static.igem.org/mediawiki/2017/6/6d/Hkusteric.png" alt="" />
| |
− | <figcaption>Eric Cheung <small style="display:block">United States</small></figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>Териберка, gorod Severomorsk <small>Russia</small></figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>
| |
− | Bad Pyrmont <small>Deutschland</small>
| |
− | </figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1439798060585-62ab242d7724?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>Yellowstone National Park <small>United States</small></figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1440339738560-7ea831bf5244?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>Quiraing, Portree <small>United Kingdom</small></figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1441906363162-903afd0d3d52?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>Highlands <small>United States</small></figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1448814100339-234df1d4005d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>Daytona Beach <small>United States</small></figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>Териберка, gorod Severomorsk <small>Russia</small></figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>
| |
− | Bad Pyrmont <small>Deutschland</small>
| |
− | </figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1439798060585-62ab242d7724?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>Yellowstone National Park <small>United States</small></figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1440339738560-7ea831bf5244?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>Quiraing, Portree <small>United Kingdom</small></figcaption>
| |
− | </figure>
| |
− | <figure>
| |
− | <img src="https://images.unsplash.com/photo-1441906363162-903afd0d3d52?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" />
| |
− | <figcaption>Highlands <small>United States</small></figcaption>
| |
− | </figure>
| |
− | </div>
| |
− |
| |
| | | |
| </body> | | </body> |
Line 634: |
Line 579: |
| } | | } |
| //advisor | | //advisor |
− | img {
| |
− | display: block;
| |
− | }
| |
− |
| |
− | .gallery {
| |
− | position: relative;
| |
− | z-index: 2;
| |
− | padding: 10px;
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | -ms-flex-flow: row wrap;
| |
− | flex-flow: row wrap;
| |
− | -webkit-box-pack: justify;
| |
− | -ms-flex-pack: justify;
| |
− | justify-content: space-between;
| |
− | -webkit-transition: all .5s ease-in-out;
| |
− | transition: all .5s ease-in-out;
| |
− | }
| |
− | .gallery.pop {
| |
− | -webkit-filter: blur(10px);
| |
− | filter: blur(10px);
| |
− | }
| |
− | .gallery figure {
| |
− | -ms-flex-preferred-size: 33.333%;
| |
− | flex-basis: 33.333%;
| |
− | padding: 10px;
| |
− | overflow: hidden;
| |
− | border-radius: 10px;
| |
− | cursor: pointer;
| |
− | }
| |
− | .gallery figure img {
| |
− | width: 100%;
| |
− | border-radius: 10px;
| |
− | -webkit-transition: all .3s ease-in-out;
| |
− | transition: all .3s ease-in-out;
| |
− | }
| |
− |
| |
− | .gallery figure figcaption{
| |
− | display: none;
| |
− | }
| |
− |
| |
− | .popup {
| |
− | position: fixed;
| |
− | z-index: 2;
| |
− | top: 0;
| |
− | left: 0;
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | background: rgba(255, 255, 255, 0.75);
| |
− | opacity: 0;
| |
− | -webkit-transition: opacity .5s ease-in-out .2s;
| |
− | transition: opacity .5s ease-in-out .2s;
| |
− | }
| |
− | .popup.pop {
| |
− | opacity: 1;
| |
− | -webkit-transition: opacity .2s ease-in-out 0s;
| |
− | transition: opacity .2s ease-in-out 0s;
| |
− | }
| |
− | .popup.pop figure {
| |
− | margin-top: 0;
| |
− | opacity: 1;
| |
− | }
| |
− | .popup figure {
| |
− | position: absolute;
| |
− | top: 50%;
| |
− | left: 50%;
| |
− | -webkit-transform: translate(-50%, -50%);
| |
− | transform: translate(-50%, -50%);
| |
− | -webkit-transform-origin: 0 0;
| |
− | transform-origin: 0 0;
| |
− | //margin-top: 30px;
| |
− | opacity: 0;
| |
− | -webkit-animation: poppy 500ms linear both;
| |
− | animation: poppy 500ms linear both;
| |
− | }
| |
− | .popup figure img {
| |
− | position: relative;
| |
− | z-index: 2;
| |
− | border-radius: 15px;
| |
− | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 6px 30px rgba(0, 0, 0, 0.4);
| |
− | }
| |
− | .popup figure figcaption {
| |
− | position: absolute;
| |
− | bottom: 0px;
| |
− | background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.78));
| |
− | background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
| |
− | z-index: 2;
| |
− | width: 100%;
| |
− | border-radius: 0 0 15px 15px;
| |
− | padding: 100px 20px 20px 20px;
| |
− | color: #fff;
| |
− | font-family: 'Open Sans', sans-serif;
| |
− | font-size: 32px;
| |
− | }
| |
− | .popup figure figcaption small {
| |
− | font-size: 11px;
| |
− | display: block;
| |
− | text-transform: uppercase;
| |
− | margin-top: 12px;
| |
− | text-indent: 3px;
| |
− | opacity: .7;
| |
− | letter-spacing: 1px;
| |
− | }
| |
− | .popup figure .shadow {
| |
− | position: relative;
| |
− | z-index: 1;
| |
− | top: -15px;
| |
− | margin: 0 auto;
| |
− | background-position: center bottom;
| |
− | background-repeat: no-repeat;
| |
− | width: 98%;
| |
− | height: 50px;
| |
− | opacity: .6;
| |
− | -webkit-filter: blur(15px) contrast(2);
| |
− | filter: blur(15px) contrast(2);
| |
− | }
| |
− | .popup .close {
| |
− | position: absolute;
| |
− | z-index: 3;
| |
− | top: 10px;
| |
− | right: 10px;
| |
− | width: 25px;
| |
− | height: 25px;
| |
− | cursor: pointer;
| |
− | background: url(#close);
| |
− | border-radius: 25px;
| |
− | background: rgba(0, 0, 0, 0.1);
| |
− | box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
| |
− | }
| |
− | .popup .close svg {
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | }
| |
| </style> | | </style> |
| <script> | | <script> |