Difference between revisions of "Team:CAU China"

Line 1: Line 1:
−
 
  
 
{{CAU_China/Top}}
 
{{CAU_China/Top}}
  
−
<html>
+
/* Scroll Down Icon*/
 +
#goToBox {
 +
position: relative;
 +
width: 30px;
 +
height: 28px;
 +
left: calc(50% - 15px);
 +
}
 +
.chevron {
 +
position: absolute;
 +
width: 28px;
 +
height: 8px;
 +
opacity: 0;
 +
transform: scale3d(0.5, 0.5, 0.5);
 +
animation: move 3s ease-out infinite;
 +
}
 +
 
 +
.chevron:first-child {
 +
animation: move 3s ease-out 1s infinite;
 +
}
 +
 
 +
.chevron:nth-child(2) {
 +
animation: move 3s ease-out 2s infinite;
 +
}
 +
 
 +
.chevron:before,
 +
.chevron:after {
 +
content: ' ';
 +
position: absolute;
 +
top: 0;
 +
height: 100%;
 +
width: 51%;
 +
background: #fff;
 +
}
 +
 
 +
.chevron:before {
 +
left: 0;
 +
transform: skew(0deg, 30deg);
 +
}
 +
 
 +
.chevron:after {
 +
right: 0;
 +
width: 50%;
 +
transform: skew(0deg, -30deg);
 +
}
 +
 
 +
@keyframes move {
 +
25% {
 +
opacity: 1;
 +
 
 +
}
 +
33% {
 +
opacity: 1;
 +
transform: translateY(30px);
 +
}
 +
67% {
 +
opacity: 1;
 +
transform: translateY(40px);
 +
}
 +
100% {
 +
opacity: 0;
 +
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
 +
}
 +
}
 +
 
 +
@keyframes pulse {
 +
to {
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
 
 +
 
 +
/* FlowChart*/
 +
.circleO {
 +
height: 60px;
 +
width: 60px;
 +
padding: auto;
 +
border-radius: 50%;
 +
background-color: rgba(230,230,230,1);
 +
color: black;
 +
z-index: 2;
 +
}
 +
.circleO img {
 +
max-height: 40px;
 +
width: auto;
 +
}
 +
.circleS {
 +
height: 60px;
 +
width: 60px;
 +
padding: auto;
 +
border-radius: 50%;
 +
background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1));
 +
color: black;
 +
z-index: 2;
 +
}
 +
.circleS img {
 +
max-height: 40px;
 +
width: auto;
 +
}
 +
.circleM {
 +
height: 100px;
 +
width: 100px;
 +
padding: auto;
 +
border-radius: 50%;
 +
background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1));
 +
color: black;
 +
z-index: 2;
 +
1,101,224
 +
}
 +
.circleM img {
 +
max-height: 80px;
 +
width: auto;
 +
}
 +
.circleL {
 +
height: 160px;
 +
width: 160px;
 +
padding: auto;
 +
border-radius: 50%;
 +
background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1));
 +
color: black;
 +
z-index: 2;
 +
}
 +
.circleL img {
 +
max-height: 130px;
 +
width: auto;
 +
}
 +
#conceptFlow h5{
 +
font-weight: bold;
 +
font-size: 2rem;
 +
margin-bottom: 30px;
 +
color:#009ec6;
 +
}
 +
#conceptFlow span{
 +
font-size: 1.5rem;
 +
}
 +
/* height of each section*/   
 +
.how-it-works.row{
 +
height: 50vh
 +
}
 +
.how-it-works.row .col-3 {
 +
align-self: stretch;
 +
}
 +
.how-it-works.row .col-3::after {
 +
content: "";
 +
position: absolute;
 +
border-left: 3px solid rgba(82, 187, 199,1);
 +
z-index: 1;
 +
}
 +
.diagnosis.row .col-3::after {
 +
content: "";
 +
position: absolute;
 +
border-left: 3px dotted rgba(82, 187, 199,1);
 +
z-index: 1;
 +
}
 +
.how-it-works.row .col-3.bottom::after {
 +
height: 50%;
 +
left: 50%;
 +
top: 50%;
 +
}
 +
.how-it-works.row .col-3.full::after {
 +
height: 100%;
 +
left: calc(50% - 3px);
 +
}
 +
