Oliver0423 (Talk | contribs) |
Oliver0423 (Talk | contribs) (Undo revision 244750 by Oliver0423 (talk)) |
||
Line 3: | Line 3: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | figure { | ||
+ | margin-block-start: 1em; | ||
+ | margin-block-end: 1em; | ||
+ | margin-inline-start: 40px; | ||
+ | margin-inline-end: 40px; | ||
+ | max-width: 100%; | ||
+ | box-sizing: border-box; | ||
+ | padding: 0; | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | overflow: hidden; | ||
+ | border-radius: 1vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | .pictureTitle{ | ||
+ | background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.6)), url("https://static.igem.org/mediawiki/2018/b/ba/T--Munich--home_Team.jpg"); | ||
+ | |||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | background-position:center; | ||
+ | |||
+ | } | ||
+ | .ImgContainer { | ||
+ | position: relative; | ||
+ | cursor:zoom-in; | ||
+ | } | ||
+ | |||
+ | .Img { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | opacity: 1; | ||
+ | border-width: 2px !important; | ||
+ | border-color: white; | ||
+ | } | ||
+ | |||
+ | .ImgOverlay { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | transition: .5s ease; | ||
+ | background-color: rgba(30,30,30,1); | ||
+ | z-index: 99; | ||
+ | } | ||
+ | |||
+ | |||
+ | .ImgContainer:hover .ImgOverlay { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .ImgContainer.mobileShow .ImgOverlay { | ||
+ | visibility: visible; | ||
+ | opacity: 0.97; | ||
+ | transition: .5s ease; | ||
+ | } | ||
+ | .ImgContainer.mobileShow .Img { | ||
+ | transition: .5s ease; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .ImgContainer.mobileShow { | ||
+ | cursor:zoom-out; | ||
+ | } | ||
+ | |||
+ | .ImgText { | ||
+ | color: rgba(220,220,220,1); | ||
+ | position: absolute; | ||
+ | top: 15%; | ||
+ | left: 10%; | ||
+ | -webkit-transform: translate(-5%, -10%); | ||
+ | -ms-transform: translate(-5%, -10%); | ||
+ | transform: translate(-5%, -10%); | ||
+ | } | ||
+ | .ImgText p{ | ||
+ | font-size:16px; | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | .ImgText b{ | ||
+ | font-size:20px; | ||
+ | color: rgba(255,255,255,1); | ||
+ | } | ||
+ | |||
+ | .parallax { | ||
+ | /* The image used */ | ||
+ | |||
+ | |||
+ | /* Full height */ | ||
+ | height: 50vh; | ||
+ | |||
+ | /* Create the parallax scrolling effect */ | ||
+ | background-attachment: fixed; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 575.98px) { | ||
+ | .ImgText { | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media only screen and (min-width: 575.98px) { | ||
+ | .ImgText { | ||
+ | font-size: 1.5rem; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media only screen and (min-width: 767.98px) { | ||
+ | |||
+ | .ImgText { | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | @media only screen and (min-width: 991.98px) { | ||
+ | |||
+ | .ImgText { | ||
+ | font-size: 1.2rem; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | @media only screen and (min-width: 1199.98px) { | ||
+ | .ImgText { | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | .ImgOverlay { | ||
+ | width: 100%; | ||
+ | top: 100%; | ||
+ | height:140%; | ||
+ | } | ||
+ | .Img { | ||
+ | transition: .5s ease; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | .Img:nth-child(2){ | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | opacity: 0; | ||
+ | transition: opacity 0.3s ease-in-out | ||
+ | } | ||
+ | .Img:nth-child(2):hover{ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | |||
/************************************************************************ | /************************************************************************ | ||
Tables | Tables | ||
Line 123: | Line 283: | ||
<div class="container"> | <div class="container"> | ||
<div class="row"> | <div class="row"> | ||
− | <div class="col-md- | + | <div class="col-md-10 offset-1 col9Attr" data-spy="scroll" data-target="#myScrollspy" style="padding-left: 6em;padding-right: 2em;"> |
− | <div class="ImgContainer | + | <div class="ImgContainer"> |
<figure> | <figure> | ||
− | <img src="https://static.igem.org/mediawiki/2019/c/ca/T--CSMU_Taiwan--gene_red.png | + | <img src="https://static.igem.org/mediawiki/2019/thumb/c/ca/T--CSMU_Taiwan--gene_red.png/613px-T--CSMU_Taiwan--gene_red.png"> |
<img src="https://static.igem.org/mediawiki/2019/8/88/T--CSMU_Taiwan--student3-1.png" alt="Avatar" class="Img border"> | <img src="https://static.igem.org/mediawiki/2019/8/88/T--CSMU_Taiwan--student3-1.png" alt="Avatar" class="Img border"> | ||
</figure> | </figure> | ||
Line 152: | Line 312: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(function() { | $(function() { | ||
+ | $(".ImgContainer").click(function() { | ||
+ | $(".ImgContainer").not(this).removeClass("mobileShow"); | ||
+ | $(this).toggleClass("mobileShow"); | ||
+ | }); | ||
+ | }); | ||
removeSection = function(e) { | removeSection = function(e) { | ||
$(e).parents(".section").remove(); | $(e).parents(".section").remove(); |
Revision as of 08:45, 13 October 2019
Field of Study: Biology
Fun Fact: I´m always hungry for sweets.
Why iGEM: I want to collect new experiences, additionally I love teamspirit.
header 1
paragraph