Difference between revisions of "Team:RDFZ-China/Description"

Line 3: Line 3:
  
  
−
 
+
<!--
 
<div class="column full_size">
 
<div class="column full_size">
 
<h1>Description</h1>
 
<h1>Description</h1>
Line 54: Line 54:
  
 
</div>
 
</div>
 +
-->
  
  
  
 +
{{RDFZ-China}}
 +
<html>
 +
<head>
 +
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
 +
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <meta charset="UTF-8">
 +
    <title>RDFZ-China</title>
 +
    <link href="https://fonts.googleapis.com/css?family=Gamja+Flower|Lemonada" rel="stylesheet">
 +
<style>
 +
@media (min-width: 768px) and (max-width: 899px){
 +
header .site-nav ul { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; font-family: 'Gamja Flower';font-size:18px;}
 +
.footerimage1 {
 +
margin: 0 30px 0 20px;
 +
}
 +
.footerimage2 {
 +
margin: 0 20px 30px 20px;
 +
}
 +
.footerimage3 {
 +
margin: 0px 20px 0 30px;
 +
}
 +
}
 +
 +
@media (min-width: 480px) and (max-width: 767px){
 +
header .site-nav ul { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; font-family: 'Gamja Flower';font-size:14px;}
 +
header .site-nav ul li.home {    top: 40px; left: 2%; }
 +
header .site-nav ul li.project { top: 40px; left: 20%; }
 +
header .site-nav ul li.awards {  top: 40px; left: 40%; }
 +
header .site-nav ul li.safety {  top: 40px; left: 58.5%; }
 +
header .site-nav ul li.human {  top: 40px; left: 78.5%; }
 +
header .site-nav ul li.model {  top: 40px; left: 97.5%; };
 +
.footerimage1 {
 +
margin: 0 30px 0 21.px;
 +
}
 +
.footerimage2 {
 +
margin: 20px 20px 0px 50px;
 +
}
 +
.footerimage3 {
 +
margin: 0 5px 0 30px;
 +
}
 +
 +
.flowchart img {
 +
        align-content: center;
 +
width:280px;
 +
 +
}
 +
 +
}
 +
}
 +
}
 +
 +
@media (min-width: 900px) and (max-width: 1024px){
 +
header .site-nav ul { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; font-family: 'Gamja Flower';font-size:18px;}
 +
header .site-nav ul li { position: absolute; transform: translate(-50%,-50%); }
 +
header .site-nav ul li.home {    top: 40px; left: 0%; }
 +
header .site-nav ul li.project { top: 40px; left: 9%; }
 +
header .site-nav ul li.experiment {  top: 40px; left: 22%; }
 +
header .site-nav ul li.model {  top: 40px; left: 34%; }
 +
header .site-nav ul li.humanPractice {  top: 40px; left: 45%; }
 +
header .site-nav ul li.demonstrate {  top: 40px; left: 60%; }
 +
header .site-nav ul li.safety {  top: 40px; left: 73%; }
 +
header .site-nav ul li.attribution {  top: 40px; left: 86%; }
 +
header .site-nav ul li.team {  top: 40px; left: 98%; }
 +
 +
/*header .site-logo {
 +
float: left;
 +
left: 10px;
 +
width: 35%;
 +
position: absolute;
 +
top: 5px;
 +
}
 +
header .site-logo img {
 +
width:30%
 +
}
 +
 +
header .site-nav { float: right; position: relative; width: 80%; }
 +
header .site-nav img { width: 100%;margin:0 0 30px 0; }
 +
header .site-nav ul { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; font-family: 'Gamja Flower';font-size:18px;}
 +
header .site-nav ul li { position: absolute; transform: translate(-50%,-50%); }
 +
header .site-nav ul li.home {    top: 40px; left: 0%; }
 +
header .site-nav ul li.project { top: 40px; left: 8%; }
 +
header .site-nav ul li.experiment {  top: 40px; left: 20%; }
 +
header .site-nav ul li.model {  top: 40px; left: 31%; }
 +
header .site-nav ul li.humanPractice {  top: 40px; left: 41%; }
 +
header .site-nav ul li.demonstrate {  top: 40px; left: 55%; }
 +
header .site-nav ul li.safety {  top: 40px; left: 67%; }
 +
header .site-nav ul li.attribution {  top: 40px; left: 79%; }
 +
header .site-nav ul li.team {  top: 40px; left: 90%; }
 +
header .site-nav ul li:hover ul { display: block; background-color: aliceblue; padding: 2px;}
 +
header .site-nav ul li a { display: block; font-size: .95em; padding-bottom: .1em; text-decoration: none; letter-spacing: .15em; text-transform: uppercase; color: black; -webkit-transition: color .3s; transition: color .3s; z-index:20;}
 +
header .site-nav ul li a:hover { border-bottom: 1px solid red; background-color: #FEFEFE; color: #C4C4C4; cursor: pointer; }
 +
header .site-nav ul li ul { top: auto; left: 0; display: none; width: auto; height: auto; background-color: aliceblue; padding: 2px;}
 +
header .site-nav ul li ul li { position: static; transform: none; }*/
 +
 +
.footerimage1 {
 +
margin: 0 30px 0 20px;
 +
}
 +
.footerimage2 {
 +
margin: 0 20px 30px 20px;
 +
}
 +
.footerimage3 {
 +
margin: 0px 20px 0 30px;
 +
}
 +
}
 +
