Difference between revisions of "Team:CSMU Taiwan/Improve"

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

Stack Multipurpose HTML Template

Avatar Avatar

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