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

(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-7 offset-1 col9Attr" data-spy="scroll" data-target="#myScrollspy" style="padding-left: 6em;padding-right: 2em;">
+
                 <div class="col-md-10 offset-1 col9Attr" data-spy="scroll" data-target="#myScrollspy" style="padding-left: 6em;padding-right: 2em;">
−
                     <div class="ImgContainer" style="width: 75%">
+
                     <div class="ImgContainer">
 
                         <figure>
 
                         <figure>
−
                             <img src="https://static.igem.org/mediawiki/2019/c/ca/T--CSMU_Taiwan--gene_red.png" alt="Avatar" class="Img border">
+
                             <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

Stack Multipurpose HTML Template

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