.igem_2018_team_content,.igem_2018_team_content .igem_2018_team_column_wrapper{padding:0px; width:100%; margin-top:-7px; margin-left:0px;background-color: transparent; margin:auto;}
 +
.igem_2018_team_menu.displaying_menu{display:none;}
 +
.igem_2018_team_content .igem_2018_team_column_wrapper h3,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper h4,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper h5,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper h6,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper h1,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper h2,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper p{margin-bottom: 0px;font-family: 'Gamja Flower', cursive;line-height:3.5;color:crimson;}
 +
h1,h2,h3,p{font-family: 'Gamja Flower', cursive;;color:crimson;text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);}
 +
 +
header { width: 96%; margin: 0 2%;margin-bottom: 20px;height:250px }
 +
header:after { content: ''; display: block; clear: both; }
 +
header .site-logo { float: left; width: 25%;}
 +
header .site-logo img { width:60%; }
 +
header .site-nav { float: right; position: relative; width: 70%; }
 +
header .site-nav img { width: 100%;margin:0 0 30px 0; }
 +
header .site-nav ul { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; list-style: none; font-family: 'Gamja Flower';font-size:18px;}
 +
header .site-nav ul li { position: absolute; transform: translate(-50%,-50%); }
 +
header .site-nav ul li.home {    top: 40px; left: 0%; }
 +
header .site-nav ul li.project { top: 40px; left: 8%; }
 +
header .site-nav ul li.experiment {  top: 40px; left: 20%; }
 +
header .site-nav ul li.model {  top: 40px; left: 31%; }
 +
header .site-nav ul li.humanPractice {  top: 40px; left: 41%; }
 +
header .site-nav ul li.demonstrate {  top: 40px; left: 55%; }
 +
header .site-nav ul li.safety {  top: 40px; left: 67%; }
 +
header .site-nav ul li.attribution {  top: 40px; left: 79%; }
 +
header .site-nav ul li.team {  top: 40px; left: 90%; }
 +
 +
header .site-nav ul li:hover ul { display: block; }
 +
header .site-nav ul li a { display: block; font-size: .95em; padding-bottom: .1em; text-decoration: none; letter-spacing: .15em; text-transform: uppercase; color: black; -webkit-transition: color .3s; transition: color .3s; z-index:20;}
 +