.how-it-works.row .col-3.fullRight::after {
 +
height: 100%;
 +
left: 50%;
 +
}
 +
.how-it-works.row .col-3.top::after {
 +
height: 50%;
 +
left: calc(50% - 3px);
 +
top: 0;
 +
border: 2px dotted rgba(82, 187, 199,1);
 +
}
 +
 
 +
 
 +
.timeline div {
 +
padding: 0;
 +
height: 40px;
 +
}
 +
.timeline hr {
 +
border-top: 3px solid rgba(82, 187, 199,1);
 +
background-color: transparent;
 +
margin: 0;
 +
top: 17px;
 +
position: relative;
 +
}
 +
.timeline .col-3 {
 +
display: flex;
 +
overflow: hidden;
 +
}
 +
.timeline .corner {
 +
border: 3px solid rgba(82, 187, 199,1);
 +
width: 100%;
 +
position: relative;
 +
border-radius: 15px;
 +
}
 +
.timeline .top-right {
 +
left: 50%;
 +
top: -50%;
 +
}
 +
.timeline .left-bottom {
 +
left: -50%;
 +
top: calc(50% - 3px);
 +
}
 +
.timeline .top-left {
 +
left: -50%;
 +
top: -50%;
 +
}
 +
.timeline .right-bottom {
 +
left: 50%;
 +
top: calc(50% - 3px);
 +
}
 +
 
 +
/* Qoutes Part*/     
 +
#warnPics {
 +
height: auto;
 +
min-height: 20vw;
 +
font-weight: 100;
 +
}
 +
 
 +
#warnPics .qoutes span{
 +
font-size: 1.5rem;
 +
}
 +
#warnPics .qoutes{
 +
 
 +
}
 +
 
 +
#qoute1 {
 +
background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/c/c9/T--Munich--death_background.png");
 +
background-repeat: no-repeat;
 +
background-size: cover;
 +
background-position: center;
 +
color: #fff;
 +
} 
 +
#qoute2 {
 +
background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/4/4e/T--Munich--WarningPic1.jpg");
 +
background-repeat: no-repeat;
 +
background-size: cover;
 +
background-position: center;
 +
color: #fff;
 +
} 
 +
#qoute3 {
 +
background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/6/66/T--Munich--PHAGE.jpg");
 +
background-repeat: no-repeat;
 +
background-size: cover;
 +
background-position: top;
 +
color: #fff;
 +
}
 +
 
 +
#whyTitle { background:rgba(35, 35, 35, 1); }
 +
.warningContent span { font-size:2.5rem; font-weight:bold;}
 +
   
 +
.mobileText{
 +
font-size:1.5rem !important;
 +
margin-top: 3rem;
 +
}
 +
 
 +
 
 +
   
 +
#conceptFlowTitle  { 
 +
font-size: 2.5rem;
 +
font-weight: bold;
 +
}
 +
 
 +
 
 +
 
 +
/* START PopUp STYLES */
 +
.labelBox{
 +
  display: inline;
 +
}
 +
.reg {
 +
  background-color: white;
 +
  display: inline;
 +
  margin: 0 auto;
 +
  width: auto;
 +
  font-size: 16.996px;
 +
  line-height: 20px;
 +
  padding: 12px 18px 13px;
 +
  -webkit-border-radius: 6px;
 +
  -moz-border-radius: 6px;
 +
  -ms-border-radius: 6px;
 +
  -o-border-radius: 6px;
 +
  border-radius: 6px;
 +
  -webkit-transition: all 0.3s ease-in-out;
 +
  -moz-transition: all 0.3s ease-in-out;
 +
  transition: all 0.3s ease-in-out;
 +
  color: #009ec6;
 +
  cursor: pointer;
 +
  border: none;
 +
  text-decoration: underline;
 +
}
 +
.reg:hover {
 +
  opacity: 0.8;
 +
  -webkit-transition: all 0.3s ease-in-out;
 +
  -moz-transition: all 0.3s ease-in-out;
 +
  transition: all 0.3s ease-in-out;
 +
}
 +
