|
|
| (24 intermediate revisions by 3 users not shown) |
| Line 6: |
Line 6: |
| | | | |
| | #sideMenu, #top_title {display:none;} | | #sideMenu, #top_title {display:none;} |
| − | #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;} | + | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;background-color: transparent;} |
| − | body {background-color: white; } | + | body {background-color: transparent; } |
| | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } |
| | | | |
| Line 20: |
Line 20: |
| | background-color:#f2f2f2; | | background-color:#f2f2f2; |
| | text-align:left; | | text-align:left; |
| | + | display:none; |
| | } | | } |
| | | | |
| Line 84: |
Line 85: |
| | .menu_item a { | | .menu_item a { |
| | width: 100%; | | width: 100%; |
| − | margin-left: -20px; | + | /*margin-left: -20px;*/ |
| | padding: 11px 90px 12px 20px; | | padding: 11px 90px 12px 20px; |
| | text-decoration: none; | | text-decoration: none; |
| − | color:black; | + | color:black; |
| | + | text-align:left; |
| | } | | } |
| | | | |
| Line 170: |
Line 172: |
| | padding:10px 0px; | | padding:10px 0px; |
| | float:left; | | float:left; |
| − | background-color:white; | + | background-color:transparent; |
| | } | | } |
| | | | |
| | /*LAYOUT */ | | /*LAYOUT */ |
| | .column { | | .column { |
| − | padding: 10px 0px; | + | padding: 100px 0px; |
| | float:left; | | float:left; |
| | background-color:white; | | background-color:white; |
| Line 341: |
Line 343: |
| | .menu_item {display:none;} | | .menu_item {display:none;} |
| | .menu_wrapper { width:100%; height: 15%; position:relative;} | | .menu_wrapper { width:100%; height: 15%; position:relative;} |
| − | .content_wrapper {width:100%; margin-left:0px;} | + | .content_wrapper {width:100%; margin-left:0px;background-color: transparent;} |
| | .column.half_size {width:100%; } | | .column.half_size {width:100%; } |
| | .column img { width: 100%; padding: 5px 0px;} | | .column img { width: 100%; padding: 5px 0px;} |
| Line 347: |
Line 349: |
| | .highlight {padding:15px 5px;} | | .highlight {padding:15px 5px;} |
| | } | | } |
| − | /*======================== Slideshow =========================*/
| |
| − | .sp-slideshow {
| |
| − | position: relative;
| |
| − | margin-left: -10px;
| |
| − | width: 100%;
| |
| − | max-width: 1000px;
| |
| − | min-width: 260px;
| |
| − | height: 385px;
| |
| − | border: 10px solid #fff;
| |
| − | border: 10px solid rgba(255,255,255,0.9);
| |
| − | box-shadow: 0 2px 6px rgba(0,0,0,0.2);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .sp-slideshow_S{
| |
| − | position: relative;
| |
| − | margin-left: 100px;
| |
| − | width: 100%;
| |
| − | max-width: 650px;
| |
| − | min-width: 260px;
| |
| − | height: 385px;
| |
| − | border: 10px solid #fff;
| |
| − | border: 10px solid rgba(255,255,255,0.9);
| |
| − | box-shadow: 0 2px 6px rgba(0,0,0,0.2);
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .sp-content {
| |
| − | background:none;
| |
| − | position: relative;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .sp-parallax-bg {
| |
| − | background: url('https://static.igem.org/mediawiki/2014/c/c0/Wageningen_UR_slide_background.png') repeat-x scroll 0 0;
| |
| − | -webkit-background-size: cover;
| |
| − | -moz-background-size: cover;
| |
| − | background-size: cover;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .sp-slideshow input, .sp-slideshow_S input {
| |
| − | position: absolute;
| |
| − | bottom: 15px;
| |
| − | left: 50%;
| |
| − | width: 9px;
| |
| − | height: 9px;
| |
| − | z-index: 1001;
| |
| − | cursor: pointer;
| |
| − | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
| |
| − | filter: alpha(opacity=0);
| |
| − | opacity: 0;
| |
| − | }
| |
| − |
| |
| − | .sp-slideshow input + label, .sp-slideshow_S input + label {
| |
| − | position: absolute;
| |
| − | bottom: 15px;
| |
| − | left: 50%;
| |
| − | width: 6px;
| |
| − | height: 6px;
| |
| − | display: block;
| |
| − | z-index: 1000;
| |
| − | border: 3px solid #fff;
| |
| − | border: 3px solid rgba(255,255,255,0.9);
| |
| − | -webkit-border-radius: 50%;
| |
| − | -moz-border-radius: 50%;
| |
| − | border-radius: 50%;
| |
| − | -webkit-transition: background-color linear 0.1s;
| |
| − | -moz-transition: background-color linear 0.1s;
| |
| − | -o-transition: background-color linear 0.1s;
| |
| − | -ms-transition: background-color linear 0.1s;
| |
| − | transition: background-color linear 0.1s;
| |
| − | }
| |
| − | .sp-slideshow input:checked + label, .sp-slideshow_S input:checked + label {
| |
| − | background-color: #fff;
| |
| − | background-color: rgba(255,255,255,0.9);
| |
| − | }
| |
| − |
| |
| − | .sp-selector-1, .button-label-1 {
| |
| − | margin-left: -54px;
| |
| − | }
| |
| − | .sp-selector-2, .button-label-2 {
| |
| − | margin-left: -36px;
| |
| − | }
| |
| − | .sp-selector-3, .button-label-3 {
| |
| − | margin-left: -18px;
| |
| − | }
| |
| − | .sp-selector-4, .button-label-4 {
| |
| − | margin-left: 0px;
| |
| − | }
| |
| − | .sp-selector-5, .button-label-5 {
| |
| − | margin-left: 18px;
| |
| − | }
| |
| − | .sp-selector-6, .button-label-6 {
| |
| − | margin-left: 36px;
| |
| − | }
| |
| − | .sp-selector-7, .button-label-7 {
| |
| − | margin-left: 54px;
| |
| − | }
| |
| − | .sp-selector-8, .button-label-8 {
| |
| − | margin-left: 72px;
| |
| − | }
| |
| − |
| |
| − | .sp-arrow {
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | width: 28px;
| |
| − | height: 38px;
| |
| − | margin-top: -19px;
| |
| − | display: none;
| |
| − | opacity: 0.8;
| |
| − | cursor: pointer;
| |
| − | z-index: 1000;
| |
| − | background: transparent url('https://static.igem.org/mediawiki/2014/4/4b/Wageningen_UR_arrows.png') no-repeat;
| |
| − | -webkit-transition: opacity linear 0.3s;
| |
| − | -moz-transition: opacity linear 0.3s;
| |
| − | -o-transition: opacity linear 0.3s;
| |
| − | -ms-transition: opacity linear 0.3s;
| |
| − | transition: opacity linear 0.3s;
| |
| − | }
| |
| − | .sp-arrow:hover{
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .sp-arrow:active{
| |
| − | margin-top: -18px;
| |
| − | }
| |
| − | .sp-selector-1:checked ~ .sp-arrow.sp-a2,
| |
| − | .sp-selector-2:checked ~ .sp-arrow.sp-a3,
| |
| − | .sp-selector-3:checked ~ .sp-arrow.sp-a4,
| |
| − | .sp-selector-4:checked ~ .sp-arrow.sp-a5,
| |
| − | .sp-selector-5:checked ~ .sp-arrow.sp-a6,
| |
| − | .sp-selector-6:checked ~ .sp-arrow.sp-a7,
| |
| − | .sp-selector-7:checked ~ .sp-arrow.sp-a8 {
| |
| − | right: 15px;
| |
| − | display: block;
| |
| − | background-position: top right;
| |
| − | }
| |
| − | .sp-selector-2:checked ~ .sp-arrow.sp-a1,
| |
| − | .sp-selector-3:checked ~ .sp-arrow.sp-a2,
| |
| − | .sp-selector-4:checked ~ .sp-arrow.sp-a3,
| |
| − | .sp-selector-5:checked ~ .sp-arrow.sp-a4,
| |
| − | .sp-selector-6:checked ~ .sp-arrow.sp-a5,
| |
| − | .sp-selector-7:checked ~ .sp-arrow.sp-a6,
| |
| − | .sp-selector-8:checked ~ .sp-arrow.sp-a7 {
| |
| − | left: 15px;
| |
| − | display: block;
| |
| − | background-position: top left;
| |
| − | }
| |
| − |
| |
| − | .sp-slideshow input:checked ~ .sp-content, .sp-slideshow_S input:checked ~ .sp-content {
| |
| − | -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | -o-transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | }
| |
| − |
| |
| − | .sp-slideshow input:checked ~ .sp-content .sp-parallax-bg, .sp-slideshow_S input:checked ~ .sp-content .sp-parallax-bg {
| |
| − | -webkit-transition: background-position linear 0.7s;
| |
| − | -moz-transition: background-position linear 0.7s;
| |
| − | -o-transition: background-position linear 0.7s;
| |
| − | -ms-transition: background-position linear 0.7s;
| |
| − | transition: background-position linear 0.7s;
| |
| − | }
| |
| − |
| |
| − | input.sp-selector-1:checked ~ .sp-content {
| |
| − | background-position: 0 0;
| |
| − | background-color: #727b7f;
| |
| − | }
| |
| − | input.sp-selector-2:checked ~ .sp-content {
| |
| − | background-position: -100px 0;
| |
| − | background-color: #7f7276;
| |
| − | }
| |
| − | input.sp-selector-3:checked ~ .sp-content {
| |
| − | background-position: -200px 0;
| |
| − | background-color: #737f72;
| |
| − | }
| |
| − | input.sp-selector-4:checked ~ .sp-content {
| |
| − | background-position: -300px 0;
| |
| − | background-color: #79727f;
| |
| − | }
| |
| − | input.sp-selector-5:checked ~ .sp-content {
| |
| − | background-position: -400px 0;
| |
| − | background-color: #7d7f72;
| |
| − | }
| |
| − | input.sp-selector-6:checked ~ .sp-content {
| |
| − | background-position: -500px 0;
| |
| − | background-color: #7d7f72;
| |
| − | }
| |
| − | input.sp-selector-7:checked ~ .sp-content {
| |
| − | background-position: -600px 0;
| |
| − | background-color: #7d7f72;
| |
| − | }
| |
| − | input.sp-selector-8:checked ~ .sp-content {
| |
| − | background-position: -700px 0;
| |
| − | background-color: #7d7f72;
| |
| − | }
| |
| − |
| |
| − | input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: 0 0;
| |
| − | }
| |
| − | input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -200px 0;
| |
| − | }
| |
| − | input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -400px 0;
| |
| − | }
| |
| − | input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -600px 0;
| |
| − | }
| |
| − | input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -800px 0;
| |
| − | }
| |
| − | input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -1000px 0;
| |
| − | }
| |
| − | input.sp-selector-7:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -1200px 0;
| |
| − | }
| |
| − | input.sp-selector-8:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -1400px 0;
| |
| − | }
| |
| − |
| |
| − | .sp-slider {
| |
| − | position: relative;
| |
| − | left: 0;
| |
| − | width: 800%;
| |
| − | height: 100%;
| |
| − | list-style: none;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | -webkit-transition: left ease-in 0.8s;
| |
| − | -moz-transition: left ease-in 0.8s;
| |
| − | -o-transition: left ease-in 0.8s;
| |
| − | -ms-transition: left ease-in 0.8s;
| |
| − | transition: left ease-in 0.8s;
| |
| − | }
| |
| − |
| |
| − | .sp-slider > li {
| |
| − | color: #fff;
| |
| − | width: 12.5%;
| |
| − | list-style:none;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | -o-box-sizing: border-box;
| |
| − | -ms-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − |
| |
| − | padding: 0 1% 0 0;
| |
| − |
| |
| − | height: 100%;
| |
| − |
| |
| − | float: left;
| |
| − | text-align: center;
| |
| − | opacity: 0.4;
| |
| − | -webkit-transition: opacity ease-in 0.4s 0.8s;
| |
| − | -moz-transition: opacity ease-in 0.4s 0.8s;
| |
| − | -o-transition: opacity ease-in 0.4s 0.8s;
| |
| − | -ms-transition: opacity ease-in 0.4s 0.8s;
| |
| − | transition: opacity ease-in 0.4s 0.8s;
| |
| − | }
| |
| − |
| |
| − | .sp-slider > li img{
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | -o-box-sizing: border-box;
| |
| − | -ms-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | display: block;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .big li img{
| |
| − | margin: 0 55px;
| |
| − | padding: 40px 0 50px 0;
| |
| − | width:790px;
| |
| − | max-height:100%;
| |
| − | }
| |
| − |
| |
| − | .small li img {
| |
| − | margin: 0 70px;
| |
| − | padding: 20px 0 60px 0;
| |
| − | max-height: 100%;
| |
| − | max-width: 100%;
| |
| − | }
| |
| − | input.sp-selector-1:checked ~ .sp-content .sp-slider {
| |
| − | left: 0;
| |
| − | }
| |
| − | input.sp-selector-2:checked ~ .sp-content .sp-slider {
| |
| − | left: -100%;
| |
| − | }
| |
| − | input.sp-selector-3:checked ~ .sp-content .sp-slider {
| |
| − | left: -200%;
| |
| − | }
| |
| − | input.sp-selector-4:checked ~ .sp-content .sp-slider {
| |
| − | left: -300%;
| |
| − | }
| |
| − | input.sp-selector-5:checked ~ .sp-content .sp-slider {
| |
| − | left: -400%;
| |
| − | }
| |
| − | input.sp-selector-6:checked ~ .sp-content .sp-slider {
| |
| − | left: -500%;
| |
| − | }
| |
| − | input.sp-selector-7:checked ~ .sp-content .sp-slider {
| |
| − | left: -600%;
| |
| − | }
| |
| − | input.sp-selector-8:checked ~ .sp-content .sp-slider {
| |
| − | left: -700%;
| |
| − | }
| |
| − |
| |
| − | input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
| |
| − | input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
| |
| − | input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
| |
| − | input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
| |
| − | input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5),
| |
| − | input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6),
| |
| − | input.sp-selector-7:checked ~ .sp-content .sp-slider > li:nth-child(7),
| |
| − | input.sp-selector-8:checked ~ .sp-content .sp-slider > li:nth-child(8){
| |
| − | opacity: 1;
| |
| − | }
| |
| − | @media screen and (max-width: 840px){
| |
| − | .sp-slideshow { height: 345px; }
| |
| − | }
| |
| − | @media screen and (max-width: 680px){
| |
| − | .sp-slideshow { height: 285px; }
| |
| − | }
| |
| − | @media screen and (max-width: 560px){
| |
| − | .sp-slideshow { height: 235px; }
| |
| − | }
| |
| − | @media screen and (max-width: 320px){
| |
| − | .sp-slideshow { height: 158px; }
| |
| − | }
| |
| − |
| |
| | </style> | | </style> |
| | | | |
| Line 782: |
Line 443: |
| | | | |
| | <div class="content_wrapper"> | | <div class="content_wrapper"> |
| − |
| |
| − |
| |
| − |
| |
| − | <h1 id="team_name"> </h1>
| |
| − | <h4 id="page_name"> </h4>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | <script> | | <script> |
