|
|
| Line 7: |
Line 7: |
| | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css'> | | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css'> |
| | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css'> | | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css'> |
| | + | |
| | + | <link rel="stylesheet" type="text/css" href="slick/slick.css"/> |
| | + | <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> |
| | | | |
| | <style> | | <style> |
| Line 118: |
Line 121: |
| | transition: all 0.5s ease; | | transition: all 0.5s ease; |
| | } | | } |
| | + | |
| | + | body[data-page='sponsors'] { transition: none; } |
| | | | |
| | .top-menu { | | .top-menu { |
| Line 242: |
Line 247: |
| | line-height: 100%; | | line-height: 100%; |
| | } | | } |
| | + | |
| | + | body[data-page='sponsors'] .page-container { left: 0; width: 100%; } |
| | + | body[data-page='sponsors'] .page-content { width: 100%; } |
| | | | |
| | .page-container .page-heading { | | .page-container .page-heading { |
| Line 263: |
Line 271: |
| | </style> | | </style> |
| | </head> | | </head> |
| − | <body data-key="home"> | + | <body data-key="home" data-page=""> |
| | | | |
| | <div class="top-menu" data-key="home"> | | <div class="top-menu" data-key="home"> |
| Line 915: |
Line 923: |
| | .page-container ul, .page-container ol { padding-left: 20px; } | | .page-container ul, .page-container ol { padding-left: 20px; } |
| | .page-container ul, .page-container ol { text-align: left; } | | .page-container ul, .page-container ol { text-align: left; } |
| − |
| |
| − | .shuffle-container .aspect:hover { opacity: 1; }
| |
| − |
| |
| − | .timeline h1 {
| |
| − | font-size: 200%;
| |
| − | text-transform: uppercase;
| |
| − | letter-spacing: 3px;
| |
| − | font-weight: 400;
| |
| − | }
| |
| − |
| |
| − | .timeline header {
| |
| − | background: #3F51B5;
| |
| − | color: #FFFFFF;
| |
| − | padding: 150px 0;
| |
| − | }
| |
| − | .timeline header p {
| |
| − | font-family: 'Allura';
| |
| − | color: rgba(255, 255, 255, 0.2);
| |
| − | margin-bottom: 0;
| |
| − | font-size: 60px;
| |
| − | margin-top: -30px;
| |
| − | }
| |
| − |
| |
| − | .timeline {
| |
| − | position: relative;
| |
| − | }
| |
| − | .timeline::before {
| |
| − | content: '';
| |
| − | background: #C5CAE9;
| |
| − | width: 5px;
| |
| − | height: 95%;
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | transform: translateX(-50%);
| |
| − | }
| |
| − |
| |
| − | .timeline .timeline-item {
| |
| − | width: 100%;
| |
| − | margin-bottom: 70px;
| |
| − | }
| |
| − | .timeline .timeline-item:nth-child(even) .timeline-content {
| |
| − | float: right;
| |
| − | padding: 40px 30px 10px 30px;
| |
| − | }
| |
| − | .timeline .timeline-item:nth-child(even) .timeline-content .date {
| |
| − | right: auto;
| |
| − | left: 0;
| |
| − | }
| |
| − | .timeline .timeline-item:nth-child(even) .timeline-content::after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | border-style: solid;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | top: 30px;
| |
| − | left: -15px;
| |
| − | border-width: 10px 15px 10px 0;
| |
| − | border-color: transparent #f5f5f5 transparent transparent;
| |
| − | }
| |
| − | .timeline .timeline-item::after {
| |
| − | content: '';
| |
| − | display: block;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | .timeline .timeline-content {
| |
| − | position: relative;
| |
| − | width: 45%;
| |
| − | padding: 10px 30px;
| |
| − | border-radius: 4px;
| |
| − | background: #f5f5f5;
| |
| − | box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
| |
| − | }
| |
| − | .timeline .timeline-content::after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | border-style: solid;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | top: 30px;
| |
| − | right: -15px;
| |
| − | border-width: 10px 0 10px 15px;
| |
| − | border-color: transparent transparent transparent #f5f5f5;
| |
| − | }
| |
| − |
| |
| − | .timeline .timeline-img {
| |
| − | width: 30px;
| |
| − | height: 30px;
| |
| − | background: #3F51B5;
| |
| − | border-radius: 50%;
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | margin-top: 25px;
| |
| − | margin-left: -15px;
| |
| − | }
| |
| − |
| |
| − | .timeline a {
| |
| − | background: #3F51B5;
| |
| − | color: #FFFFFF;
| |
| − | padding: 8px 20px;
| |
| − | text-transform: uppercase;
| |
| − | font-size: 14px;
| |
| − | margin-bottom: 20px;
| |
| − | margin-top: 10px;
| |
| − | display: inline-block;
| |
| − | border-radius: 2px;
| |
| − | box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
| |
| − | }
| |
| − | .timeline a:hover, a:active, a:focus {
| |
| − | background: #32408f;
| |
| − | color: #FFFFFF;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .timeline-card {
| |
| − | padding: 0 !important;
| |
| − | }
| |
| − | .timeline-card p {
| |
| − | padding: 0 20px;
| |
| − | }
| |
| − | .timeline-card a {
| |
| − | margin-left: 20px;
| |
| − | }
| |
| − |
| |
| − | .timeline-item .timeline-img-header {
| |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1458530970867-aaa3700e966d") center center no-repeat;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .timeline-item:nth-child(5) .timeline-img-header {
| |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1444093826349-9ce8c622f4f3") center center no-repeat;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .timeline-item:nth-child(6) .timeline-img-header {
| |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1471479917193-f00955256257") center center no-repeat;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .timeline-item:nth-child(8) .timeline-img-header {
| |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1466840787022-48e0ec048c8a") center center no-repeat;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .timeline-item:nth-child(10) .timeline-img-header {
| |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1447639703758-f525f36456bf") center center no-repeat;
| |
| − | background-size: cover;
| |
| − | }
| |
| − | .timeline-item:nth-child(11) .timeline-img-header {
| |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1469429978400-082eec725ad5") center center no-repeat;
| |
| − | background-size: cover;
| |
| − | }
| |
| − |
| |
| − | .timeline-img-header {
| |
| − | height: 200px;
| |
| − | position: relative;
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − | .timeline-img-header h2 {
| |
| − | color: #FFFFFF;
| |
| − | position: absolute;
| |
| − | bottom: 5px;
| |
| − | left: 20px;
| |
| − | }
| |
| − |
| |
| − | blockquote {
| |
| − | margin-top: 30px;
| |
| − | color: #757575;
| |
| − | border-left-color: #3F51B5;
| |
| − | padding: 0 20px;
| |
| − | }
| |
| − |
| |
| − | .date {
| |
| − | background: #FF4081;
| |
| − | display: inline-block;
| |
| − | color: #FFFFFF;
| |
| − | padding: 10px;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 768px) {
| |
| − | .timeline::before {
| |
| − | left: 50px;
| |
| − | }
| |
| − | .timeline .timeline-img {
| |
| − | left: 50px;
| |
| − | }
| |
| − | .timeline .timeline-content {
| |
| − | max-width: 100%;
| |
| − | width: auto;
| |
| − | margin-left: 70px;
| |
| − | }
| |
| − | .timeline .timeline-item:nth-child(even) .timeline-content {
| |
| − | float: none;
| |
| − | }
| |
| − | .timeline .timeline-item:nth-child(odd) .timeline-content::after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | border-style: solid;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | top: 30px;
| |
| − | left: -15px;
| |
| − | border-width: 10px 15px 10px 0;
| |
| − | border-color: transparent #f5f5f5 transparent transparent;
| |
| − | }
| |
| − | }
| |
| | </style> | | </style> |
| | | | |
| Line 1,242: |
Line 1,045: |
| | | | |
| | <script id="page-team" type="text/template"> | | <script id="page-team" type="text/template"> |
| − | <div class="page-heading">Team</div> | + | <div style="width: 900px; margin-left: -50px;"> |
| − | 1 | + | <div class="teampicture" style="width: 100%;"> |
| | + | <img style="width: 100%;" src="https://static.igem.org/mediawiki/2017/0/08/Uuteampic.png"> |
| | + | </div> |
| | + | <div style=""></div> |
| | + | |
| | + | <br><br> |
| | + | <div> |
| | + | <h2 class="subhead" id="subhead-1" style="margin-bottom: 0; float: left;">iGEM team members</h2> |
| | + | <div style="float: right; font-size: 13px;"> |
| | + | Filter: <span style="background: #005b9b; padding: 3px 6px; border-radius: 5px; color: white;">None</span> | Awesome people |
| | + | </div> |
| | + | </div> |
| | + | |
| | + | <div style="clear: both;"></div> |
| | + | |
| | + | <div class="team_members"> |
| | + | <div class="timeline-item" data-awesome="1"> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -105px;" src="https://static.igem.org/mediawiki/2017/0/03/Uugiel.jpg"> |
| | + | <h2>Giel Scheepers</h2> |
| | + | </div> |
| | + | <div class="date">Team captain</div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/4/43/Uuouafa.jpg"> |
| | + | <h2>Ouafa Dahri</h2> |
| | + | </div> |
| | + | <div class="date">Team captain</div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -90px;" src="https://static.igem.org/mediawiki/2017/c/c4/Uulishi.jpg"> |
| | + | <h2>Lishi Lin</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -80px;" src="https://static.igem.org/mediawiki/2017/6/66/Uusam.jpg"> |
| | + | <h2>Sam Hariri</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -90px;" src="https://static.igem.org/mediawiki/2017/b/be/Uumerel.jpg"> |
| | + | <h2>Merel Janssen</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> ?<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/1/1e/Uupamela.jpg"> |
| | + | <h2>Pamela Capendale</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> ?<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/d/d8/Uuali.jpg"> |
| | + | <h2>Ali Amghar</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -95px;" src="https://static.igem.org/mediawiki/2017/b/b4/Uudorien.jpg"> |
| | + | <h2>Dorien Vinke</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/5/51/Uuleander.jpg"> |
| | + | <h2>Leander Goldbach</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/c/ca/Uuquincy.jpg"> |
| | + | <h2>Quincy Holzaphfel</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/8/88/Uustefan.jpg"> |
| | + | <h2>Stefan Zaharievski</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/f/f2/Uukewin.jpg"> |
| | + | <h2>Kewin Ogink</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/c/cb/Uuteun.jpg"> |
| | + | <h2>Theun de Kort</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/6/6d/Uurawan.JPG"> |
| | + | <h2>Rawan Shekhani</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/a/ae/Uuglenn.JPG"> |
| | + | <h2>Glenn Mulder</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | </div> |
| | + | </div> |
| | + | |
| | + | <div style="clear: both;"></div> |
| | + | |
| | + | <br><br> |
| | + | <h2 class="subhead" id="subhead-2">Supervisors</h2> |
| | + | |
| | + | <div class="team_members"> |
| | + | <div class="timeline-item"> |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -80px;" src=""> |
| | + | <h2>Niels Geijsen</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>…<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -80px;" src="team/roos.JPG"> |
| | + | <h2>Roos Masereeuw</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>…<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -80px;" src=""> |
| | + | <h2>Guido van den Ackerveken</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>…<br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="timeline-content timeline-card js--fadeInLeft"> |
| | + | <div class="timeline-img-header"> |
| | + | <img width="100%" style="margin-top: -80px;" src=""> |
| | + | <h2>Clara Martinez Mir</h2> |
| | + | </div> |
| | + | <p> |
| | + | <b>Background</b> …<br> |
| | + | <b>Responsibilities</b> …<br> |
| | + | <b>Bio</b><br>…<br> |
| | + | </p> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | |
| | + | </div> |
| | + | |
| | + | <style type="text/css"> |
| | + | .team_members { width: 100%; margin-top: 20px; } |
| | + | .team_members .timeline-content { position: relative; width: 30.8%; margin-right: 2.5%; margin-bottom: 6%; float: left; text-align: left; } |
| | + | .team_members .timeline-img-header { height: 175px; overflow: hidden; } |
| | + | .team_members .timeline-item h2 { font-size: 18px;width: 100%;left: 0;padding-left: 20px;padding-top: 7px;bottom: 0;padding-bottom: 7px;background: rgba(0,0,0,0.5);margin-bottom: 0; } |
| | + | .team_members .date { padding: 5px 10px; font-size: 13px; background: #005b9b; } |
| | + | .team_members p { font-size: 13px; } |
| | + | </style> |
| | </script> | | </script> |
| | | | |
| | <script id="page-sponsors" type="text/template"> | | <script id="page-sponsors" type="text/template"> |
| − | <div class="page-heading">Our sponsors</div> | + | <!-- |
| − | For our project we have had the luck of generous sponsors who either helped us financially, supplied us with material for our lab-work or helped us with other activities. | + | <div style="margin: auto; width: 750px;"> |
| | + | <div class="page-heading">Our sponsors</div> |
| | + | For our project, we have had the luck of having generous sponsors who either helped us financially, supplied us with material for our lab-work or helped us with other activities. |
| | + | </div> |
| | <br><br> | | <br><br> |
| − | <table class="sponsors" width="100%"> | + | <table class="sponsors" width="100%" border="0" style="display: none;"> |
| | <tr> | | <tr> |
| − | <td width=" 300"><img src=""></td> | + | <td align=" center" valign="middle"><img height="85" src=" https://static.igem.org/mediawiki/2017/e/e6/Uurivm.png"></td> |
| − | <td>RIVM is the National Institute for Public Health and the Environment, which belongs to the Ministry of Health, Welfare and Sport of the Dutch government. They offered a sponsorship to the Dutch iGEM teams based on an assignment titled ‘think before you do’, stimulating us to think about the societal implications that our project could have. We submitted a proposal and the RIVM offered us a €1500 grant to further our project.</td> | + | <td width="360">RIVM is the National Institute for Public Health and the Environment, which belongs to the Ministry of Health, Welfare and Sport of the Dutch government. They offered a sponsorship to the Dutch iGEM teams based on an assignment titled ‘think before you do’, stimulating us to think about the societal implications that our project could have. We submitted a proposal and the RIVM offered us a €1500 grant to further our project.</td> |
| | </tr> | | </tr> |
| | <tr> | | <tr> |
| − | <td><img src=""></td> | + | <td width="360">DSM is a science-based company focusing on health, nutrition and materials to drive sustainable innovation. DSM is active in many different markets, including medicine, energy and food, so developments in synthetic biology are of major interest to them. For our project, they sponsored us with €1000.</td> |
| − | <td>DSM is a science-based company focusing on health, nutrition and materials to drive sustainable innovation. DSM is active in many different markets, including medicine, energy and food, so developments in synthetic biology are of major interest to them. For our project, they sponsored us with €1000.</td>
| + | <td align="center" valign="middle"><img height="85" src="https://static.igem.org/mediawiki/2017/5/5b/Uudsm.jpeg"></td> |
| | </tr> | | </tr> |
| | <tr> | | <tr> |
| − | <td><img src=""></td> | + | <td align="center" valign="middle"><img height="85" src=" https://static.igem.org/mediawiki/2017/3/38/Uusnapgene.png"></td> |
| | <td>Snapgene is a software company, providing useful software for molecular biology. Snapgene offers fast and reliable software to visualize and design molecular biology experiments such as cloning and PCR experiments. They sponsored us with full team licenses for the Snapgene software, which we have used extensively during our project.</td> | | <td>Snapgene is a software company, providing useful software for molecular biology. Snapgene offers fast and reliable software to visualize and design molecular biology experiments such as cloning and PCR experiments. They sponsored us with full team licenses for the Snapgene software, which we have used extensively during our project.</td> |
| | </tr> | | </tr> |
| | <tr> | | <tr> |
| − | <td><img src=""></td>
| |
| | <td>eLabjournal is a product by BIO-ITECH BV, a company providing software as a service for research laboratories. Their eLabjournal product offers a simple and effective software environment to keep our lab notes organized and allows easy access wherever and whenever we need it. eLabjournal sponsored us with full team licenses for their software.</td> | | <td>eLabjournal is a product by BIO-ITECH BV, a company providing software as a service for research laboratories. Their eLabjournal product offers a simple and effective software environment to keep our lab notes organized and allows easy access wherever and whenever we need it. eLabjournal sponsored us with full team licenses for their software.</td> |
| | + | <td align="center" valign="middle"><img height="75" src="https://static.igem.org/mediawiki/2017/e/e3/Uuelabjournal.png"></td> |
| | </tr> | | </tr> |
| | <tr> | | <tr> |
| − | <td><img src=""></td> | + | <td align="center" valign="middle"><img height="100" src=" https://static.igem.org/mediawiki/2017/9/92/Uutakara.jpg"></td> |
| | <td>Takara Bio is the biomedical unit of Takara Holdings Inc. and focuses on revolutionary technologies to improve human health. Takara Bio is composed of three units; the Bioindustry division, the AgriBio division and the Gene Therapy division. Takara Bio Europe has offered us a cloning kit and protein purification kit, both of which were frequently used in our experiments.</td> | | <td>Takara Bio is the biomedical unit of Takara Holdings Inc. and focuses on revolutionary technologies to improve human health. Takara Bio is composed of three units; the Bioindustry division, the AgriBio division and the Gene Therapy division. Takara Bio Europe has offered us a cloning kit and protein purification kit, both of which were frequently used in our experiments.</td> |
| | </tr> | | </tr> |
| | <tr> | | <tr> |
| − | <td><img src=""></td>
| |
| | <td>NTrans Technologies is a company based in Utrecht, specializing in delivery of content into cells using the iTOP technology which was developed in the Geijsen lab of the Hubrecht Institute. NTrans offered us guidance and assistance with our project by facilitating a lab technician experienced in the work we had to do for our project. We thank them for Clara Martinez’ amazing assistance and patience with our silly questions.</td> | | <td>NTrans Technologies is a company based in Utrecht, specializing in delivery of content into cells using the iTOP technology which was developed in the Geijsen lab of the Hubrecht Institute. NTrans offered us guidance and assistance with our project by facilitating a lab technician experienced in the work we had to do for our project. We thank them for Clara Martinez’ amazing assistance and patience with our silly questions.</td> |
| | + | <td align="center" valign="middle"><img height="75" src="https://static.igem.org/mediawiki/2017/b/bb/Uuntrans.png"></td> |
| | </tr> | | </tr> |
| | <tr> | | <tr> |
| − | <td><img src=""></td> | + | <td align="center" valign="middle"><img height="100" src=" https://static.igem.org/mediawiki/2017/5/5c/Uuidt.jpg"></td> |
| | <td>Integrated DNA Technologies (IDT) is a company focusing on the development and production of products for life sciences, both for research and diagnostic purposes. They are an important supplier of synthetic DNA & RNA, next generation sequencing services and other tools and products for molecular biology. IDT supports us by offering us 20 kb of free custom DNA.</td> | | <td>Integrated DNA Technologies (IDT) is a company focusing on the development and production of products for life sciences, both for research and diagnostic purposes. They are an important supplier of synthetic DNA & RNA, next generation sequencing services and other tools and products for molecular biology. IDT supports us by offering us 20 kb of free custom DNA.</td> |
| | </tr> | | </tr> |
| | <tr> | | <tr> |
| − | <td><img src=""></td>
| |
| | <td>MathWorks is the leading company on mathematical computing software. Their two primary products are MATLAB, for the development of algorithms and data-analysis, and Simulink, for designing and running simulations of dynamic, multidomain models. These products are a staple in innovation and development in life sciences as well as other fields. Furthermore, MathWorks’ tools are used in research and educational settings. MathWorks provided us with licenses for their fantastic software and technical support.</td> | | <td>MathWorks is the leading company on mathematical computing software. Their two primary products are MATLAB, for the development of algorithms and data-analysis, and Simulink, for designing and running simulations of dynamic, multidomain models. These products are a staple in innovation and development in life sciences as well as other fields. Furthermore, MathWorks’ tools are used in research and educational settings. MathWorks provided us with licenses for their fantastic software and technical support.</td> |
| | + | <td align="center" valign="middle"><img height="75" src="https://static.igem.org/mediawiki/2017/4/43/Uumathworks.png"></td> |
| | </tr> | | </tr> |
| | <tr> | | <tr> |
| − | <td><img src=""></td> | + | <td align="center" valign="middle"><img height="85" src=" https://static.igem.org/mediawiki/2017/2/2a/Uuspeechrepublic.png"></td> |
| | <td>SpeechRepublic offers workshops and programs for the development of communication and presentation skills. There are three elements at the center of their methods: being self-confident, inspiring others and having the courage to bring your message across. They offered our team a free workshop on presenting for four team members. This helps us greatly in preparing for our upcoming presentations, specifically the presentation at the Jamboree in Boston.</td> | | <td>SpeechRepublic offers workshops and programs for the development of communication and presentation skills. There are three elements at the center of their methods: being self-confident, inspiring others and having the courage to bring your message across. They offered our team a free workshop on presenting for four team members. This helps us greatly in preparing for our upcoming presentations, specifically the presentation at the Jamboree in Boston.</td> |
| | </tr> | | </tr> |
| | <tr> | | <tr> |
| − | <td><img src=""></td>
| |
| | <td>New England BioLabs is a company that develops and produces reagents for life sciences research. They offer a wide range of products for molecular biology. They have been generous to many iGEM teams over the years, and supported our team as well this year with a DNA assembly kit.</td> | | <td>New England BioLabs is a company that develops and produces reagents for life sciences research. They offer a wide range of products for molecular biology. They have been generous to many iGEM teams over the years, and supported our team as well this year with a DNA assembly kit.</td> |
| | + | <td align="center" valign="middle"><img height="85" src="https://static.igem.org/mediawiki/2017/d/db/Uubiolabs.png"></td> |
| | </tr> | | </tr> |
| | </table> | | </table> |
| | + | |
| | + | <div style="width: 750px; margin: auto;"> |
| | + | <div style="width: 175px; float: left; text-align: center; line-height: 100px; font-size: 100px; user-select: none;"> |
| | + | <div onclick="jQuery('.sponsors_slider').slick('slickPrev')" style="cursor: pointer;">‹</div> |
| | + | </div> |
| | + | <div class="slider_for" style="float: left; width: 400px;"> |
| | + | <div><b>Utrecht University is a Dutch public university with over 50.000 students.</b> As our home university, they were our first sponsor. They have helped us generously with great financial support, meeting space, PR-facilities and the opportunity to use several labspaces on campus.</div> |
| | + | <div><b>RIVM is the National Institute for Public Health and the Environment, which belongs to the Ministry of Health, Welfare and Sport of the Dutch government.</b> They offered a sponsorship to the Dutch iGEM teams based on an assignment titled ‘think before you do’, stimulating us to think about the societal implications that our project could have. We submitted a proposal and the RIVM offered us a €1500 grant to further our project.</div> |
| | + | <div><b>DSM is a science-based company focusing on health, nutrition and materials to drive sustainable innovation.</b> DSM is active in many different markets, including medicine, energy and food, so developments in synthetic biology are of major interest to them. For our project, they sponsored us with €1000.</div> |
| | + | <div><b>Takara Bio is the biomedical unit of Takara Holdings Inc. and focuses on revolutionary technologies to improve human health.</b> Takara Bio is composed of three units; the Bioindustry division, the AgriBio division and the Gene Therapy division. Takara Bio Europe has offered us a cloning kit and protein purification kit, both of which were frequently used in our experiments.</div> |
| | + | <div><b>Snapgene is a software company, providing useful software for molecular biology.</b> Snapgene offers fast and reliable software to visualize and design molecular biology experiments such as cloning and PCR experiments. They sponsored us with full team licenses for the Snapgene software, which we have used extensively during our project.</div> |
| | + | <div><b>eLabjournal is a product by BIO-ITECH BV, a company providing software as a service for research laboratories.</b> Their eLabjournal product offers a simple and effective software environment to keep our lab notes organized and allows easy access wherever and whenever we need it. eLabjournal sponsored us with full team licenses for their software.</div> |
| | + | <div><b>NTrans Technologies specializes in the delivery of content into cells using the iTOP technology which was developed in the Geijsen lab of the Hubrecht Institute.</b> NTrans offered us guidance and assistance with our project by facilitating a lab technician experienced in the work we had to do for our project. We thank them for Clara Martinez’ amazing assistance and patience with our silly questions.</div> |
| | + | <div><b>Integrated DNA Technologies (IDT) is a company focusing on the development and production of products for life sciences, both for research and diagnostic purposes.</b> They are an important supplier of synthetic DNA & RNA, next generation sequencing services and other tools and products for molecular biology. IDT supports us by offering us 20 kb of free custom DNA.</div> |
| | + | <div><b>MathWorks is the leading company on mathematical computing software.</b> Their two primary products are MATLAB, for the development of algorithms and data-analysis, and Simulink, for designing and running simulations of dynamic, multidomain models. These products are a staple in innovation and development in life sciences as well as other fields. Furthermore, MathWorks’ tools are used in research and educational settings. MathWorks provided us with licenses for their fantastic software and technical support.</div> |
| | + | <div><b>SpeechRepublic offers workshops and programs for the development of communication and presentation skills.</b> There are three elements at the center of their methods: being self-confident, inspiring others and having the courage to bring your message across. They offered our team a free workshop on presenting for four team members. This helps us greatly in preparing for our upcoming presentations, specifically the presentation at the Jamboree in Boston.</div> |
| | + | <div><b>New England BioLabs is a company that develops and produces reagents for life sciences research.</b> They offer a wide range of products for molecular biology. They have been generous to many iGEM teams over the years, and supported our team as well this year with a DNA assembly kit.</div> |
| | + | </div> |
| | + | <div style="width: 175px; float: left; text-align: center; line-height: 100px; font-size: 100px; user-select: none;"> |
| | + | <div onclick="jQuery('.sponsors_slider').slick('slickNext')" style="cursor: pointer;">›</div> |
| | + | </div> |
| | + | </div> |
| | + | |
| | + | <div style="clear: both;"></div> |
| | + | |
| | + | <div class="sponsors_slider" style="width: 100%;"> |
| | + | <div style="width: 150px;"><img src="https://static.igem.org/mediawiki/2017/e/e0/Uu17logo.png"></div> |
| | + | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/e/e6/Uurivm.png"></div> |
| | + | <div style="width: 250px;"><img src="https://static.igem.org/mediawiki/2017/5/5b/Uudsm.jpeg"></div> |
| | + | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/9/92/Uutakara.jpg"></div> |
| | + | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/3/38/Uusnapgene.png"></div> |
| | + | <div style="width: 275px;"><img src="https://static.igem.org/mediawiki/2017/e/e3/Uuelabjournal.png"></div> |
| | + | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/b/bb/Uuntrans.png"></div> |
| | + | <div style="width: 250px;"><img src="https://static.igem.org/mediawiki/2017/5/5c/Uuidt.jpg"></div> |
| | + | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/4/43/Uumathworks.png"></div> |
| | + | <div style="width: 150px;"><img src="https://static.igem.org/mediawiki/2017/2/2a/Uuspeechrepublic.png"></div> |
| | + | <div style="width: 275px;"><img src="https://static.igem.org/mediawiki/2017/d/db/Uubiolabs.png"></div> |
| | + | </div> |
| | + | |
| | + | <script type="text/javascript"> |
| | + | window.setTimeout(function(){ |
| | + | jQuery('.slider_for').slick({ |
| | + | infinite: true, |
| | + | slidesToShow: 1, |
| | + | slidesToScroll: 1, |
| | + | arrows: false, |
| | + | fade: true, |
| | + | asNavFor: '.sponsors_slider' |
| | + | }); |
| | + | jQuery('.sponsors_slider').slick({ |
| | + | infinite: true, |
| | + | slidesToShow: 6, |
| | + | speed: 300, |
| | + | centerMode: true, |
| | + | variableWidth: true, |
| | + | focusOnSelect: true, |
| | + | arrows: false, |
| | + | asNavFor: ".slider_for" |
| | + | }); |
| | + | },1); |
| | + | </script> |
| | + | --> |
| | </script> | | </script> |
| | | | |
| | <script id="page-achievements" type="text/template"> | | <script id="page-achievements" type="text/template"> |
| | <div class="page-heading">Achievements</div> | | <div class="page-heading">Achievements</div> |
| − | 1 | + | |
| | + | Blabla |
| | + | |
| | + | <br><br> |
| | + | |
| | + | <h2 class="subhead" id="subhead-2">Bronze medals</h2> |
| | + | <div class="achievements" style="width: 100%;"> |
| | + | <div style="float: left; width: 300px;"> |
| | + | <b>Register and attend</b><br> |
| | + | We have registered for and will be attending the 2017 iGEM Jamboree in Boston! Our entire team, consisting of 15 students, 4 PIs and 1 supervisor, will be present. |
| | + | </div> |
| | + | <div style="float: left; width: 300px;"> |
| | + | <b>Deliverables</b><br> |
| | + | We have delivered all the required items on the iGEM deliverables page.<br> |
| | + | <ul> |
| | + | <li />Team wiki <a href="">URL</a> |
| | + | <li />Project attribution <a href="">URL</a> |
| | + | <li />Team poster <a href="">URL</a> |
| | + | <li />Safety forms <a href="">URL</a> |
| | + | <li />… |
| | + | </ul> |
| | + | </div> |
| | + | <div style="float: left; width: 300px;">a</div> |
| | + | <div style="float: left; width: 300px;">a</div> |
| | + | <div style="float: left; width: 300px;">a</div> |
| | + | </div> |
| | + | |
| | + | <div style="clear: both;"></div> |
| | + | |
| | + | <br><br> |
| | + | <h2 class="subhead" id="subhead-2">Silver</h2> |
| | + | <div style="width: 100%;"> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | </div> |
| | + | |
| | + | <div style="clear: both;"></div> |
| | + | |
| | + | <br><br> |
| | + | <h2 class="subhead" id="subhead-2">Gold</h2> |
| | + | <div style="width: 100%;"> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | <div style="float: left; width: 200px;">a</div> |
| | + | </div> |
| | + | |
| | + | <div style="clear: both;"></div> |
| | + | |
| | </script> | | </script> |
| | + | |
| | + | <style type="text/css"> |
| | + | .sponsors_slider img { max-height: 85px; max-width: 200px; margin: auto; } |
| | + | .sponsors_slider div { cursor: pointer; } |
| | + | |
| | + | .achievements>div { margin-right: 50px; margin-bottom: 30px; } |
| | + | </style> |
| | | | |
| | <style type="text/css"> | | <style type="text/css"> |
| Line 1,333: |
Line 1,529: |
| | background-color: #6FC6FF; | | background-color: #6FC6FF; |
| | } | | } |
| | + | |
| | + | .sponsors img { padding-right: 20px; } |
| | + | .sponsors td { font-size: 13px; border-bottom: 2px solid #f3f3f3; padding-top: 35px; padding-bottom: 35px; } |
| | + | .sponsors tr:last-child td { border-bottom: 0; } |
| | </style> | | </style> |
| | | | |
| Line 1,457: |
Line 1,657: |
| | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script> | | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script> |
| | <script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script> | | <script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script> |
| | + | |
| | + | <script type="text/javascript" src="slick/slick.min.js"></script> |
| | | | |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| Line 1,515: |
Line 1,717: |
| | }, | | }, |
| | "team" : { | | "team" : { |
| − | 1: "Team", | + | 1: "Students", |
| − | 2: "Hmmmm" | + | 2: "Supervisors" |
| | }, | | }, |
| | "sponsors" : {}, | | "sponsors" : {}, |
| | "achievements" : { | | "achievements" : { |
| − | 1: "Achievements", | + | 1: "Bronze medals", |
| − | 2: "Hmmmm" | + | 2: "Silver medals", |
| | + | 3: "Gold medals" |
| | } | | } |
| | }; | | }; |
| Line 1,560: |
Line 1,763: |
| | menu_container.update(new_html); | | menu_container.update(new_html); |
| | } | | } |
| | + | |
| | + | $$("body")[0].setAttribute("data-page", page); |
| | | | |
| | var page_container = $$(".page-content")[0]; | | var page_container = $$(".page-content")[0]; |
| | var page_content = $("page-" + page); | | var page_content = $("page-" + page); |
| | | | |
| − | page_container.update(page_content.innerHTML); | + | page_container.update(page_content.innerHTML.replace("<!--","").replace("-->","")); |
| | | | |
| | $$(".top-menu")[0].removeClassName("active"); | | $$(".top-menu")[0].removeClassName("active"); |
| Line 1,653: |
Line 1,858: |
| | | | |
| | <style class="cp-pen-styles"> | | <style class="cp-pen-styles"> |
| − | .sponsors td { padding-bottom: 30px; } | + | .shuffle-container .aspect:hover { opacity: 1; } |
| | + | |
| | + | .timeline h1 { |
| | + | font-size: 200%; |
| | + | text-transform: uppercase; |
| | + | letter-spacing: 3px; |
| | + | font-weight: 400; |
| | + | } |
| | + | |
| | + | .timeline header { |
| | + | background: #3F51B5; |
| | + | color: #FFFFFF; |
| | + | padding: 150px 0; |
| | + | } |
| | + | .timeline header p { |
| | + | font-family: 'Allura'; |
| | + | color: rgba(255, 255, 255, 0.2); |
| | + | margin-bottom: 0; |
| | + | font-size: 60px; |
| | + | margin-top: -30px; |
| | + | } |
| | + | |
| | + | .timeline { |
| | + | position: relative; |
| | + | } |
| | + | .timeline::before { |
| | + | content: ''; |
| | + | background: #C5CAE9; |
| | + | width: 5px; |
| | + | height: 95%; |
| | + | position: absolute; |
| | + | left: 50%; |
| | + | transform: translateX(-50%); |
| | + | } |
| | + | |
| | + | .timeline .timeline-item { |
| | + | width: 100%; |
| | + | margin-bottom: 70px; |
| | + | } |
| | + | .timeline .timeline-item:nth-child(even) .timeline-content { |
| | + | float: right; |
| | + | padding: 40px 30px 10px 30px; |
| | + | } |
| | + | .timeline .timeline-item:nth-child(even) .timeline-content .date { |
| | + | right: auto; |
| | + | left: 0; |
| | + | } |
| | + | .timeline .timeline-item:nth-child(even) .timeline-content::after { |
| | + | content: ''; |
| | + | position: absolute; |
| | + | border-style: solid; |
| | + | width: 0; |
| | + | height: 0; |
| | + | top: 30px; |
| | + | left: -15px; |
| | + | border-width: 10px 15px 10px 0; |
| | + | border-color: transparent #f5f5f5 transparent transparent; |
| | + | } |
| | + | .timeline .timeline-item::after { |
| | + | content: ''; |
| | + | display: block; |
| | + | clear: both; |
| | + | } |
| | + | |
| | + | .timeline .timeline-content { |
| | + | position: relative; |
| | + | width: 45%; |
| | + | padding: 10px 30px; |
| | + | border-radius: 4px; |
| | + | background: #f5f5f5; |
| | + | box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3); |
| | + | } |
| | + | .timeline .timeline-content::after { |
| | + | content: ''; |
| | + | position: absolute; |
| | + | border-style: solid; |
| | + | width: 0; |
| | + | height: 0; |
| | + | top: 30px; |
| | + | right: -15px; |
| | + | border-width: 10px 0 10px 15px; |
| | + | border-color: transparent transparent transparent #f5f5f5; |
| | + | } |
| | + | |
| | + | .timeline .timeline-img { |
| | + | width: 30px; |
| | + | height: 30px; |
| | + | background: #3F51B5; |
| | + | border-radius: 50%; |
| | + | position: absolute; |
| | + | left: 50%; |
| | + | margin-top: 25px; |
| | + | margin-left: -15px; |
| | + | } |
| | + | |
| | + | .timeline a { |
| | + | background: #3F51B5; |
| | + | color: #FFFFFF; |
| | + | padding: 8px 20px; |
| | + | text-transform: uppercase; |
| | + | font-size: 14px; |
| | + | margin-bottom: 20px; |
| | + | margin-top: 10px; |
| | + | display: inline-block; |
| | + | border-radius: 2px; |
| | + | box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6); |
| | + | } |
| | + | .timeline a:hover, a:active, a:focus { |
| | + | background: #32408f; |
| | + | color: #FFFFFF; |
| | + | text-decoration: none; |
| | + | } |
| | + | |
| | + | .timeline-card { |
| | + | padding: 0 !important; |
| | + | } |
| | + | .timeline-card p { |
| | + | padding: 0 20px; |
| | + | } |
| | + | .timeline-card a { |
| | + | margin-left: 20px; |
| | + | } |
| | + | |
| | + | .timeline-item .timeline-img-header { |
| | + | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1458530970867-aaa3700e966d") center center no-repeat; |
| | + | background-size: cover; |
| | + | } |
| | + | .timeline-item:nth-child(5) .timeline-img-header { |
| | + | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1444093826349-9ce8c622f4f3") center center no-repeat; |
| | + | background-size: cover; |
| | + | } |
| | + | .timeline-item:nth-child(6) .timeline-img-header { |
| | + | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1471479917193-f00955256257") center center no-repeat; |
| | + | background-size: cover; |
| | + | } |
| | + | .timeline-item:nth-child(8) .timeline-img-header { |
| | + | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1466840787022-48e0ec048c8a") center center no-repeat; |
| | + | background-size: cover; |
| | + | } |
| | + | .timeline-item:nth-child(10) .timeline-img-header { |
| | + | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1447639703758-f525f36456bf") center center no-repeat; |
| | + | background-size: cover; |
| | + | } |
| | + | .timeline-item:nth-child(11) .timeline-img-header { |
| | + | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1469429978400-082eec725ad5") center center no-repeat; |
| | + | background-size: cover; |
| | + | } |
| | + | |
| | + | .timeline-img-header { |
| | + | height: 200px; |
| | + | position: relative; |
| | + | margin-bottom: 20px; |
| | + | } |
| | + | .timeline-img-header h2 { |
| | + | color: #FFFFFF; |
| | + | position: absolute; |
| | + | bottom: 5px; |
| | + | left: 20px; |
| | + | } |
| | + | |
| | + | blockquote { |
| | + | margin-top: 30px; |
| | + | color: #757575; |
| | + | border-left-color: #3F51B5; |
| | + | padding: 0 20px; |
| | + | } |
| | + | |
| | + | .date { |
| | + | background: #FF4081; |
| | + | display: inline-block; |
| | + | color: #FFFFFF; |
| | + | padding: 10px; |
| | + | position: absolute; |
| | + | top: 0; |
| | + | right: 0; |
| | + | } |
| | + | |
| | + | @media screen and (max-width: 768px) { |
| | + | .timeline::before { |
| | + | left: 50px; |
| | + | } |
| | + | .timeline .timeline-img { |
| | + | left: 50px; |
| | + | } |
| | + | .timeline .timeline-content { |
| | + | max-width: 100%; |
| | + | width: auto; |
| | + | margin-left: 70px; |
| | + | } |
| | + | .timeline .timeline-item:nth-child(even) .timeline-content { |
| | + | float: none; |
| | + | } |
| | + | .timeline .timeline-item:nth-child(odd) .timeline-content::after { |
| | + | content: ''; |
| | + | position: absolute; |
| | + | border-style: solid; |
| | + | width: 0; |
| | + | height: 0; |
| | + | top: 30px; |
| | + | left: -15px; |
| | + | border-width: 10px 15px 10px 0; |
| | + | border-color: transparent #f5f5f5 transparent transparent; |
| | + | } |
| | + | } |
| | | | |
| | /* quick grid */ | | /* quick grid */ |
