Difference between revisions of "Team:Auckland MOD/Description.html"
| Line 20: | Line 20: | ||
.nav-mobile-fixed { | .nav-mobile-fixed { | ||
top: 40px !important; | top: 40px !important; | ||
| + | } | ||
| + | .content1 { | ||
| + | margin: 98px 0 0 0 !important; | ||
} | } | ||
#HQ_page h1, h2, h3, h4, h5 { | #HQ_page h1, h2, h3, h4, h5 { | ||
font-family: 'Open Sans', sans-serif !important; | font-family: 'Open Sans', sans-serif !important; | ||
margin: 0 0 24px 0 !important; | margin: 0 0 24px 0 !important; | ||
| − | padding: 0 | + | padding: 0; |
text-shadow: none !important; | text-shadow: none !important; | ||
} | } | ||
| Line 81: | Line 84: | ||
font-size: 0.875em; | font-size: 0.875em; | ||
letter-spacing: 0.75px; | letter-spacing: 0.75px; | ||
| + | } | ||
| + | #bodyContent .contact-text { | ||
| + | padding-left: 28px !important; | ||
| + | padding-right: 28px !important; | ||
| + | } | ||
| + | #bodyContent .contact-text:hover { | ||
| + | text-decoration: none; | ||
} | } | ||
#bodyContent .contact-text { | #bodyContent .contact-text { | ||
| Line 203: | Line 213: | ||
background-color: #ccc9c2; | background-color: #ccc9c2; | ||
z-index: 5; | z-index: 5; | ||
| + | overflow-x: scroll; | ||
| + | white-space: nowrap; | ||
} | } | ||
@media (max-width: 640px) { | @media (max-width: 640px) { | ||
| Line 270: | Line 282: | ||
} | } | ||
} | } | ||
| − | . | + | .cta-button-1 { |
position: fixed; | position: fixed; | ||
top: 0; | top: 0; | ||
| Line 278: | Line 290: | ||
background-color: #408042; | background-color: #408042; | ||
} | } | ||
| − | . | + | .cta-button-1:hover { |
background-color: #336635; | background-color: #336635; | ||
} | } | ||
| − | . | + | .cta-text { |
line-height: 48px; | line-height: 48px; | ||
padding: 16px 28px; | padding: 16px 28px; | ||
| Line 368: | Line 380: | ||
} | } | ||
@media (max-width: 640px) { | @media (max-width: 640px) { | ||
| − | .content1 | + | .content1 { |
margin: 70px 0 0 0 !important; | margin: 70px 0 0 0 !important; | ||
| + | } | ||
| + | } | ||
| + | @media (max-width: 640px) { | ||
| + | .content5 { | ||
| + | margin: 96px 0 0 0 !important; | ||
} | } | ||
} | } | ||
| Line 425: | Line 442: | ||
display: inline-block; | display: inline-block; | ||
opacity: 0; | opacity: 0; | ||
| + | } | ||
| + | .show-image-carousel { | ||
| + | bottom: 0; | ||
} | } | ||
.show-image p:hover { | .show-image p:hover { | ||
| Line 556: | Line 576: | ||
} | } | ||
| − | . | + | .tab-content-left, .tab-content-right { |
| − | + | position: absolute; | |
} | } | ||
| − | . | + | |
| − | display: | + | .tab-text-wrap, .tab-img-wrap { |
| − | + | width: 50%; | |
| + | display: inline; | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
} | } | ||
| − | . | + | |
| − | + | .tab-content-left img, .tab-content-right img { | |
| − | + | max-height: 200px; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | |
| − | width: | + | .tab-content-left p { |
| − | + | width: 50%; | |
| − | + | float: left; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | |
| − | + | .tab-content-right p { | |
| − | + | width: 50%; | |
| + | float: right; | ||
} | } | ||
| − | . | + | |
| − | + | .content2 { | |
| − | + | display: block; | |
| + | top: 0; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | padding: 0; | ||
} | } | ||
| − | . | + | |
| − | + | .profile-photo { | |
| − | + | max-width: 50%; | |
| + | margin: 0; | ||
} | } | ||
| − | + | @media (max-width: 640px) { | |
| − | + | .profile-photo { | |
| + | max-width: 70%; | ||
| + | } | ||
} | } | ||
| − | . | + | .profile-name { |
| − | + | margin: 30px 0 0 0 !important; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .profile-role { |
| − | + | margin: 6px 0 24px 0 !important; | |
| − | + | font-weight: 400; | |
| − | + | opacity: 0.5; | |
| − | + | font-size: 1.27em; | |
| − | + | ||
} | } | ||
| − | . | + | .profile-new-member { |
| − | + | padding-bottom: 0; | |
| + | } | ||
| + | |||
| + | .alumni-content-wrap { | ||
| + | width: 100%; | ||
| + | text-align: center; | ||
overflow: hidden; | overflow: hidden; | ||
| − | + | margin: 96px 0 0 0; | |
} | } | ||
| − | . | + | .alumni-slider-wrap { |
| − | + | position: relative; | |
| + | width: 250%; | ||
| + | animation: 45s alumni-slider-wrap infinite linear; | ||
} | } | ||
| − | . | + | @media (max-width: 980px) { |
| − | + | .alumni-slider-wrap { | |
| + | width: 326.53%; | ||
| + | animation: 34s alumni-slider-wrap infinite linear; | ||
| + | } | ||
} | } | ||
| − | + | @media (max-width: 767px) { | |
| − | + | .alumni-slider-wrap { | |
| − | + | width: 416.67%; | |
| − | + | animation: 27s alumni-slider-wrap infinite linear; | |
| + | } | ||
} | } | ||
| − | . | + | @media (max-width: 480px) { |
| + | .alumni-slider-wrap { | ||
| + | width: 500%; | ||
| + | animation: 23s alumni-slider-wrap infinite linear; | ||
| + | } | ||
| + | } | ||
| + | .alumni-profile { | ||
display: inline-block; | display: inline-block; | ||
| − | + | width: 10%; | |
| − | + | margin: 12px 0 0 0; | |
} | } | ||
| − | . | + | .alumni-profile img, .alumni-profile p { |
| − | + | position: relative; | |
| − | + | display: block; | |
| − | + | line-height: 3em; | |
| − | + | ||
} | } | ||
| − | . | + | .alumni-profile img { |
| + | width: 50%; | ||
| + | margin: 0 25%; | ||
| + | } | ||
| + | .alumni-profile p { | ||
| + | width: 100%; | ||
| + | } | ||
| + | @keyframes alumni-slider-wrap { | ||
| + | 0% { transform: translate(0%, 0%) } | ||
| + | 100% { transform: translate(-50%, 0) } | ||
| + | } | ||
| + | |||
| + | .content5 { | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | margin-top: 98px; | ||
background-image: url(https://static.igem.org/mediawiki/2018/f/f3/T--Auckland_MOD--lab.jpg); | background-image: url(https://static.igem.org/mediawiki/2018/f/f3/T--Auckland_MOD--lab.jpg); | ||
| − | |||
| − | |||
background-size: cover; | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
} | } | ||
| − | . | + | .carousel-buffer { |
| − | + | height: 96px; | |
| + | width: 100%; | ||
} | } | ||
| − | . | + | .carousel-wrap { |
| − | padding: | + | width: 400%; |
| + | left: 0%; | ||
| + | position: relative; | ||
| + | padding: 0; | ||
| + | background-color: rgba(0,0,0,0.7); | ||
| + | transition: background 0.4s ease-in-out; | ||
| + | } | ||
| + | .carousel-headers, .carousel-paragraphs { | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | text-align: left; | ||
| + | left: 0; | ||
| + | transition: opacity 0.4s ease-in-out; | ||
| + | } | ||
| + | .carousel-headers, .carousel-paragraphs { | ||
| + | width: 100%; | ||
| + | padding: 0 96px; | ||
| + | } | ||
| + | .carousel-paragraphs p { | ||
| + | width: calc(12.5% - 96px); | ||
| + | text-align: left !important; | ||
| + | display: inline-block; | ||
| + | vertical-align: text-top; | ||
| + | margin-right: calc(12.5% + 96px); | ||
} | } | ||
@media (max-width: 980px) { | @media (max-width: 980px) { | ||
| − | . | + | .carousel-paragraphs p { |
| − | + | width: calc(12.5% + 96px); | |
| + | margin-right: calc(12.5% - 96px); | ||
} | } | ||
| − | . | + | h1.carousel-header-1, h1.carousel-header-2, h1.carousel-header-3, h1.carousel-header-4, h1.carousel-header-5 { |
| − | + | font-size: 2em !important; | |
} | } | ||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
| − | . | + | h1.carousel-header-1, h1.carousel-header-2, h1.carousel-header-3, h1.carousel-header-4, h1.carousel-header-5 { |
| − | + | font-size: 1.5em !important; | |
} | } | ||
| − | . | + | } |
| − | + | @media (max-width: 640px) { | |
| + | .carousel-headers, .carousel-paragraphs { | ||
| + | padding: 0 48px; | ||
} | } | ||
| − | . | + | .carousel-paragraphs p { |
| − | + | width: calc(25% - 96px); | |
| − | + | margin-right: 96px; | |
| − | + | ||
| − | width: | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
} | } | ||
| − | @media (max-width: | + | @media (max-width: 480px) { |
| − | . | + | .carousel-paragraphs p { |
| − | + | text-align: center !important; | |
} | } | ||
| − | . | + | h1.carousel-header-1, h1.carousel-header-2, h1.carousel-header-3, h1.carousel-header-4, h1.carousel-header-5 { |
| − | + | font-size: 1.75em !important; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
} | } | ||
| − | + | h1.carousel-header-1, h1.carousel-header-2, h1.carousel-header-3, h1.carousel-header-4, h1.carousel-header-5 { | |
| − | + | text-align: left; | |
| − | display: block; | + | display: inline-block; |
| − | + | width: calc(12.5% - 48px); | |
| − | + | padding-right: 48px !important; | |
| − | + | font-size: 2.5em; | |
| − | + | transition: opacity .3s ease-in-out; | |
| + | -moz-transition: opacity .3s ease-in-out; | ||
| + | -webkit-transition: opacity .3s ease-in-out; | ||
| + | -o-transition: opacity .3s ease-in-out; | ||
| + | } | ||
| + | .carousel-header-2, .carousel-header-3, .carousel-header-4, .carousel-header-5 { | ||
| + | opacity: 0.4; | ||
| + | } | ||
| + | .carousel-header-1:hover, .carousel-header-2:hover, .carousel-header-3:hover, .carousel-header-4:hover, .carousel-header-5:hover { | ||
| + | opacity: 1 !important; | ||
} | } | ||
| Line 1,071: | Line 1,139: | ||
margin: 0; | margin: 0; | ||
} | } | ||
| − | |||
.menu-dropdown-header-wrap { | .menu-dropdown-header-wrap { | ||
height: 48px; | height: 48px; | ||
| Line 1,346: | Line 1,413: | ||
.content1 { | .content1 { | ||
background-image: url(https://static.igem.org/mediawiki/2018/f/f3/T--Auckland_MOD--lab.jpg); | background-image: url(https://static.igem.org/mediawiki/2018/f/f3/T--Auckland_MOD--lab.jpg); | ||
| − | margin: | + | margin: 48px 0 0 0; |
} | } | ||
} | } | ||
| Line 2,653: | Line 2,720: | ||
<script> | <script> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| − | $(".copy1").on("mouseup", function() { | + | $(".copy1").on("mouseup touchend", function() { |
$(this).css("background", "rgba(0,0,0,0.7)"); | $(this).css("background", "rgba(0,0,0,0.7)"); | ||
$(".copy1 p").css("color", "rgba(230,227,218,1)"); | $(".copy1 p").css("color", "rgba(230,227,218,1)"); | ||
$(".copy1 h1").css("color", "rgba(230,227,218,1)"); | $(".copy1 h1").css("color", "rgba(230,227,218,1)"); | ||
| − | $(".copy1 a").css("color", " | + | $(".copy1 a").css("color", "rgba(97,140,234,1)"); |
$(".copy1 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | $(".copy1 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | ||
$(".copy1 h1").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | $(".copy1 h1").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | ||
| Line 2,664: | Line 2,731: | ||
$("form").css("opacity", "1"); | $("form").css("opacity", "1"); | ||
}) | }) | ||
| − | $(".copy1").on("mousedown", function() { | + | $(".copy1").on("mousedown touchstart", function() { |
$(this).css("background", "rgba(0,0,0,0.15)"); | $(this).css("background", "rgba(0,0,0,0.15)"); | ||
$(".copy1 p").css("color", "rgba(230,227,218,0)"); | $(".copy1 p").css("color", "rgba(230,227,218,0)"); | ||
| Line 2,681: | Line 2,748: | ||
$(".show-image-1").css("opacity", "0"); | $(".show-image-1").css("opacity", "0"); | ||
}) | }) | ||
| − | $(".expandable-content-1").on("mouseup", function() { | + | $(".carousel-buffer").on("mouseup touchend", function() { |
| + | $(".carousel-wrap").css("background", "rgba(0,0,0,0.7)"); | ||
| + | $(".carousel-headers").css("opacity", "1"); | ||
| + | $(".carousel-paragraphs").css("opacity", "1"); | ||
| + | $(".show-image-carousel").css("opacity", "0.4"); | ||
| + | }) | ||
| + | $(".carousel-paragraphs").on("mouseup touchend", function() { | ||
| + | $(".carousel-wrap").css("background", "rgba(0,0,0,0.7)"); | ||
| + | $(".carousel-headers").css("opacity", "1"); | ||
| + | $(".carousel-paragraphs").css("opacity", "1"); | ||
| + | $(".show-image-carousel").css("opacity", "0.4"); | ||
| + | }) | ||
| + | $(".show-image-carousel").on("mouseup touchend", function() { | ||
| + | $(".carousel-wrap").css("background", "rgba(0,0,0,0.7)"); | ||
| + | $(".carousel-headers").css("opacity", "1"); | ||
| + | $(".carousel-paragraphs").css("opacity", "1"); | ||
| + | $(".show-image-carousel").css("opacity", "0.4"); | ||
| + | }) | ||
| + | $(".carousel-buffer").on("mousedown touchstart", function() { | ||
| + | $(".carousel-wrap").css("background", "rgba(0,0,0,0.15)"); | ||
| + | $(".carousel-headers").css("opacity", "0"); | ||
| + | $(".carousel-paragraphs").css("opacity", "0"); | ||
| + | $(".show-image-carousel").css("opacity", "0"); | ||
| + | }) | ||
| + | $(".carousel-paragraphs").on("mousedown touchstart", function() { | ||
| + | $(".carousel-wrap").css("background", "rgba(0,0,0,0.15)"); | ||
| + | $(".carousel-headers").css("opacity", "0"); | ||
| + | $(".carousel-paragraphs").css("opacity", "0"); | ||
| + | $(".show-image-carousel").css("opacity", "0"); | ||
| + | }) | ||
| + | $(".show-image-carousel").on("mousedown touchstart", function() { | ||
| + | $(".carousel-wrap").css("background", "rgba(0,0,0,0.15)"); | ||
| + | $(".carousel-headers").css("opacity", "0"); | ||
| + | $(".carousel-paragraphs").css("opacity", "0"); | ||
| + | $(".show-image-carousel").css("opacity", "0"); | ||
| + | }) | ||
| + | $(".content5").mouseover(function() { | ||
| + | $(".show-image-carousel").css("opacity", "0.4"); | ||
| + | }) | ||
| + | $(".content5").mouseout(function() { | ||
| + | $(".show-image-carousel").css("opacity", "0"); | ||
| + | }) | ||
| + | $(".expandable-content-1").on("mouseup touchend", function() { | ||
$(this).css("background", "rgba(0,0,0,0.7)"); | $(this).css("background", "rgba(0,0,0,0.7)"); | ||
$(".expandable-content-1 p").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-1 p").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-1 h4").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-1 h4").css("color", "rgba(230,227,218,1)"); | ||
| − | $(".expandable-content-1 a").css("color", " | + | $(".expandable-content-1 a").css("color", "rgba(97,140,234,1)"); |
$(".expandable-content-1 li").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-1 li").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-1 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | $(".expandable-content-1 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | ||
| Line 2,692: | Line 2,801: | ||
$(".expandable-content-1 img").css("opacity", "1"); | $(".expandable-content-1 img").css("opacity", "1"); | ||
}) | }) | ||
| − | $(".expandable-content-1").on("mousedown", function() { | + | $(".expandable-content-1").on("mousedown touchstart", function() { |
$(this).css("background", "rgba(0,0,0,0.15)"); | $(this).css("background", "rgba(0,0,0,0.15)"); | ||
$(".expandable-content-1 p").css("color", "rgba(230,227,218,0)"); | $(".expandable-content-1 p").css("color", "rgba(230,227,218,0)"); | ||
| Line 2,709: | Line 2,818: | ||
$(".show-image-2").css("opacity", "0"); | $(".show-image-2").css("opacity", "0"); | ||
}) | }) | ||
| − | $(".expandable-content-2").on("mouseup", function() { | + | $(".expandable-content-2").on("mouseup touchend", function() { |
$(this).css("background", "rgba(0,0,0,0.7)"); | $(this).css("background", "rgba(0,0,0,0.7)"); | ||
$(".expandable-content-2 p").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-2 p").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-2 h4").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-2 h4").css("color", "rgba(230,227,218,1)"); | ||
| − | $(".expandable-content-2 a").css("color", " | + | $(".expandable-content-2 a").css("color", "rgba(97,140,234,1)"); |
$(".expandable-content-2 li").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-2 li").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-2 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | $(".expandable-content-2 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | ||
| Line 2,720: | Line 2,829: | ||
$(".expandable-content-2 img").css("opacity", "1"); | $(".expandable-content-2 img").css("opacity", "1"); | ||
}) | }) | ||
| − | $(".expandable-content-2").on("mousedown", function() { | + | $(".expandable-content-2").on("mousedown touchstart", function() { |
$(this).css("background", "rgba(0,0,0,0.15)"); | $(this).css("background", "rgba(0,0,0,0.15)"); | ||
$(".expandable-content-2 p").css("color", "rgba(230,227,218,0)"); | $(".expandable-content-2 p").css("color", "rgba(230,227,218,0)"); | ||
| Line 2,737: | Line 2,846: | ||
$(".show-image-3").css("opacity", "0"); | $(".show-image-3").css("opacity", "0"); | ||
}) | }) | ||
| − | $(".expandable-content-3").on("mouseup", function() { | + | $(".expandable-content-3").on("mouseup touchend", function() { |
$(this).css("background", "rgba(0,0,0,0.7)"); | $(this).css("background", "rgba(0,0,0,0.7)"); | ||
$(".expandable-content-3 p").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-3 p").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-3 h4").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-3 h4").css("color", "rgba(230,227,218,1)"); | ||
| − | $(".expandable-content-3 a").css("color", " | + | $(".expandable-content-3 a").css("color", "rgba(97,140,234,1)"); |
$(".expandable-content-3 li").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-3 li").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-3 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | $(".expandable-content-3 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | ||
| Line 2,748: | Line 2,857: | ||
$(".expandable-content-3 img").css("opacity", "1"); | $(".expandable-content-3 img").css("opacity", "1"); | ||
}) | }) | ||
| − | $(".expandable-content-3").on("mousedown", function() { | + | $(".expandable-content-3").on("mousedown touchstart", function() { |
$(this).css("background", "rgba(0,0,0,0.15)"); | $(this).css("background", "rgba(0,0,0,0.15)"); | ||
$(".expandable-content-3 p").css("color", "rgba(230,227,218,0)"); | $(".expandable-content-3 p").css("color", "rgba(230,227,218,0)"); | ||
| Line 2,765: | Line 2,874: | ||
$(".show-image-4").css("opacity", "0"); | $(".show-image-4").css("opacity", "0"); | ||
}) | }) | ||
| − | $(".expandable-content-4").on("mouseup", function() { | + | $(".expandable-content-4").on("mouseup touchend", function() { |
$(this).css("background", "rgba(0,0,0,0.7)"); | $(this).css("background", "rgba(0,0,0,0.7)"); | ||
$(".expandable-content-4 p").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-4 p").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-4 h4").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-4 h4").css("color", "rgba(230,227,218,1)"); | ||
| − | $(".expandable-content-4 a").css("color", " | + | $(".expandable-content-4 a").css("color", "rgba(97,140,234,1)"); |
$(".expandable-content-4 li").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-4 li").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-4 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | $(".expandable-content-4 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | ||
| Line 2,776: | Line 2,885: | ||
$(".expandable-content-4 img").css("opacity", "1"); | $(".expandable-content-4 img").css("opacity", "1"); | ||
}) | }) | ||
| − | $(".expandable-content-4").on("mousedown", function() { | + | $(".expandable-content-4").on("mousedown touchstart", function() { |
$(this).css("background", "rgba(0,0,0,0.15)"); | $(this).css("background", "rgba(0,0,0,0.15)"); | ||
$(".expandable-content-4 p").css("color", "rgba(230,227,218,0)"); | $(".expandable-content-4 p").css("color", "rgba(230,227,218,0)"); | ||
| Line 2,793: | Line 2,902: | ||
$(".show-image-5").css("opacity", "0"); | $(".show-image-5").css("opacity", "0"); | ||
}) | }) | ||
| − | $(".expandable-content-5").on("mouseup", function() { | + | $(".expandable-content-5").on("mouseup touchend", function() { |
$(this).css("background", "rgba(0,0,0,0.7)"); | $(this).css("background", "rgba(0,0,0,0.7)"); | ||
$(".expandable-content-5 p").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-5 p").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-5 h4").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-5 h4").css("color", "rgba(230,227,218,1)"); | ||
| − | $(".expandable-content-5 a").css("color", " | + | $(".expandable-content-5 a").css("color", "rgba(97,140,234,1)"); |
$(".expandable-content-5 li").css("color", "rgba(230,227,218,1)"); | $(".expandable-content-5 li").css("color", "rgba(230,227,218,1)"); | ||
$(".expandable-content-5 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | $(".expandable-content-5 p").css("text-shadow", "0 0 48px rgba(26,25,23,1)"); | ||
| Line 2,804: | Line 2,913: | ||
$(".expandable-content-5 img").css("opacity", "1"); | $(".expandable-content-5 img").css("opacity", "1"); | ||
}) | }) | ||
| − | $(".expandable-content-5").on("mousedown", function() { | + | $(".expandable-content-5").on("mousedown touchstart", function() { |
$(this).css("background", "rgba(0,0,0,0.15)"); | $(this).css("background", "rgba(0,0,0,0.15)"); | ||
$(".expandable-content-5 p").css("color", "rgba(230,227,218,0.2)"); | $(".expandable-content-5 p").css("color", "rgba(230,227,218,0.2)"); | ||
| Line 2,821: | Line 2,930: | ||
$(".show-image-6").css("opacity", "0"); | $(".show-image-6").css("opacity", "0"); | ||
}) | }) | ||
| − | $(".testimonial-wrap-1").on("mouseup", function() { | + | $(".testimonial-wrap-1").on("mouseup touchend", function() { |
$(".testimonial-wrap-2").css("background", "rgba(0,0,0,0.7)"); | $(".testimonial-wrap-2").css("background", "rgba(0,0,0,0.7)"); | ||
$(".testimonial-wrap-2 p").css("color", "rgba(230,227,218,1)"); | $(".testimonial-wrap-2 p").css("color", "rgba(230,227,218,1)"); | ||
$(".testimonial-wrap-2 h4").css("color", "rgba(230,227,218,1)"); | $(".testimonial-wrap-2 h4").css("color", "rgba(230,227,218,1)"); | ||
| − | $(".testimonial-wrap-2 a").css("color", " | + | $(".testimonial-wrap-2 a").css("color", "rgba(97,140,234,1)"); |
$(".testimonial-wrap-2 li").css("color", "rgba(230,227,218,1)"); | $(".testimonial-wrap-2 li").css("color", "rgba(230,227,218,1)"); | ||
$(".testimonial-wrap-1 p").css("color", "rgba(230,227,218,1)"); | $(".testimonial-wrap-1 p").css("color", "rgba(230,227,218,1)"); | ||
| Line 2,835: | Line 2,944: | ||
$(".quote-icon-2").css("opacity", "0.2"); | $(".quote-icon-2").css("opacity", "0.2"); | ||
}) | }) | ||
| − | $(".testimonial-wrap-1").on("mousedown", function() { | + | $(".testimonial-wrap-1").on("mousedown touchstart", function() { |
$(".testimonial-wrap-2").css("background", "rgba(0,0,0,0.15)"); | $(".testimonial-wrap-2").css("background", "rgba(0,0,0,0.15)"); | ||
$(".testimonial-wrap-2 p").css("color", "rgba(230,227,218,0)"); | $(".testimonial-wrap-2 p").css("color", "rgba(230,227,218,0)"); | ||
| Line 2,855: | Line 2,964: | ||
$(".show-image-7").css("opacity", "0"); | $(".show-image-7").css("opacity", "0"); | ||
}) | }) | ||
| − | $(". | + | $(".carousel-header-1").click(function() { |
| − | $(". | + | $(".carousel-header-1").animate({opacity: '1'}); |
| − | $(". | + | $(".carousel-header-2").animate({opacity: '0.35'}); |
| − | $(". | + | $(".carousel-header-3").animate({opacity: '0.35'}); |
| − | $(". | + | $(".carousel-header-4").animate({opacity: '0.35'}); |
| − | + | $(".carousel-header-5").animate({opacity: '0.35'}); | |
| − | $(". | + | $(".carousel-headers").animate({left: '0'}, 1000); |
| − | + | $(".carousel-paragraphs").animate({left: '0'}, 1000); | |
| − | $(". | + | |
| − | $(". | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
}) | }) | ||
| − | $(". | + | $(".carousel-header-2").click(function() { |
| − | $(". | + | $(".carousel-header-2").animate({opacity: '1'}); |
| − | $(". | + | $(".carousel-header-1").animate({opacity: '0.35'}); |
| − | $(". | + | $(".carousel-header-3").animate({opacity: '0.35'}); |
| − | $(". | + | $(".carousel-header-4").animate({opacity: '0.35'}); |
| − | + | $(".carousel-header-5").animate({opacity: '0.35'}); | |
| − | + | $(".carousel-headers").animate({left: '-12.5%'}, 1000); | |
| − | + | $(".carousel-paragraphs").animate({left: '-25%'}, 1000); | |
| − | $(". | + | |
| − | $(". | + | |
| − | + | ||
| − | + | ||
| − | $(". | + | |
| − | + | ||
}) | }) | ||
| − | $(". | + | $(".carousel-header-3").click(function() { |
| − | $(". | + | $(".carousel-header-3").animate({opacity: '1'}); |
| − | $(". | + | $(".carousel-header-2").animate({opacity: '0.35'}); |
| − | $(". | + | $(".carousel-header-1").animate({opacity: '0.35'}); |
| − | $(". | + | $(".carousel-header-4").animate({opacity: '0.35'}); |
| − | + | $(".carousel-header-5").animate({opacity: '0.35'}); | |
| − | + | $(".carousel-headers").animate({left: '-25%'}, 1000); | |
| − | + | $(".carousel-paragraphs").animate({left: '-50%'}, 1000); | |
| − | $(". | + | |
| − | $(". | + | |
| − | + | ||
| − | $(". | + | |
| − | + | ||
| − | + | ||
}) | }) | ||
| − | $(". | + | $(".carousel-header-4").click(function() { |
| − | + | $(".carousel-header-2").animate({opacity: '0.35'}); | |
| − | + | $(".carousel-header-3").animate({opacity: '0.35'}); | |
| − | + | $(".carousel-header-5").animate({opacity: '0.35'}); | |
| − | + | $(".carousel-header-4").animate({opacity: '1'}); | |
| − | + | $(".carousel-header-1").animate({opacity: '1'}); | |
| − | + | $(".carousel-headers").animate({left: '-37.5%'}, 1000); | |
| − | + | $(".carousel-paragraphs").animate({left: '-75%'}, 1000); | |
| − | + | $(".carousel-headers").animate({left: '0'}, 0); | |
| − | + | $(".carousel-paragraphs").animate({left: '0'}, 0); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | $(". | + | |
| − | $(". | + | |
| − | + | ||
| − | $(". | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | $(". | + | |
| − | + | ||
| − | + | ||
| − | $(". | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | $(". | + | |
| − | + | ||
| − | $(". | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | $(". | + | |
| − | $(". | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
}) | }) | ||
}); | }); | ||
| Line 3,079: | Line 3,092: | ||
<ul> | <ul> | ||
<a href="https://2018.igem.org/Team:Auckland_MOD"><img class="logo-text" src="https://static.igem.org/mediawiki/2018/5/50/T--Auckland_MOD--MOD-logo-animated.svg"/></a><!-- | <a href="https://2018.igem.org/Team:Auckland_MOD"><img class="logo-text" src="https://static.igem.org/mediawiki/2018/5/50/T--Auckland_MOD--MOD-logo-animated.svg"/></a><!-- | ||
| − | --><a href="https://2018.igem.org/Team:Auckland_MOD/Description.html"><li | + | --><a href="https://2018.igem.org/Team:Auckland_MOD/Description.html"><li>Project</li></a><!-- |
| − | --><a href="https://2018.igem.org/Team:Auckland_MOD/Public_Engagement.html"><li>Community</li></a><!-- | + | --><a href="https://2018.igem.org/Team:Auckland_MOD/Public_Engagement.html"><li class="current-parent disabled">Community</li></a><!-- |
--><a href="https://2018.igem.org/Team:Auckland_MOD/Team.html"><li>Team</li></a><!-- | --><a href="https://2018.igem.org/Team:Auckland_MOD/Team.html"><li>Team</li></a><!-- | ||
--><a href="https://2018.igem.org/Team:Auckland_MOD/Entrepreneurship.html"><li>Awards</li></a><!-- | --><a href="https://2018.igem.org/Team:Auckland_MOD/Entrepreneurship.html"><li>Awards</li></a><!-- | ||
| Line 3,089: | Line 3,102: | ||
<nav class="nav-desktop-submenu"> | <nav class="nav-desktop-submenu"> | ||
<ul> | <ul> | ||
| − | <a href="https://2018.igem.org/Team:Auckland_MOD/ | + | <a href="https://2018.igem.org/Team:Auckland_MOD/Public_Engagement.html"><li class="current-page disabled">Public engagement</li></a><!-- |
| − | --><a href="https://2018.igem.org/Team:Auckland_MOD/ | + | --><a href="https://2018.igem.org/Team:Auckland_MOD/Human_Practices.html"><li>Human practices</li></a> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</ul> | </ul> | ||
</nav> | </nav> | ||
| Line 3,103: | Line 3,110: | ||
<div class="copy1"> | <div class="copy1"> | ||
| − | <h1> | + | <h1>Public engagement</h1> |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus. Fusce ac orci felis.</p> | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus. Fusce ac orci felis.</p> | ||
<div class="show-image show-image-1"> | <div class="show-image show-image-1"> | ||
| Line 3,134: | Line 3,141: | ||
<div class="content2"> | <div class="content2"> | ||
| + | |||
<div class="copy2"> | <div class="copy2"> | ||
<h2>Header</h2> | <h2>Header</h2> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus.</p> | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus.</p> | ||
</div> | </div> | ||
| + | |||
</div> | </div> | ||
| − | <div class=" | + | <div class="content5"> |
| − | + | <div class="carousel-wrap"> | |
| − | < | + | <div class="carousel-buffer"></div> |
| − | < | + | <div class="carousel-headers"> |
| − | + | <h1 class="carousel-header-1">1. Insert header here</h1><!-- | |
| − | + | --><h1 class="carousel-header-2">2. Insert header here</h1><!-- | |
| − | + | --><h1 class="carousel-header-3">3. Insert header here</h1><!-- | |
| − | + | --><h1 class="carousel-header-4">1. Insert header here</h1><!-- | |
| − | < | + | --><h1 class="carousel-header-5">2. Insert header here</h1> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | -->< | + | |
| − | -->< | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <div class="carousel-paragraphs"> | |
| − | + | <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus. Fusce ac orci felis.</p><!-- | |
| − | + | --><p>2. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus. Fusce ac orci felis.</p><!-- | |
| − | + | --><p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus.</p><!-- | |
| − | < | + | --><p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus. Fusce ac orci felis. |
| − | -->< | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | <div class=" | + | <div class="carousel-buffer"></div> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <div class="show-image show-image-1 show-image-carousel"> | |
| − | <div class="show-image show-image- | + | |
<p>Hold to view image</p> | <p>Hold to view image</p> | ||
<img src="https://static.igem.org/mediawiki/2018/5/5a/T--Auckland_MOD--show-image.svg"> | <img src="https://static.igem.org/mediawiki/2018/5/5a/T--Auckland_MOD--show-image.svg"> | ||
</div> | </div> | ||
</div> | </div> | ||
| − | |||
| − | |||
<div class="content3"> | <div class="content3"> | ||
Revision as of 09:36, 2 September 2018
Public engagement
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus. Fusce ac orci felis.
Hold to view image
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus.
1. Insert header here
2. Insert header here
3. Insert header here
1. Insert header here
2. Insert header here
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus. Fusce ac orci felis.
2. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus. Fusce ac orci felis.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus.
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ex pellentesque, facilisis sapien cursus, porta ex. Ut ultrices tortor nulla, vel mattis dui feugiat eget. Aenean egestas mollis erat a finibus. Ut maximus, elit quis rutrum interdum, neque diam mattis tortor, ac placerat dolor ipsum aliquet tortor. Etiam viverra neque quis odio consequat consequat. Nulla facilisi. Fusce pharetra augue sit amet est euismod posuere vitae sed purus. Fusce ac orci felis.
Hold to view image
Keen to talk?
If you're interested, have questions, or want to know more, don't hesitate to contact us directly.
© MOD 2018
