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