.pop {
 +
  display: none;
 +
  position: absolute;
 +
  top: 75%;
 +
  max-width:100%;
 +
  height: auto;
 +
  -webkit-border-radius: 6px;
 +
  -moz-border-radius: 6px;
 +
  -ms-border-radius: 6px;
 +
  -o-border-radius: 6px;
 +
  border-radius: 6px;
 +
  z-index: 200;
 +
  padding: 10px;
 +
  background-color: rgba(240, 240, 240, 1);
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +
}
 +
.pop > h1 {
 +
  color: #009ec6;
 +
  font-size: 100%;
 +
}
 +
.pop > p {
 +
  font-size: 100%;
 +
  color: #777777;
 +
}
 +
.pop > span {
 +
  cursor: pointer;
 +
  position: absolute;
 +
  top: 10px;
 +
  right: 10px;
 +
  -webkit-border-radius: 100px;
 +
  -moz-border-radius: 100px;
 +
  color: #777777;
 +
  width: 30px;
 +
  height: 30px;
 +
}
 +
/* END PopUp STYLES */
 +
 
 +
.mobileTitle  {
 +
font-size: 3.5rem !important;
 +
}
 +
.readButton, .readButton:visited{ 
 +
color:#17a2b8;
 +
}
 +
.readButton:hover  { 
 +
color:white;
 +
}
 +
   
 +
.showCase .row{ 
 +
padding-left: 10vw;
 +
padding-right: 10vw;
 +
}
 +
 
 +
@media only screen and (max-width: 767.98px) {
 +
#videoBox #videoShow{
 +
position: relative;
 +
right: 120%;
 +
}
 +
#PhactoryTitle {
 +
font-size: 4rem;
 +
}
 +
#PhactoryText {
 +
font-size: 1.5rem;
 +
}
 +
.warningContent span{
 +
font-size: 1.5rem;
 +
}
 +
#warnPics .qoutes{
 +
font-size: 1rem;
 +
}
 +
#compareBox img {
 +
max-height: 20vh; width: auto;
 +
}
 +
.mobileTitle  {
 +
font-size: 3rem !important;
 +
} 
 +
     
 +
#conceptFlowTitle  { 
 +
font-size: 2rem;
 +
font-weight: bold;
 +
}
 +
#conceptFlow h5{ 
 +
font-size: 1.5rem;
 +
}
 +
#conceptFlow span{ 
 +
font-size: 1rem;
 +
}
 +
 
 +
.how-it-works.row{
 +
    height: auto;
 +
}
 +
   
 +
/* FlowChart*/
 +
.circleO {
 +
height: 40px;
 +
width: 40px;
 +
}
 +
.circleO img {
 +
max-height: 25px;
 +
width: auto;
 +
}
 +
.circleS {
 +
height: 40px;
 +
width: 40px;
 +
}
 +
.circleS img {
 +
max-height: 25px;
 +
width: auto;
 +
}
 +
.circleM {
 +
height: 50px;
 +
width: 50px;
 +
}
 +
.circleM img {
 +
max-height: 35px;
 +
width: auto;
 +
}
 +
.circleL {
 +
height: 60px;
 +
width: 60px;
 +
}
 +
.circleL img {
 +
max-height: 45px;
 +
width: auto;
 +
} 
 +
.reg {
 +
padding:0;
 +
}
 +
.mobileText{
 +
font-size:1rem !important;
 +
margin-top: 0;
 +
}
 +
.showCase .row{ 
 +
padding: 0;
 +
}
 +
}
 +
 
 +
@media only screen and (max-width: 991.98px) {}
 +
 
 +
@media only screen and (max-width: 1199.98px) {}
 +
</style>
 +
 
 +
<script>
 +
// Scroll Down Icon
 +
$(document).ready(function() {
 +
    // Add smooth scrolling to all links
 +
    $("#goTo").on('click', function(event) {
 +
 
 +
        // Make sure this.hash has a value before overriding default behavior
 +
        if (this.hash !== "") {
 +
            // Prevent default anchor click behavior
 +
            event.preventDefault();
 +
 
 +
            // Store hash
 +
            var hash = this.hash;
 +
 
 +
            // Using jQuery's animate() method to add smooth page scroll
 +
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 +
            $('html, body').animate({
 +
                scrollTop: $(hash).offset().top
 +
            }, 800, function() {
 +
 
 +
                // Add hash (#) to URL when done scrolling (default click behavior)
 +
                window.location.hash = hash;
 +
            });
 +
        } // End if
 +
    });
 +
});
 +
 
 +
 
 +
