|
|
| Line 10: |
Line 10: |
| | <style> | | <style> |
| | | | |
| − | /* 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> | | </style> |
| | | | |
| | <script> | | <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);
| |
| − | });
| |
| − | });
| |
| | | | |
| | | | |
| | </script> | | </script> |
| | | | |
| | + | <div class="showCase container-fluid jumbotron jumbotron-fluid text-center bg-dark align-items-center text-light mb-0"> |
| | + | <div class="row" style=""> |
| | + | <div class="col-12 col-md-6"> |
| | + | |
| | + | </div> |
| | + | <div class="col-12 col-md-6 p-5"> |
| | + | |
| | + | </div> |
| | + | </div> |
| | | | |
| − | <div id="videoBox" class=" text- center" style=" position: relative; height:100vh; width:100%; overflow: hidden;"> | + | <div class=" row mt- 4" style=""> |
| − |
| + | <div class=" col- 6 col- md- 3 mt- 3"> |
| − | <div class=" text- light d- flex flex- column justify- content-center ml-auto mr-auto" style="position: absolute; bottom:30vh; width: 100%; padding: 50px;"> | + | |
| − | <div id="PhactoryTitle" class="display-1 mb-3">CAU_China</div> | + | </div> |
| − | <div id="PhactoryText" class="h1"> seemed quite natural); but when the Rabbi</div> | + | <div class="col-6 col-md-3 mt-3"> |
| − | <div id="goToBox" class="mt-5"> | + | |
| − | <a id="goTo" href="#whyTitle"> | + | </div> |
| − | <div class="chevron"></div>
| + | <div class="col-6 col-md-3 mt-3"> |
| − | <div class=" chevron" ></div> | + | |
| − | <div class="chevron"></div>
| + | </div> |
| − | </a> | + | <div class=" col-6 col-md-3 mt-3"> |
| | + | |
| | </div> | | </div> |
| | </div> | | </div> |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | + | </div> |
| | | | |
| | | | |
| Line 536: |
Line 50: |
| | | | |
| | | | |
| | + | <div id="conceptFlow" class="text-dark bg-whites"> |
| | + | <div class="container"> |
| | | | |
| | + | <div class="row mt-4" style=""> |
| | + | <div class="col-6 col-md-3 mt-3"> |
| | + | |
| | + | </div> |
| | + | <div class="col-6 col-md-3 mt-3"> |
| | + | |
| | + | </div> |
| | + | <div class="col-6 col-md-3 mt-3"> |
| | + | |
| | + | </div> |
| | + | <div class="col-6 col-md-3 mt-3"> |
| | + | |
| | + | </div> |
| | + | </div> |
| | | | |
| | + | <div class="row mt-4" style=""> |
| | + | <div class="col-6 col-md-3 mt-3"> |
| | + | |
| | + | </div> |
| | + | <div class="col-6 col-md-3 mt-3"> |
| | + | |
| | + | </div> |
| | + | <div class="col-6 col-md-3 mt-3"> |
| | + | |
| | + | </div> |
| | + | <div class="col-6 col-md-3 mt-3"> |
| | + | |
| | + | </div> |
| | + | </div> |
| | + | <div class="row" style=""> |
| | + | <div class="col-12 col-md-6"> |
| | + | |
| | + | </div> |
| | + | <div class="col-12 col-md-6 p-5"> |
| | + | |
| | + | </div> |
| | + | </div> |
| | + | <div class="row" style=""> |
| | + | <div class="col-12 col-md-6"> |
| | + | |
| | + | </div> |
| | + | <div class="col-12 col-md-6 p-5"> |
| | + | |
| | + | </div> |
| | + | </div> |
| | + | <div class="row" style=""> |
| | + | <div class="col-12 col-md-6"> |
| | + | |
| | + | </div> |
| | + | <div class="col-12 col-md-6 p-5"> |
| | + | |
| | + | </div> |
| | + | </div> |
| | | | |
| | + | </div> |
| | + | </div> |
| | | | |
| | | | |
