Oliver0423 (Talk | contribs) |
Oliver0423 (Talk | contribs) |
||
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 |
Revision as of 08:41, 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