header .site-nav ul li a:hover { border-bottom: 1px solid red; background-color: #FEFEFE; color: #C4C4C4; cursor: pointer; }
 +
header .site-nav ul li ul { top: auto; left: 0; display: none; width: auto; height: auto; }
 +
header .site-nav ul li ul li { position: static; transform: none; }
 +
 +
ol li{text-align: justify;font-size:20px;}
 +
.title { position: relative; z-index: 1;text-align: center;margin:0 100px 0 100px; }
 +
.title-content{background-position: center;text-align: center;text-align: center;font-family: 'Gamja Flower', "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"}
 +
.description{margin:60px ;font-size:25px;}
 +
.flowchart{
 +
text-align: center;
 +
margin:100px;
 +
}
 +
.line{ 
 +
height: 30px;
 +
    border-style: solid;
 +
    border-color: black;
 +
    border-width: 1px 0 0 0;
 +
    border-radius: 20px;
 +
background-color: inherit;
 +
}
 +
.line:before{   
 +
display: block;
 +
    content: "";
 +
    height: 30px;
 +
    margin-top: -31px;
 +
    border-style: solid;
 +
    border-color: black;
 +
    border-width: 0 0 1px 0;
 +
    border-radius: 20px;
 +
}
 +
/* Slideshow container */
 +
.slideshow-container {
 +
  position: fixed;
 +
  max-width: 1000px;
 +
  max-height: 1200px;
 +
  position: relative;
 +
  margin: auto;
 +
  overflow: hidden;
 +
}
 +
 +
.mySlides {
 +
    display: none;
 +
}
 +
 +
/* Next & previous buttons */
 +
.prev, .next {
 +
  cursor: pointer;
 +
  position: absolute;
 +
  top: 50%;
 +
  width: auto;
 +
  margin-top: -22px;
 +
  padding: 16px;
 +
  color: white;
 +
  font-weight: bold;
 +
  font-size: 18px;
 +
  transition: 0.6s ease;
 +
  border-radius: 0 3px 3px 0;
 +
}
 +
 +
/* Position the "next button" to the right */
 +
.next {
 +
  right: 0;
 +
  border-radius: 3px 0 0 3px;
 +
}
 +
/* Position the "previous button" to the left*/
 +
.prev{
 +
left:0 ;
 +
    border-radius: 3px 0 0 3px;
 +
}
 +
/* On hover, add a black background color with a little bit see-through */
 +
.prev:hover, .next:hover {
 +
  background-color: rgba(0,0,0,0.8);
 +
}
 +
 +
/* Caption text */
 +
.text {
 +
  color: #f2f2f2;
 +
  font-size: 15px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  bottom: 8px;
 +
  width: 100%;
 +
  text-align: center;
 +
}
 +
 +
/* Number text (1/3 etc) */
 +
.numbertext {
 +
  color: #f2f2f2;
 +
  font-size: 12px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  top: 0;
 +
}
 +
 +
/* The dots/bullets/indicators */
 +
.dot {
 +
  cursor:pointer;
 +
  height: 15px;
 +
  width: 15px;
 +
  margin: 0 2px;
 +
  background-color: #bbb;
 +
  border-radius: 50%;
 +
  display: inline-block;
 +
  transition: background-color 0.6s ease;
 +
}
 +
 +
.active, .dot:hover {
 +
  background-color: #717171;
 +
}
 +
/* Fading animation */
 +
.fade {
 +
  -webkit-animation-name: fade;
 +
  -webkit-animation-duration: 1.5s;
 +
  animation-name: fade;
 +
  animation-duration: 1.5s;
 +
}
 +
 +
@-webkit-keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
 +
@keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
.footerimage{
 +
width: 20%;
 +
margin:0 auto;
 +
text-align: center;
 +
}
 +
 +
.footerimage1{
 +
width:20%;
 +
 +
}
 +
.footerimage2{
 +
width:30%;
 +
margin:80px 100px 0 165px;
 +
}
 +
.footerimage3{
 +
width:20%;
 +
margin: 0 0 0 35px
 +
}
 +
#f ul{list-style: none;}
 +
#f li{display: block; margin: 0 1.2em;}
 +
#f img{float:left;}
 +
</style>
 +
</head>
 +
<body>
 +
    <header>
 +
        <div class="site-logo">
 +
            <img src="https://static.igem.org/mediawiki/2017/5/57/RDFZ_logo.png" />
 +
        </div>
 +
        <div class="site-nav-bg">
 +
        </div>
 +
      <nav class="site-nav">
 +
           
 +
            <ul>
 +
                <li class="home">
 +
                    <a href="https://2018.igem.org/Team:RDFZ-China">HOME</a>
 +
                   
 +
                </li>
 +
               
 +
                <li class="project">
 +
                    <a href="https://2018.igem.org/Team:RDFZ-China/Description">PROJECT </a>
 +
                    <ul>
 +
                        <li><a href="https://2018.igem.org/Team:RDFZ-China/Description">BACKGROUND</a></li>
 +
                        <li><a href="https://2018.igem.org/Team:RDFZ-China/Description">PROJECT</a></li>
 +
                        <li><a href="https://2018.igem.org/Team:RDFZ-China/Improve">IMPROVE</a></li>
 +
                    </ul>
 +
                </li>
 +
               
 +
                <li class="experiment">
 +
                    <a href="https://2017.igem.org/Team:RDFZ-China/Applied_Design">EXPERIMENT</a>
 +
                    <ul>
 +
                        <li><a href="https://2018.igem.org/Team:RDFZ-China/Experiments">EXPERIMENT</a></li>
 +
                        <li><a href="https://2018.igem.org/Team:RDFZ-China/InterLab">INTERLAB</a></li>
 +
                    </ul>
 +
                </li>
 +
               
 +
                <li class="model">
 +
                    <a href="https://2018.igem.org/Team:RDFZ-China/Model">MODEL</a>
 +
                <ul>
 +
                        <li><a href="https://2018.igem.org/Team:RDFZ-China/Model">MODEL</a></li>
 +
                        <li><a href="https://2018.igem.org/Team:RDFZ-China/Measurement">MEASUREMENT</a></li>
 +
                    </ul>
 +
                </li>
 +
               
 +
                <li class="humanPractice">
 +
                    <a href="https://2018.igem.org/Team:RDFZ-China/Human_Practices">HUMAN<br>PRACTICE</a>
 +
                    <ul>
 +
                        <li><a href="https://2018.igem.org/Team:RDFZ-China/Human_Practices">HUMAN PRACTICE</a></li>
 +
                        <li><a href="https://2018.igem.org/Team:RDFZ-China/Public_Engagement">ENGAGEMENT</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:RDFZ-China/Engagement">GOLD INTEGRATED</a></li>
 +
                    </ul>
 +
                </li>
 +
               
 +
                <li class="demonstrate"><a href=" https://2018.igem.org/Team:RDFZ-China/Demonstrate">DEMONSTRATE</a>
 +
                <ul>
 +
                <li><a href=" https://2018.igem.org/Team:RDFZ-China/Demonstrate">DEMONSTRATE</a></li>
 +
                <li><a href="https://2018.igem.org/Team:RDFZ-China/Applied_Design">APPLIED DESIGN</a></li>
 +
                </ul>
 +
                </li>
 +
               
 +
                <li class="safety"><a href="https://2018.igem.org/Team:RDFZ-China/Safety">SAFETY</a>
 +
                </li>
 +
               
 +
                <li class="attribution"><a href="https://2018.igem.org/Team:RDFZ-China/Attributions">Attribution</a>
 +
                <ul>
 +
                <li><a href="https://2018.igem.org/Team:RDFZ-China/Attributions">ATTRIBUTION</a></li>
 +
                <li><a href="https://2018.igem.org/Team:RDFZ-China/Collaborations">COLLABORATION</a></li>
 +
                </ul>
 +
                </li>
 +
               
 +
                <li class="team"><a href="https://2017.igem.org/Team:RDFZ-China/Model">TEAM</a>
 +
                <ul>
 +
                <li><a href="https://2017.igem.org/Team:RDFZ-China/Hardware">MEMBERS</a></li>
 +
                <li><a href="https://2017.igem.org/Team:RDFZ-China/Hardware">SCHOOLS</a></li>
 +
                </ul>
 +
                </li>
 +
               
 +
            </ul>
 +
        </nav>
 +
        <div style="clear:both;"></div>
 +
    </header>
 +
<main>
 +
        <!--Title-->
 +
      <section class="title">
 +
            <div class="title-content">
 +
                <hr class="line">
 +
              <div class="slideshow-container">
 +
                <div class="mySlides fade">
 +
                <div class="numbertext">1 / 3</div>
 +
                <img src="https://static.igem.org/mediawiki/2018/d/dd/T--RDFZ-China--TempHomepageimprovedtwice.jpg"  style="width:100%">
 +
   
 +
                </div>
 +
 +
                <div class="mySlides fade">
 +
                <div class="numbertext">2 / 3</div>
 +
                <img src="https://static.igem.org/mediawiki/2018/2/28/T--RDFZ-China--circuit_design.jpeg" style="width:100%">
 +
   
 +
                </div>
 +
 +
                <div class="mySlides fade">
 +
                <div class="numbertext">3 / 3</div>
 +
                <img src="https://static.igem.org/mediawiki/2018/c/c1/T--RDFZ-China--Project_Mindmapimproved.png" style="width: 100%">
 +
   
 +
                </div>
 +
             
 +
                <a class="prev" onclick="slides.prev();" onmouseenter="slides.clearInterval();" onmouseleave="slides.setInterval();">❮</a>
 +
                <a class="next" onclick="slides.next();" onmouseenter="slides.clearInterval();" onmouseleave="slides.setInterval();">❯</a>
 +
                </div>
 +
                <br>
 +
               
 +
                <div style="text-align:center">
 +
                  <span class="dot" onclick="slides.change(0);" onmouseenter="slides.clearInterval();" onmouseleave="slides.setInterval();"></span>
 +
                  <span class="dot" onclick="slides.change(1);" onmouseenter="slides.clearInterval();" onmouseleave="slides.setInterval();"></span>
 +
                  <span class="dot" onclick="slides.change(2);" onmouseenter="slides.clearInterval();" onmouseleave="slides.setInterval();"></span>
 +
                </div>
 +
               
 +
</div>
 +
</section>
 +
<section class="description">
 +
<p>
 +
 +
</p>
 +
</section>
 +
 +
<section class="flowchart">              
 +
<!--<img src="https://static.igem.org/mediawiki/2018/3/3a/T--RDFZ-China--flowchart.png" />-->
 +
</section>     
 +
</main>
 +
<footer id="f">
 +
<div>
 +
<ul>
 +
<li><img src="https://static.igem.org/mediawiki/2018/0/00/T--RDFZ-China--footer1.png"  class="footerimage1"/></li>
 +
<li><img src="https://static.igem.org/mediawiki/2018/d/d8/T--RDFZ-China--footer2.png"  class="footerimage2"/></li>
 +
<li><img src="https://static.igem.org/mediawiki/2018/5/52/T--RDFZ-China--footer3.jpeg" class="footerimage3"/></li>
 +
  </ul>
 +
</div>
 +
<div>
 +
<p></p>
 +
</div>
 +
</footer>
 +
    <script>
 +
(function (w) {
 +
            var _this = w.slides = {};
 +
            var slides = _this.slides = document.getElementsByClassName('mySlides');
 +
            var dots = document.getElementsByClassName('dot');
 +
            var prevButton = document.getElementsByClassName('prev')[0];
 +
            var nextButton = document.getElementsByClassName('next')[0];
 +
            var currentIndex = _this.currentIndex = 0;
 +
            var maxIndex = _this.maxIndex = slides.length - 1;
 +
            for (var i = 0; i <= maxIndex; i++) {
 +
                slides[i].style.display = 'none';
 +
            }
 +
            var change = _this.change = function (index) {
 +
                slides[currentIndex].style.display = 'none';
 +
                slides[index].style.display = 'block';
 +
                currentIndex = index;
 +
            };
 +
            var next = _this.next = function () {
 +
                var index = currentIndex + 1;
 +
                if (index > maxIndex) index = 0;
 +
                change(index);
 +
            };
 +
            var prev = _this.prev = function () {
 +
                var index = currentIndex - 1;
 +
                if (index < 0) index = maxIndex;
 +
                change(index);
 +
            };
 +
            var interval;
 +
            var _setInterval = _this.setInterval = function () {
 +
                interval = setInterval(next, 3000);
 +
            };
 +
            var _clearInterval = _this.clearInterval = function () {
 +
                clearInterval(interval);
 +
            };
 +
            _setInterval();
 +
        })(window);
 +
</script>
 +
</body>
 +
</html>
  
  
  
 
</html>
 
</html>

Revision as of 03:06, 13 October 2018

{{RDFZ-China}} RDFZ-China
1 / 3
2 / 3
3 / 3


</html>