$(document).ready(function () {
 +
$(".reg").click(function () {
 +
$(".pop").fadeOut(100);
 +
$(this).next().fadeIn(300);
 +
});
 +
 
 +
$(".pop > span, .pop").click(function () {
 +
$(".pop").fadeOut(300);
 +
});
 +
});
 +
 
 +
 
 
     <div class="column full_size" >
 
     <div class="column full_size" >
 
       <h1> Welcome to CAU_China 2019! </h1>
 
       <h1> Welcome to CAU_China 2019! </h1>
Line 13: Line 489:
  
 
     </div>
 
     </div>
−
</html>
 

Revision as of 07:54, 11 May 2019

CAU_China

/* Scroll Down Icon*/

  1. goToBox {

position: relative; width: 30px; height: 28px; left: calc(50% - 15px); } .chevron { position: absolute; width: 28px; height: 8px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5); animation: move 3s ease-out infinite; }

.chevron:first-child { animation: move 3s ease-out 1s infinite; }

.chevron:nth-child(2) { animation: move 3s ease-out 2s infinite; }

.chevron:before, .chevron:after { content: ' '; position: absolute; top: 0; height: 100%; width: 51%; background: #fff; }

.chevron:before { left: 0; transform: skew(0deg, 30deg); }

.chevron:after { right: 0; width: 50%; transform: skew(0deg, -30deg); }

@keyframes move { 25% { opacity: 1;

} 33% { opacity: 1; transform: translateY(30px); } 67% { opacity: 1; transform: translateY(40px); } 100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); } }

@keyframes pulse { to { opacity: 1; } }


