Difference between revisions of "Team:Auckland MOD/Team.html"
| Line 411: | Line 411: | ||
} | } | ||
| − | .copy1, .expandable-content-1, .expandable-content-2, .expandable-content-3, .expandable-content-4, .expandable-content-5, .expandable-content-6, .testimonial-wrap-1, .testimonial-wrap-2 | + | .copy1, .expandable-content-1, .expandable-content-2, .expandable-content-3, .expandable-content-4, .expandable-content-5, .expandable-content-6, .testimonial-wrap-1, .testimonial-wrap-2 { |
background-color: rgba(0,0,0,0.7); | background-color: rgba(0,0,0,0.7); | ||
transition: all 0.4s ease-in-out; | transition: all 0.4s ease-in-out; | ||
} | } | ||
| − | .copy1 p, .copy1 h1, .copy1 img, .copy1 a, .expandable-content-1 p, .expandable-content-1 h1, .expandable-content-1 img, .expandable-content-1 a, .expandable-content-2 p, .expandable-content-2 h1, .expandable-content-2 img, .expandable-content-2 a, .expandable-content-3 p, .expandable-content-3 h1, .expandable-content-3 img, .expandable-content-3 a, .expandable-content-4 p, .expandable-content-4 h1, .expandable-content-4 img, .expandable-content-4 a, .expandable-content-5 p, .expandable-content-5 h1, .expandable-content-5 img, .expandable-content-5 a, .expandable-content-6 p, .expandable-content-6 h1, .expandable-content-6 img, .expandable-content-6 a, .testimonial-wrap-2 p, .testimonial-wrap-2 h4, .testimonial-wrap-2 a, .testimonial-wrap-2 li, .testimonial-wrap-2 img, .show-image, .show-image p, .show-image img, form | + | .copy1 p, .copy1 h1, .copy1 img, .copy1 a, .expandable-content-1 p, .expandable-content-1 h1, .expandable-content-1 img, .expandable-content-1 a, .expandable-content-2 p, .expandable-content-2 h1, .expandable-content-2 img, .expandable-content-2 a, .expandable-content-3 p, .expandable-content-3 h1, .expandable-content-3 img, .expandable-content-3 a, .expandable-content-4 p, .expandable-content-4 h1, .expandable-content-4 img, .expandable-content-4 a, .expandable-content-5 p, .expandable-content-5 h1, .expandable-content-5 img, .expandable-content-5 a, .expandable-content-6 p, .expandable-content-6 h1, .expandable-content-6 img, .expandable-content-6 a, .testimonial-wrap-2 p, .testimonial-wrap-2 h4, .testimonial-wrap-2 a, .testimonial-wrap-2 li, .testimonial-wrap-2 img, .show-image, .show-image p, .show-image img, form { |
transition: all 0.4s ease-in-out; | transition: all 0.4s ease-in-out; | ||
-webkit-user-select: none; | -webkit-user-select: none; | ||
| Line 423: | Line 423: | ||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
| − | .copy1, .expandable-content-1, .expandable-content-2, .expandable-content-3, .expandable-content-4, .expandable-content-5, .expandable-content-6, .testimonial-wrap-1, .testimonial-wrap-2, .copy1 p, .copy1 h1, .copy1 img, .copy1 a, .expandable-content-1 p, .expandable-content-1 h1, .expandable-content-1 img, .expandable-content-1 a, .expandable-content-2 p, .expandable-content-2 h1, .expandable-content-2 img, .expandable-content-2 a, .expandable-content-3 p, .expandable-content-3 h1, .expandable-content-3 img, .expandable-content-3 a, .expandable-content-4 p, .expandable-content-4 h1, .expandable-content-4 img, .expandable-content-4 a, .expandable-content-5 p, .expandable-content-5 h1, .expandable-content-5 img, .expandable-content-5 a, .expandable-content-6 p, .expandable-content-6 h1, .expandable-content-6 img, .expandable-content-6 a, .testimonial-wrap-2 p, .testimonial-wrap-2 h4, .testimonial-wrap-2 a, .testimonial-wrap-2 li, .testimonial-wrap-2 img, .show-image, .show-image p, .show-image img | + | .copy1, .expandable-content-1, .expandable-content-2, .expandable-content-3, .expandable-content-4, .expandable-content-5, .expandable-content-6, .testimonial-wrap-1, .testimonial-wrap-2, .copy1 p, .copy1 h1, .copy1 img, .copy1 a, .expandable-content-1 p, .expandable-content-1 h1, .expandable-content-1 img, .expandable-content-1 a, .expandable-content-2 p, .expandable-content-2 h1, .expandable-content-2 img, .expandable-content-2 a, .expandable-content-3 p, .expandable-content-3 h1, .expandable-content-3 img, .expandable-content-3 a, .expandable-content-4 p, .expandable-content-4 h1, .expandable-content-4 img, .expandable-content-4 a, .expandable-content-5 p, .expandable-content-5 h1, .expandable-content-5 img, .expandable-content-5 a, .expandable-content-6 p, .expandable-content-6 h1, .expandable-content-6 img, .expandable-content-6 a, .testimonial-wrap-2 p, .testimonial-wrap-2 h4, .testimonial-wrap-2 a, .testimonial-wrap-2 li, .testimonial-wrap-2 img, .show-image, .show-image p, .show-image img { |
transition: all 0.3s ease-in-out 0.3s; | transition: all 0.3s ease-in-out 0.3s; | ||
} | } | ||
| Line 609: | Line 609: | ||
background-size: 100%; | background-size: 100%; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
| + | } | ||
| + | .carousel-buffer { | ||
| + | height: 96px; | ||
| + | width: 100%; | ||
} | } | ||
.carousel-wrap { | .carousel-wrap { | ||
| Line 614: | Line 618: | ||
left: 0%; | left: 0%; | ||
position: relative; | position: relative; | ||
| − | padding: | + | padding: 0; |
background-color: rgba(0,0,0,0.7); | background-color: rgba(0,0,0,0.7); | ||
| + | transition: opacity 0.4s ease-in-out; | ||
} | } | ||
.carousel-headers, .carousel-paragraphs { | .carousel-headers, .carousel-paragraphs { | ||
| Line 622: | Line 627: | ||
text-align: left; | text-align: left; | ||
left: 0; | left: 0; | ||
| + | transition: opacity 0.4s ease-in-out; | ||
} | } | ||
.carousel-headers, .carousel-paragraphs { | .carousel-headers, .carousel-paragraphs { | ||
| Line 2,662: | Line 2,668: | ||
$(".show-image-1").css("opacity", "0"); | $(".show-image-1").css("opacity", "0"); | ||
}) | }) | ||
| − | + | $(".carousel-buffer").on("mouseup touchend", function() { | |
$(".carousel-wrap").css("background", "rgba(0,0,0,0.7)"); | $(".carousel-wrap").css("background", "rgba(0,0,0,0.7)"); | ||
$(".carousel-headers").css("opacity", "1"); | $(".carousel-headers").css("opacity", "1"); | ||
| Line 2,703: | Line 2,709: | ||
$(".content5").mouseout(function() { | $(".content5").mouseout(function() { | ||
$(".show-image-carousel").css("opacity", "0"); | $(".show-image-carousel").css("opacity", "0"); | ||
| − | }) | + | }) |
$(".expandable-content-1").on("mouseup touchend", function() { | $(".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)"); | ||
| Line 3,025: | Line 3,031: | ||
<div class="content5"> | <div class="content5"> | ||
<div class="carousel-wrap"> | <div class="carousel-wrap"> | ||
| + | <div class="carousel-buffer"></div> | ||
<div class="carousel-headers"> | <div class="carousel-headers"> | ||
<h1 class="carousel-header-1">1. Insert header here</h1><!-- | <h1 class="carousel-header-1">1. Insert header here</h1><!-- | ||
| Line 3,038: | Line 3,045: | ||
--><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>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="carousel-buffer"></div> | ||
| + | </div> | ||
| + | <div class="show-image show-image-1 show-image-carousel"> | ||
| + | <p>Hold to view image</p> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/5/5a/T--Auckland_MOD--show-image.svg"> | ||
</div> | </div> | ||
</div> | </div> | ||
Revision as of 02:57, 1 September 2018
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
About our project or something
Words can go in here if you want (or not). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis nibh ut quam pellentesque eleifend. Quisque posuere dolor vitae quam tincidunt placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis nibh ut quam pellentesque eleifend. Quisque posuere dolor vitae quam tincidunt placerat.
"Competing in iGEM required more strength, endurance, and sacrifice than any other project I have undertaken. But nothing could have prepared me more for the post graduate study I am now pursuing than formulating and completing our project as an independent scienctist."
Judith Glasson, Alumni
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