/* FlowChart*/ .circleO { height: 60px; width: 60px; padding: auto; border-radius: 50%; background-color: rgba(230,230,230,1); color: black; z-index: 2; } .circleO img { max-height: 40px; width: auto; } .circleS { height: 60px; width: 60px; padding: auto; border-radius: 50%; background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1)); color: black; z-index: 2; } .circleS img { max-height: 40px; width: auto; } .circleM { height: 100px; width: 100px; padding: auto; border-radius: 50%; background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1)); color: black; z-index: 2; 1,101,224 } .circleM img { max-height: 80px; width: auto; } .circleL { height: 160px; width: 160px; padding: auto; border-radius: 50%; background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1)); color: black; z-index: 2; } .circleL img { max-height: 130px; width: auto; }

  1. conceptFlow h5{

font-weight: bold; font-size: 2rem; margin-bottom: 30px; color:#009ec6; }

  1. conceptFlow span{

font-size: 1.5rem; } /* height of each section*/ .how-it-works.row{ height: 50vh } .how-it-works.row .col-3 { align-self: stretch; } .how-it-works.row .col-3::after { content: ""; position: absolute; border-left: 3px solid rgba(82, 187, 199,1); z-index: 1; } .diagnosis.row .col-3::after { content: ""; position: absolute; border-left: 3px dotted rgba(82, 187, 199,1); z-index: 1; } .how-it-works.row .col-3.bottom::after { height: 50%; left: 50%; top: 50%; } .how-it-works.row .col-3.full::after { height: 100%; left: calc(50% - 3px); } .how-it-works.row .col-3.fullRight::after { height: 100%; left: 50%; } .how-it-works.row .col-3.top::after { height: 50%; left: calc(50% - 3px); top: 0; border: 2px dotted rgba(82, 187, 199,1); }


.timeline div { padding: 0; height: 40px; } .timeline hr { border-top: 3px solid rgba(82, 187, 199,1); background-color: transparent; margin: 0; top: 17px; position: relative; } .timeline .col-3 { display: flex; overflow: hidden; } .timeline .corner { border: 3px solid rgba(82, 187, 199,1); width: 100%; position: relative; border-radius: 15px; } .timeline .top-right { left: 50%; top: -50%; } .timeline .left-bottom { left: -50%; top: calc(50% - 3px); } .timeline .top-left { left: -50%; top: -50%; } .timeline .right-bottom { left: 50%; top: calc(50% - 3px); }

/* Qoutes Part*/

  1. warnPics {

height: auto; min-height: 20vw; font-weight: 100; }

  1. warnPics .qoutes span{

font-size: 1.5rem; }

  1. warnPics .qoutes{

}

  1. qoute1 {

background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("T--Munich--death_background.png"); background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff; }

  1. qoute2 {

background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("T--Munich--WarningPic1.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff; }

  1. qoute3 {

background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("T--Munich--PHAGE.jpg"); background-repeat: no-repeat; background-size: cover; background-position: top; color: #fff; }

  1. whyTitle { background:rgba(35, 35, 35, 1); }

.warningContent span { font-size:2.5rem; font-weight:bold;}

.mobileText{ font-size:1.5rem !important; margin-top: 3rem; }


  1. conceptFlowTitle {

font-size: 2.5rem; font-weight: bold; }


/* START PopUp STYLES */ .labelBox{ 

 display: inline;

} .reg { 

 background-color: white;
 display: inline;
 margin: 0 auto;
 width: auto;
 font-size: 16.996px;
 line-height: 20px;
 padding: 12px 18px 13px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -ms-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 color: #009ec6;
 cursor: pointer;
 border: none;
 text-decoration: underline;

} .reg:hover { 

 opacity: 0.8;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;

} .pop { 

 display: none;
 position: absolute;
 top: 75%;
 max-width:100%;
 height: auto;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -ms-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 z-index: 200;
 padding: 10px;
 background-color: rgba(240, 240, 240, 1); 
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

} .pop > h1 { 

 color: #009ec6;
 font-size: 100%;

} .pop > p { 

 font-size: 100%;
 color: #777777;

} .pop > span { 

 cursor: pointer;
 position: absolute;
 top: 10px;
 right: 10px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 color: #777777;
 width: 30px;
 height: 30px;

} /* END PopUp STYLES */

.mobileTitle { font-size: 3.5rem !important; } .readButton, .readButton:visited{ color:#17a2b8; } .readButton:hover { color:white; }

.showCase .row{ padding-left: 10vw; padding-right: 10vw; }

@media only screen and (max-width: 767.98px) {

  1. videoBox #videoShow{

position: relative; right: 120%; }

  1. PhactoryTitle {

font-size: 4rem; }

  1. PhactoryText {

font-size: 1.5rem; } .warningContent span{ font-size: 1.5rem; }

  1. warnPics .qoutes{

font-size: 1rem; }

  1. compareBox img {

max-height: 20vh; width: auto; } .mobileTitle { font-size: 3rem !important; }

  1. conceptFlowTitle {

font-size: 2rem; font-weight: bold; }

  1. conceptFlow h5{

font-size: 1.5rem; }

  1. conceptFlow span{

font-size: 1rem; }

.how-it-works.row{ 

   height: auto;

}

/* FlowChart*/ .circleO { height: 40px; width: 40px; } .circleO img { max-height: 25px; width: auto; } .circleS { height: 40px; width: 40px; } .circleS img { max-height: 25px; width: auto; } .circleM { height: 50px; width: 50px; } .circleM img { max-height: 35px; width: auto; } .circleL { height: 60px; width: 60px; } .circleL img { max-height: 45px; width: auto; } .reg { padding:0; } .mobileText{ font-size:1rem !important; margin-top: 0; } .showCase .row{ padding: 0; } }

@media only screen and (max-width: 991.98px) {}

@media only screen and (max-width: 1199.98px) {} </style>

<script> // Scroll Down Icon $(document).ready(function() { 

   // Add smooth scrolling to all links
   $("#goTo").on('click', function(event) {

       // Make sure this.hash has a value before overriding default behavior
       if (this.hash !== "") {
           // Prevent default anchor click behavior
           event.preventDefault();

           // Store hash
           var hash = this.hash;

           // Using jQuery's animate() method to add smooth page scroll
           // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
           $('html, body').animate({
               scrollTop: $(hash).offset().top
           }, 800, function() {

               // Add hash (#) to URL when done scrolling (default click behavior)
               window.location.hash = hash;
           });
       } // End if
   });

});


$(document).ready(function () { $(".reg").click(function () { 

$(".pop").fadeOut(100);
$(this).next().fadeIn(300);

});

$(".pop > span, .pop").click(function () { 

$(".pop").fadeOut(300);

}); });


Welcome to CAU_China 2019!

The game is online<p> </div>