Difference between revisions of "Team:KSA KOREA/Attributions"

(Prototype team page)
 
Line 1: Line 1:
−
{{IGEM_TopBar}}
 
−
{{KSA_KOREA}}
 
 
<html>
 
<html>
  
 +
<head>
  
−
<div class="column full_size judges-will-not-evaluate">
+
<style>
−
<h3>★  ALERT! </h3>
+
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2020.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2020.igem.org/Judging/Awards"> award listed below</a>. </p>
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2020.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
body, html {background-color:white; width: 100%; height: 100%;}
−
</div>
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 +
</style>
  
 +
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/Bulma&action=raw&ctype=text/css" />
  
−
<div class="clear"></div>
+
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bbCSS&action=raw&ctype=text/css" />
  
 +
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/demo&action=raw&ctype=text/css" />
  
 +
<style>
  
  
 +
.bb-custom-wrapper {
 +
  width: 100%;
 +
  height: 100%;
 +
  position: relative;
 +
 
 +
}
  
 +
.bb-custom-wrapper .bb-bookblock {
 +
  width: 100%;
 +
  height: 100%;
 +
  -webkit-perspective: 2000px;
 +
  perspective: 2000px;
 +
}
  
−
<div class="column full_size">
+
.bb-custom-side {
−
<h1>Attributions</h1>
+
  width: 50%;
−
<p>Use this page to attribute work done on your project. This includes the work done by each of the student members on your team and  any work that was done by people outside of your team, including the host labs, advisors, instructors, and individuals not on the team roster. This requirement is not about literature references - these can and should be displayed throughout your wiki.
+
  float: left;
−
</p>
+
  height: 100%;
 +
  overflow: hidden;
 +
  background: #fff;
 +
 
 +
  display: -webkit-box;
 +
  display: -moz-box;
 +
  display: -webkit-flex;
 +
  display: flex;
 +
  -webkit-flex-direction: row;
 +
  flex-direction: row;
 +
  -webkit-flex-wrap: wrap;
 +
  flex-wrap: wrap;
 +
  -webkit-box-pack: center;
 +
  -moz-box-pack: center;
 +
  -webkit-justify-content: center;
 +
  justify-content: center;
 +
  -webkit-box-align: center;
 +
  -moz-box-align: center;
 +
  -webkit-align-items: center;
 +
  align-items: center;
 +
}
  
−
<h3> Bronze Medal Criterion #2</h3>
+
.bb-custom-firstpage h1 {
−
<p>Describe what work your team members did and what other people did for your project.
+
  font-size: 2.625em;
−
<br><br>
+
  line-height: 1.3;
 +
  margin: 0;
 +
  font-weight: 300;
 +
  background: #fff;
 +
}
  
−
<br><br>
+
.bb-custom-firstpage h1 span {
−
Please see the <a href="https://2020.igem.org/Judging/Medals">Medals requirements page</a> for more details.</p>
+
  display: block;
−
</div>
+
  font-size: 60%;
 +
  opacity: 0.3;
 +
  padding: 0 0 0.6em 0.1em;
 +
}
  
 +
.bb-custom-firstpage {
 +
  text-align: center;
 +
  padding-top: 15%;
 +
  width: 50%;
 +
  float: left;
 +
  height: 100%;
 +
}
  
−
<div class="clear extra_space"></div>
+
.bb-custom-side p {
 +
  padding: 8%;
 +
  font-size: 1.8em;
 +
  font-weight: 300;
 +
}
  
 +
.bb-custom-wrapper h3 {
 +
  font-size: 1.4em;
 +
  font-weight: 300;
 +
  margin: 0.4em 0 1em;
 +
}
  
 +
.bb-custom-wrapper>nav {
 +
  width: 100%;
 +
  height: 40px;
 +
  margin: 1em auto 0;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  z-index: 1000;
 +
  text-align: center;
 +
}
  
−
<div class="column third_size">
+
#page-nav {
−
<h3> What should this page contain?</h3>
+
  width: 100%;
 +
  height: 40px;
 +
  margin: 1em auto 0;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  z-index: 1000;
 +
  text-align: center;
 +
}
  
−
<ul>
+
#page-nav a {
−
<li>Clearly state what the team accomplished</li>
+
  display: inline-block;
−
<li>General Support</li>
+
  width: 40px;
−
<li>Project support and advice</li>
+
  height: 40px;
−
<li>Fundraising help and advice</li>
+
  text-align: center;
−
<li>Lab support</li>
+
  border-radius: 2px;
−
<li>Difficult technique support</li>
+
  background: #1baede;
−
<li>Project advisor support</li>
+
  color: #fff;
−
<li>Wiki support</li>
+
  font-size: 0;
−
<li>Presentation coaching</li>
+
  margin: 2px;
−
<li>Human Practices support</li>
+
}
−
<li> Thanks and acknowledgements for all other people involved in helping make a successful iGEM team</li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column third_size">
+
.bb-custom-wrapper>nav a {
−
<p>Tell us if your institution teaches an iGEM or synthetic biology class and when you started your project:</p>
+
  display: inline-block;
−
<ul>
+
  width: 40px;
−
<li>Does your institution teach an iGEM or synthetic biology course?</li>
+
  height: 40px;
−
<li>When did you start this course?</li>
+
  text-align: center;
−
<li>Are the syllabus and course materials freely available online?</li>
+
  border-radius: 2px;
−
<li>When did you start your brainstorming?</li>
+
  background: #1baede;
−
<li>When did you start in the lab?</li>
+
  color: #fff;
−
<li>When did you start working on  your project?</li>
+
  font-size: 0;
−
</ul>
+
  margin: 2px;
−
</div>
+
}
  
 +
#page-nav a:hover {
 +
  opacity: 0.6;
 +
}
  
−
<div class="column third_size">
+
.bb-custom-wrapper>nav a:hover {
−
<div class="highlight decoration_A_full">
+
  opacity: 0.6;
 +
}
  
−
<h3>Inspiration</h3>
+
.bb-custom-icon:before {
−
<p>Take a look at what other teams have done:</p>
+
  font-family: 'arrows';
−
<ul>
+
  speak: none;
−
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Team">2011 Imperial College London</a> (scroll to the bottom)</li>
+
  font-style: normal;
−
<li><a href="https://2014.igem.org/Team:Exeter/Attributions">2014 Exeter </a></li>
+
  font-weight: normal;
−
<li><a href="https://2014.igem.org/Team:Melbourne/Attributions">2014 Melbourne </a></li>
+
  font-variant: normal;
−
<li><a href="https://2014.igem.org/Team:Valencia_Biocampus/Attributions">2014 Valencia Biocampus</a></li>
+
  text-transform: none;
−
</ul>
+
  line-height: 1;
−
</div>
+
  font-size: 30px;
−
</div>
+
  line-height: 40px;
 +
  display: block;
 +
  -webkit-font-smoothing: antialiased;
 +
}
  
 +
.bb-custom-icon-first:before,
 +
.bb-custom-icon-last:before {
 +
  content: "\e002";
 +
}
  
 +
.bb-custom-icon-arrow-left:before,
 +
.bb-custom-icon-arrow-right:before {
 +
  content: "\e003";
 +
}
  
−
<div class="clear extra_space"></div>
+
.bb-custom-icon-arrow-left:before,
 +
.bb-custom-icon-first:before {
 +
  -webkit-transform: rotate(180deg);
 +
  transform: rotate(180deg);
 +
}
  
−
<div class="column two_thirds_size">
 
−
<h3> Why is this page needed? </h3>
 
−
<p>The Attribution requirement helps the judges know what you did yourselves and what you had help with. You can get help with difficult or complex techniques, but you must report what work your team did and what work was done by others.</p>
 
−
<p>
 
−
For example, you might choose to work with an animal model during your project. Working with animals requires getting a license and applying far in advance to conduct certain experiments in many countries. This is difficult to achieve during the course of a summer, but much easier if you can work with a postdoc or PI who has the right licenses.</p>
 
−
</div>
 
  
−
<div class="column third_size">
+
.no-js .bb-custom-wrapper {
−
<div class="highlight decoration_B_full">
+
  height: auto;
−
<h3> Can we base our project on a previous one? </h3>
+
}
−
<p>Yes! You can have a project based on a previous team, or based on someone else's idea, <b>as long as you state this fact very clearly and give credit for the original project.</b> </p>
+
−
</div>
+
−
</div>
+
  
 +
.no-js .bb-custom-content {
 +
  height: 470px;
 +
}
 +
 +
@media screen and (max-width: 61.75em) {
 +
  .bb-custom-side {
 +
    font-size: 70%;
 +
  }
 +
}
 +
 +
@media screen and (max-width: 33em) {
 +
  .bb-custom-side {
 +
    font-size: 60%;
 +
  }
 +
}
 +
</style>
 +
 +
 +
 +
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/fa4&action=raw&ctype=text/css" />
 +
 +
 +
 +
<style>
 +
*, *:after, *:before {
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
}
 +
 +
* {
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 +
::before,
 +
::after {
 +
  content: "";
 +
}
 +
 +
html,
 +
body {
 +
  height: 100%;
 +
  -webkit-font-smoothing: subpixel-antialiased;
 +
}
 +
 +
html {
 +
  font-size: 100%;
 +
}
 +
 +
body {
 +
  background: #ecf0f1;
 +
  color: #34495e;
 +
  font-family: 'Lato', 'Arial', sans-serif;
 +
  font-weight: 400;
 +
  line-height: 1.2;
 +
}
 +
 +
ul {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style: none;
 +
}
 +
 +
a {
 +
  color: #2c3e50;
 +
  text-decoration: none;
 +
}
 +
 +
.btn {
 +
 +
  display: block;
 +
  text-transform: uppercase;
 +
 +
  margin-top: 20px;
 +
  font-size: 0.7em;
 +
  font-weight: 700;
 +
  padding: 0.1em 0.4em;
 +
  text-align: center;
 +
  -webkit-transition: color 0.3s, border-color 0.3s;
 +
  -moz-transition: color 0.3s, border-color 0.3s;
 +
  transition: color 0.3s, border-color 0.3s;
 +
}
 +
 +
.btn:hover {
 +
  border-color: #16a085;
 +
  color: #16a085;
 +
}
 +
 +
 +
.align {
 +
  clear: both;
 +
  margin: 90px auto 20px;
 +
  width: 100%;
 +
  /* max-width: 1170px; */
 +
  max-width: 1400px;
 +
  text-align: center;
 +
  margin-left: 0;
 +
  margin-top: 0;
 +
  margin-bottom: 0;
 +
margin-right: 1.6em;
 +
}
 +
 +
.align>li {
 +
  /* width: 500px; */
 +
  width: 140px;
 +
  /* min-height: 300px; */
 +
  display: inline-block;
 +
  /* margin: 30px 20px 30px 30px; */
 +
  /* padding: 0 0 0 60px; */
 +
  vertical-align: top;
 +
  margin-bottom: -25px;
 +
  margin-top: 30px;
 +
  margin-right: 40px;
 +
}
 +
 +
 +
.book {
 +
  position: relative;
 +
 +
  width: 120px;
 +
 
 +
  height: 160px;
 +
  -webkit-perspective: 1000px;
 +
  -moz-perspective: 1000px;
 +
  perspective: 1000px;
 +
  -webkit-transform-style: preserve-3d;
 +
  -moz-transform-style: preserve-3d;
 +
  transform-style: preserve-3d;
 +
}
 +
 +
 +
.hardcover_front li:first-child {
 +
  background-color: #eee;
 +
  -webkit-backface-visibility: hidden;
 +
  -moz-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
}
 +
 +
 +
.hardcover_front li:last-child {
 +
  background: #fffbec;
 +
}
 +
 +
 +
.hardcover_back li:first-child {
 +
  background: #fffbec;
 +
}
 +
 +
 +
.hardcover_back li:last-child {
 +
  background: #fffbec;
 +
}
 +
 +
.book_spine li:first-child {
 +
  background: #eee;
 +
}
 +
 +
.book_spine li:last-child {
 +
  background: #333;
 +
}
 +
 +
 +
.hardcover_front li:first-child:after,
 +
.hardcover_front li:first-child:before,
 +
.hardcover_front li:last-child:after,
 +
.hardcover_front li:last-child:before,
 +
.hardcover_back li:first-child:after,
 +
.hardcover_back li:first-child:before,
 +
.hardcover_back li:last-child:after,
 +
.hardcover_back li:last-child:before,
 +
.book_spine li:first-child:after,
 +
.book_spine li:first-child:before,
 +
.book_spine li:last-child:after,
 +
.book_spine li:last-child:before {
 +
  background: #999;
 +
}
 +
 +
 +
.page>li {
 +
  background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
  background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
  background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
  background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
  box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
 +
  border-radius: 0px 5px 5px 0px;
 +
}
 +
 +
 +
.hardcover_front {
 +
  -webkit-transform: rotateY(-34deg) translateZ(8px);
 +
  -moz-transform: rotateY(-34deg) translateZ(8px);
 +
  transform: rotateY(-34deg) translateZ(8px);
 +
  z-index: 100;
 +
}
 +
 +
.hardcover_back {
 +
  -webkit-transform: rotateY(-15deg) translateZ(-8px);
 +
  -moz-transform: rotateY(-15deg) translateZ(-8px);
 +
  transform: rotateY(-15deg) translateZ(-8px);
 +
}
 +
 +
.page li:nth-child(1) {
 +
  -webkit-transform: rotateY(-28deg);
 +
  -moz-transform: rotateY(-28deg);
 +
  transform: rotateY(-28deg);
 +
}
 +
 +
.page li:nth-child(2) {
 +
  -webkit-transform: rotateY(-30deg);
 +
  -moz-transform: rotateY(-30deg);
 +
  transform: rotateY(-30deg);
 +
}
 +
 +
.page li:nth-child(3) {
 +
  -webkit-transform: rotateY(-32deg);
 +
  -moz-transform: rotateY(-32deg);
 +
  transform: rotateY(-32deg);
 +
}
 +
 +
.page li:nth-child(4) {
 +
  -webkit-transform: rotateY(-34deg);
 +
  -moz-transform: rotateY(-34deg);
 +
  transform: rotateY(-34deg);
 +
}
 +
 +
.page li:nth-child(5) {
 +
  -webkit-transform: rotateY(-36deg);
 +
  -moz-transform: rotateY(-36deg);
 +
  transform: rotateY(-36deg);
 +
}
 +
 +
 +
.hardcover_front,
 +
.hardcover_back,
 +
.book_spine,
 +
.hardcover_front li,
 +
.hardcover_back li,
 +
.book_spine li {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  -webkit-transform-style: preserve-3d;
 +
  -moz-transform-style: preserve-3d;
 +
  transform-style: preserve-3d;
 +
}
 +
 +
.hardcover_front,
 +
.hardcover_back {
 +
  -webkit-transform-origin: 0% 100%;
 +
  -moz-transform-origin: 0% 100%;
 +
  transform-origin: 0% 100%;
 +
}
 +
 +
.hardcover_front {
 +
  -webkit-transition: all 0.8s ease, z-index 0.6s;
 +
  -moz-transition: all 0.8s ease, z-index 0.6s;
 +
  transition: all 0.8s ease, z-index 0.6s;
 +
}
 +
 +
 +
.hardcover_front li:first-child {
 +
  cursor: default;
 +
  -webkit-user-select: none;
 +
  -moz-user-select: none;
 +
  user-select: none;
 +
  -webkit-transform: translateZ(2px);
 +
  -moz-transform: translateZ(2px);
 +
  transform: translateZ(2px);
 +
}
 +
 +
.hardcover_front li:last-child {
 +
  -webkit-transform: rotateY(180deg) translateZ(2px);
 +
  -moz-transform: rotateY(180deg) translateZ(2px);
 +
  transform: rotateY(180deg) translateZ(2px);
 +
}
 +
 +
 +
.hardcover_back li:first-child {
 +
  -webkit-transform: translateZ(2px);
 +
  -moz-transform: translateZ(2px);
 +
  transform: translateZ(2px);
 +
}
 +
 +
.hardcover_back li:last-child {
 +
  -webkit-transform: translateZ(-2px);
 +
  -moz-transform: translateZ(-2px);
 +
  transform: translateZ(-2px);
 +
}
 +
 +
 +
.hardcover_front li:first-child:after,
 +
.hardcover_front li:first-child:before,
 +
.hardcover_front li:last-child:after,
 +
.hardcover_front li:last-child:before,
 +
.hardcover_back li:first-child:after,
 +
.hardcover_back li:first-child:before,
 +
.hardcover_back li:last-child:after,
 +
.hardcover_back li:last-child:before,
 +
.book_spine li:first-child:after,
 +
.book_spine li:first-child:before,
 +
.book_spine li:last-child:after,
 +
.book_spine li:last-child:before {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
 +
 +
.hardcover_front li:first-child:after,
 +
.hardcover_front li:first-child:before {
 +
 
 +
  height: 100%;
 +
}
 +
 +
.hardcover_front li:first-child:after {
 +
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
}
 +
 +
.hardcover_front li:first-child:before {
 +
  -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
}
 +
 +
.hardcover_front li:last-child:after,
 +
.hardcover_front li:last-child:before {
 +
 +
  height: 160px;
 +
}
 +
 +
.hardcover_front li:last-child:after {
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
 +
}
 +
 +
.hardcover_front li:last-child:before {
 +
 
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 +
}
 +
 +
 +
.hardcover_back li:first-child:after,
 +
.hardcover_back li:first-child:before {
 +
 +
  height: 100%;
 +
}
 +
 +
.hardcover_back li:first-child:after {
 +
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
}
 +
 +
.hardcover_back li:first-child:before {
 +
  -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
}
 +
 +
.hardcover_back li:last-child:after,
 +
.hardcover_back li:last-child:before {
 +
 +
  height: 160px;
 +
}
 +
 +
.hardcover_back li:last-child:after {
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
 +
}
 +
 +
.hardcover_back li:last-child:before {
 +
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 +
}
 +
 +
 +
.book_spine {
 +
  -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 +
  -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 +
  transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 +
 
 +
  width: 20px;
 +
  z-index: 0;
 +
}
 +
 +
.book_spine li:first-child {
 +
  -webkit-transform: translateZ(2px);
 +
  -moz-transform: translateZ(2px);
 +
  transform: translateZ(2px);
 +
}
 +
 +
.book_spine li:last-child {
 +
  -webkit-transform: translateZ(-2px);
 +
  -moz-transform: translateZ(-2px);
 +
  transform: translateZ(-2px);
 +
}
 +
 +
 +
.book_spine li:first-child:after,
 +
.book_spine li:first-child:before {
 +
  width: 4px;
 +
  height: 100%;
 +
}
 +
 +
.book_spine li:first-child:after {
 +
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
}
 +
 +
.book_spine li:first-child:before {
 +
  -webkit-transform: rotateY(-90deg) translateZ(-12px);
 +
  -moz-transform: rotateY(-90deg) translateZ(-12px);
 +
  transform: rotateY(-90deg) translateZ(-12px);
 +
}
 +
 +
.book_spine li:last-child:after,
 +
.book_spine li:last-child:before {
 +
 +
  height: 16px;
 +
}
 +
 +
.book_spine li:last-child:after {
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
 +
}
 +
 +
.book_spine li:last-child:before {
 +
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 +
}
 +
 +
.page,
 +
.page>li {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  -webkit-transform-style: preserve-3d;
 +
  -moz-transform-style: preserve-3d;
 +
  transform-style: preserve-3d;
 +
}
 +
 +
.page {
 +
  width: 100%;
 +
  height: 98%;
 +
  top: 1%;
 +
  left: 3%;
 +
  z-index: 10;
 +
}
 +
 +
.page>li {
 +
  width: 100%;
 +
  height: 100%;
 +
  -webkit-transform-origin: left center;
 +
  -moz-transform-origin: left center;
 +
  transform-origin: left center;
 +
  -webkit-transition-property: transform;
 +
  -moz-transition-property: transform;
 +
  transition-property: transform;
 +
  -webkit-transition-timing-function: ease;
 +
  -moz-transition-timing-function: ease;
 +
  transition-timing-function: ease;
 +
}
 +
 +
.page>li:nth-child(1) {
 +
  -webkit-transition-duration: 0.6s;
 +
  -moz-transition-duration: 0.6s;
 +
  transition-duration: 0.6s;
 +
}
 +
 +
.page>li:nth-child(2) {
 +
  -webkit-transition-duration: 0.6s;
 +
  -moz-transition-duration: 0.6s;
 +
  transition-duration: 0.6s;
 +
}
 +
 +
.page>li:nth-child(3) {
 +
  -webkit-transition-duration: 0.4s;
 +
  -moz-transition-duration: 0.4s;
 +
  transition-duration: 0.4s;
 +
}
 +
 +
.page>li:nth-child(4) {
 +
  -webkit-transition-duration: 0.5s;
 +
  -moz-transition-duration: 0.5s;
 +
  transition-duration: 0.5s;
 +
}
 +
 +
.page>li:nth-child(5) {
 +
  -webkit-transition-duration: 0.6s;
 +
  -moz-transition-duration: 0.6s;
 +
  transition-duration: 0.6s;
 +
}
 +
 +
 +
.book:hover>.hardcover_front {
 +
  -webkit-transform: rotateY(-145deg) translateZ(0);
 +
  -moz-transform: rotateY(-145deg) translateZ(0);
 +
  transform: rotateY(-145deg) translateZ(0);
 +
  z-index: 0;
 +
}
 +
 +
.book:hover>.page li:nth-child(1) {
 +
  -webkit-transform: rotateY(-30deg);
 +
  -moz-transform: rotateY(-30deg);
 +
  transform: rotateY(-30deg);
 +
  -webkit-transition-duration: 1.5s;
 +
  -moz-transition-duration: 1.5s;
 +
  transition-duration: 1.5s;
 +
}
 +
 +
.book:hover>.page li:nth-child(2) {
 +
  -webkit-transform: rotateY(-35deg);
 +
  -moz-transform: rotateY(-35deg);
 +
  transform: rotateY(-35deg);
 +
  -webkit-transition-duration: 1.8s;
 +
  -moz-transition-duration: 1.8s;
 +
  transition-duration: 1.8s;
 +
}
 +
 +
.book:hover>.page li:nth-child(3) {
 +
  -webkit-transform: rotateY(-118deg);
 +
  -moz-transform: rotateY(-118deg);
 +
  transform: rotateY(-118deg);
 +
  -webkit-transition-duration: 1.6s;
 +
  -moz-transition-duration: 1.6s;
 +
  transition-duration: 1.6s;
 +
}
 +
 +
.book:hover>.page li:nth-child(4) {
 +
  -webkit-transform: rotateY(-130deg);
 +
  -moz-transform: rotateY(-130deg);
 +
  transform: rotateY(-130deg);
 +
  -webkit-transition-duration: 1.4s;
 +
  -moz-transition-duration: 1.4s;
 +
  transition-duration: 1.4s;
 +
}
 +
 +
.book:hover>.page li:nth-child(5) {
 +
  -webkit-transform: rotateY(-140deg);
 +
  -moz-transform: rotateY(-140deg);
 +
  transform: rotateY(-140deg);
 +
  -webkit-transition-duration: 1.2s;
 +
  -moz-transition-duration: 1.2s;
 +
  transition-duration: 1.2s;
 +
}
 +
 +
 +
.coverDesign {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  bottom: 0;
 +
  right: 0;
 +
  overflow: hidden;
 +
  z-index: 1;
 +
  -webkit-backface-visibility: hidden;
 +
  -moz-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
}
 +
 +
.coverDesign::after {
 +
  background-image: -webkit-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
 +
  background-image: -moz-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
 +
  background-image: linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  bottom: 0;
 +
  right: 0;
 +
}
 +
 +
.coverDesign h1 {
 +
  color: #fff;
 +
  font-size: 2.2em;
 +
  letter-spacing: 0.05em;
 +
  text-align: center;
 +
  margin: 54% 0 0 0;
 +
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
 +
}
 +
 +
.coverDesign p {
 +
  color: #f8f8f8;
 +
  font-size: 1em;
 +
  text-align: center;
 +
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
 +
}
 +
 +
.yellow {
 +
  background-color: #f1c40f;
 +
  background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 +
  background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 +
  background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 +
}
 +
 +
.blue {
 +
  background-color: #3498db;
 +
  background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
 +
  background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
 +
  background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
 +
}
 +
 +
.grey {
 +
  background-color: #f8e9d1;
 +
  background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
 +
  background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
 +
  background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
 +
}
 +
 +
 +
.ribbon {
 +
  background: #c0392b;
 +
  color: #fff;
 +
  display: block;
 +
  font-size: 0.7em;
 +
  position: absolute;
 +
  top: 11px;
 +
  right: 1px;
 +
  width: 40px;
 +
  height: 20px;
 +
  line-height: 20px;
 +
  letter-spacing: 0.15em;
 +
  text-align: center;
 +
  -webkit-transform: rotateZ(45deg) translateZ(1px);
 +
  -moz-transform: rotateZ(45deg) translateZ(1px);
 +
  transform: rotateZ(45deg) translateZ(1px);
 +
  -webkit-backface-visibility: hidden;
 +
  -moz-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
  z-index: 10;
 +
}
 +
 +
.ribbon::before,
 +
.ribbon::after {
 +
  position: absolute;
 +
  top: -20px;
 +
  width: 0;
 +
  height: 0;
 +
  border-bottom: 20px solid #c0392b;
 +
  border-top: 20px solid transparent;
 +
}
 +
 +
.ribbon::before {
 +
  left: -20px;
 +
  border-left: 20px solid transparent;
 +
}
 +
 +
.ribbon::after {
 +
  right: -20px;
 +
  border-right: 20px solid transparent;
 +
}
 +
 +
 +
@media screen and (max-width: 37.8125em) {
 +
  .align>li {
 +
    width: 100%;
 +
    min-height: 440px;
 +
    height: auto;
 +
    padding: 0;
 +
    margin: 0 0 30px 0;
 +
  }
 +
 +
  .book {
 +
    margin: 0 auto;
 +
  }
 +
 +
  figcaption {
 +
    text-align: center;
 +
    width: 320px;
 +
    top: 250px;
 +
    padding-left: 0;
 +
    left: -80px;
 +
    font-size: 90%;
 +
  }
 +
}
 +
</style>
 +
 +
 +
 +
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomcss&action=raw&ctype=text/css" />
 +
 +
 +
 +
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/modernizr&action=raw&ctype=text/javascript"></script>
 +
 +
<style>
 +
    html,
 +
    body,
 +
    .footer {
 +
      background-color: #93D1D5;
 +
    }
 +
 +
    .wrap {
 +
      /* margin-left: 75px;
 +
  margin-right: 75px; */
 +
      margin: 0 auto;
 +
      width: 90vw;
 +
    }
 +
 +
    .shelf {
 +
      width: 100%;
 +
      height: 150px;
 +
      z-index: -1;
 +
      background: transparent url(https://static.igem.org/mediawiki/2020/e/ea/T--KSA_KOREA--shelf.png) no-repeat center center;
 +
      background-size: contain;
 +
    }
 +
 +
    .align>li {
 +
      width: 100px;
 +
    }
 +
 +
    .book-wrapper {
 +
      height: 100vh;
 +
      width: 90vw;
 +
      margin: 0 auto;
 +
    }
 +
 +
    .bb-custom-side>img {
 +
      display: flex;
 +
      width: 100%;
 +
      /* height: 100%; */
 +
      object-fit: contain;
 +
    }
 +
 +
    /* .dropdown {
 +
  z-index: 2000;
 +
  position: fixed;
 +
  bottom: 3%;
 +
  right: 1%;
 +
} */
 +
    .navbar.is-fixed-top {
 +
      z-index: 2000;
 +
      width: 90vw;
 +
      margin: 0 auto;
 +
    }
 +
 +
    /* .navbar.is-dark {
 +
  background-color: #7FBEBC;
 +
} */
 +
    .coverDesign h1 {
 +
      font-size: 1.3em;
 +
    }
 +
 +
    /* Video Stuff */
 +
    .hero.is-medium .hero-body {
 +
      padding-top: 0;
 +
      padding-left: 0;
 +
      padding-right: 0;
 +
      padding-bottom: 3rem;
 +
    }
 +
 +
    nav#left-pages {
 +
      position: fixed;
 +
      left: 1%;
 +
      top: 40%;
 +
      z-index: 9999;
 +
    }
 +
 +
    nav#right-pages {
 +
      position: fixed;
 +
      right: 1%;
 +
      top: 40%;
 +
      z-index: 9999;
 +
    }
 +
 +
    nav#left-pages a,
 +
    nav#right-pages a {
 +
      display: block;
 +
      margin-top: 2em;
 +
    }
 +
 +
    .navbar.is-primary,
 +
    .button.is-primary {
 +
      background-color: #93D1D5;
 +
    }
 +
 +
    a.btn.bookLink {
 +
padding-top: 0;
 +
margin-top: 0;
 +
}
 +
 +
#flip-nav .button {
 +
    color: white;
 +
    background-color: transparent;
 +
    border: none;
 +
max-width: 100%;
 +
font-size: 2em;
 +
    padding: 0;
 +
    padding-bottom: 1.5em;
 +
 +
}
 +
 +
#flip-nav .button:hover {
 +
background-color: #00d1b2;
 +
}
 +
 +
.footer {
 +
      width: 100%;
 +
      min-height: 35vh;
 +
      z-index: -1;
 +
      background: transparent url(https://static.igem.org/mediawiki/2020/e/eb/T--KSA_KOREA--footer.png) no-repeat center center;
 +
      background-size: contain;
 +
    }
 +
 +
 +
.navbar.is-primary .navbar-brand>a.navbar-item:hover {
 +
background-color: transparent;
 +
}
 +
 +
.navbar-item img {
 +
max-height: 6rem;
 +
}
 +
 +
#bookGroup {
 +
  margin: 0 auto;
 +
  margin-bottom: 15px;
 +
}
 +
 +
 +
  </style>
 +
 +
 +
</head>
 +
 +
<body>
 +
 +
 +
<div class="wrap">
 +
    <ul class="align" id="bookGroup">
 +
      <li>
 +
        <figure class='book'>
 +
          <!-- Front -->
 +
          <ul class='hardcover_front'>
 +
            <li>
 +
              <img src="https://static.igem.org/mediawiki/2020/9/9b/T--KSA_KOREA--covers_1.png" alt="" width="100%" height="100%">
 +
            </li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Pages -->
 +
          <ul class='page'>
 +
            <li></li>
 +
            <li>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">Description</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">Results</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">Measurement</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Modeling">Modeling</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Implementation">Implementation</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Appendix">Appendix</a>
 +
            </li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Back -->
 +
          <ul class='hardcover_back'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <ul class='book_spine'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
        </figure>
 +
      </li>
 +
 +
      <li>
 +
        <figure class='book'>
 +
          <!-- Front -->
 +
          <ul class='hardcover_front'>
 +
            <li>
 +
              <img src="https://static.igem.org/mediawiki/2020/c/ce/T--KSA_KOREA--covers_2.png" alt="" width="100%" height="100%">
 +
            </li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Pages -->
 +
          <ul class='page'>
 +
            <li></li>
 +
            <li>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">Ligninator</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">Biosensor</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Collection">Collection</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Contribution">Contribution</a>
 +
            </li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Back -->
 +
          <ul class='hardcover_back'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <ul class='book_spine'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
        </figure>
 +
      </li>
 +
      <li>
 +
        <figure class='book'>
 +
          <!-- Front -->
 +
          <ul class='hardcover_front'>
 +
            <li>
 +
              <img src="https://static.igem.org/mediawiki/2020/b/b2/T--KSA_KOREA--covers_3.png" alt="" width="100%" height="100%">
 +
            </li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Pages -->
 +
          <ul class='page'>
 +
            <li></li>
 +
            <li>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HW/Flourometer">Fluorometer</a>
 +
            </li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Back -->
 +
          <ul class='hardcover_back'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <ul class='book_spine'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
        </figure>
 +
      </li>
 +
      <li>
 +
        <figure class='book'>
 +
          <!-- Front -->
 +
          <ul class='hardcover_front'>
 +
            <li>
 +
              <img src="https://static.igem.org/mediawiki/2020/a/af/T--KSA_KOREA--covers_4.png" alt="" width="100%" height="100%">
 +
            </li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Pages -->
 +
          <ul class='page'>
 +
            <li></li>
 +
            <li>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Biosensor">Biosensor App</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Crispy">Crispy</a>
 +
       
 +
            </li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Back -->
 +
          <ul class='hardcover_back'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <ul class='book_spine'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
        </figure>
 +
      </li>
 +
      <li>
 +
        <figure class='book'>
 +
          <!-- Front -->
 +
          <ul class='hardcover_front'>
 +
            <li>
 +
              <img src="https://static.igem.org/mediawiki/2020/f/fc/T--KSA_KOREA--covers_5.png" alt="" width="100%" height="100%">
 +
            </li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Pages -->
 +
          <ul class='page'>
 +
            <li></li>
 +
            <li>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">Overview</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">Identification</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">Integration</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Improvement">Improvement</a>
 +
              <a class="btn bookLink" href="https://docs.google.com/document/d/e/2PACX-1vSt2M1WlhUYAtq64M2OOh4E0CNE-a7yO33OZq_PeJLidhzN4fS84CBk1EqZLObt9OoZd1eoCzVsr26Z/pub">Survey Analysis</a>
 +
            </li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Back -->
 +
          <ul class='hardcover_back'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <ul class='book_spine'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
        </figure>
 +
      </li>
 +
      <li>
 +
        <figure class='book'>
 +
          <!-- Front -->
 +
          <ul class='hardcover_front'>
 +
            <li>
 +
              <img src="https://static.igem.org/mediawiki/2020/b/b2/T--KSA_KOREA--covers_6.png" alt="" width="100%" height="100%">
 +
            </li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Pages -->
 +
          <ul class='page'>
 +
            <li></li>
 +
            <li>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Education">Education</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Collaboration">Collaboration</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Web">Web Presence</a>
 +
            </li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Back -->
 +
          <ul class='hardcover_back'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <ul class='book_spine'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
        </figure>
 +
      </li>
 +
      <li>
 +
        <figure class='book'>
 +
          <!-- Front -->
 +
          <ul class='hardcover_front'>
 +
            <li>
 +
              <img src="https://static.igem.org/mediawiki/2020/6/6c/T--KSA_KOREA--covers_7.png" alt="" width="100%" height="100%">
 +
            </li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Pages -->
 +
          <ul class='page'>
 +
            <li></li>
 +
            <li>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Members">Members</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">Attributions</a>
 +
            </li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Back -->
 +
          <ul class='hardcover_back'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <ul class='book_spine'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
        </figure>
 +
      </li>
 +
 +
      <li>
 +
        <figure class='book'>
 +
          <!-- Front -->
 +
          <ul class='hardcover_front'>
 +
            <li>
 +
              <img src="https://static.igem.org/mediawiki/2020/7/73/T--KSA_KOREA--covers_8.png" alt="" width="100%" height="100%">
 +
            </li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Pages -->
 +
          <ul class='page'>
 +
            <li></li>
 +
            <li>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Logistics/Judging">Judging</a>
 +
     
 +
         
 +
            </li>
 +
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <!-- Back -->
 +
          <ul class='hardcover_back'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
          <ul class='book_spine'>
 +
            <li></li>
 +
            <li></li>
 +
          </ul>
 +
        </figure>
 +
      </li>
 +
    </ul>
 +
    <div class="shelf"></div>
 +
  </div>
 +
 +
 +
 +
  <!-- *************************************** START OF BOOK *********************************************** -->
 +
 +
 +
 +
    <div class="book-wrapper">
 +
    <nav class="navbar is-fixed-top is-primary is-spaced" role="navigation" aria-label="main navigation">
 +
      <div class="navbar-brand">
 +
        <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA">
 +
          <img src="https://static.igem.org/mediawiki/2020/6/64/T--KSA_KOREA--logo.png" width="100" height="50">
 +
        </a>
 +
        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
 +
          <span aria-hidden="true"></span>
 +
          <span aria-hidden="true"></span>
 +
          <span aria-hidden="true"></span>
 +
        </a>
 +
      </div>
 +
      <div id="navbarBasicExample" class="navbar-menu">
 +
        <div class="navbar-start">
 +
         
 +
 +
          <!-- This is end of navbar start -->
 +
        </div>
 +
 +
        <div class="navbar-end">
 +
          <!-- Team -->
 +
          <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link has-text-light has-background-primary ">
 +
              Team
 +
            </a>
 +
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item has-text-light has-background-primary" href="https://2020.igem.org/Team:KSA_KOREA/Members">
 +
                Members
 +
              </a>
 +
             
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">
 +
                Attributions
 +
              </a>
 +
            </div>
 +
          </div>
 +
 +
          <!-- Project -->
 +
 +
          <div class="navbar-item has-dropdown is-hoverable">
 +
            <a class="navbar-link">
 +
              Project
 +
            </a>
 +
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">
 +
                Description
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">
 +
                Results
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">
 +
                Measurement
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Modeling">
 +
                Modeling
 +
              </a>
 +
            </div>
 +
          </div>
 +
 +
          <!-- PARTS-->
 +
 +
          <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Parts
 +
            </a>
 +
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">
 +
                Ligninator
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">
 +
                Biosensor
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Collection">
 +
                Collection
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Contribution">
 +
                Contribution
 +
              </a>
 +
 +
            </div>
 +
          </div>
 +
 +
          <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Human Practices
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">
 +
                Overview
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">
 +
                Identification
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">
 +
                Integration
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Improvement">
 +
                Improvement
 +
              </a>
 +
              <a class="navbar-item" href="https://docs.google.com/document/d/e/2PACX-1vSt2M1WlhUYAtq64M2OOh4E0CNE-a7yO33OZq_PeJLidhzN4fS84CBk1EqZLObt9OoZd1eoCzVsr26Z/pub">
 +
                Survey Analysis
 +
              </a>
 +
            </div>
 +
          </div>
 +
 +
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Hardware
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HW/Fluorometer">
 +
                Fluorometer
 +
              </a>
 +
         
 +
             
 +
            </div>
 +
          </div>
 +
 +
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Logistics
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Logistics/Judging">
 +
                Judging
 +
              </a>
 +
             
 +
             
 +
            </div>
 +
          </div>
 +
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Communication
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Education">
 +
                Education
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Collaboration">
 +
                Collaboration
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Web">
 +
                Web Presence
 +
              </a>
 +
            </div>
 +
          </div>
 +
 +
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Software
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Software/Biosensor">
 +
                Biosensor
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Software/Crispy">
 +
                Crispy
 +
              </a>
 +
         
 +
            </div>
 +
          </div>
 +
 +
       
 +
 +
         
 +
 +
        </div>
 +
 +
 +
      </div>
 +
    </nav>
 +
 +
 +
    <div class="bb-custom-wrapper">
 +
      <div id="bb-bookblock" class="bb-bookblock">
 +
   
 +
       
 +
        <div class="bb-item">
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/d/d2/T--KSA_KOREA--id1.png" />
 +
          </div>
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/0/0e/T--KSA_KOREA--id2.png" />
 +
          </div>
 +
        </div>
 +
        <div class="bb-item">
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/b/b0/T--KSA_KOREA--id3.png" />
 +
          </div>
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/f/f6/T--KSA_KOREA--id4.png" />
 +
          </div>
 +
        </div>
 +
        <div class="bb-item">
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/9/9c/T--KSA_KOREA--id5.png" />
 +
          </div>
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/5/59/T--KSA_KOREA--id6.png" />
 +
          </div>
 +
        </div>
 +
        <div class="bb-item">
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/0/05/T--KSA_KOREA--id7.png" />
 +
          </div>
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/6/67/T--KSA_KOREA--id8.png" />
 +
          </div>
 +
        </div>
 +
        <div class="bb-item">
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/0/05/T--KSA_KOREA--id7.png" />
 +
          </div>
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/6/67/T--KSA_KOREA--id8.png" />
 +
          </div>
 +
        </div>
 +
        <div class="bb-item">
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/a/ab/T--KSA_KOREA--id9.png" />
 +
          </div>
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/d/d5/T--KSA_KOREA--id10.png" />
 +
          </div>
 +
        </div>
 +
        <div class="bb-item">
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/d/d5/T--KSA_KOREA--id11.png" />
 +
          </div>
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/c/c6/T--KSA_KOREA--id12.png" />
 +
          </div>
 +
        </div>
 +
        <div class="bb-item">
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/6/6e/T--KSA_KOREA--id13.png" />
 +
          </div>
 +
          <div class="bb-custom-side">
 +
            <img src="https://static.igem.org/mediawiki/2020/f/f5/T--KSA_KOREA--id14.png" />
 +
          </div>
 +
        </div>
 +
      </div>
 +
 +
 +
    </div>
 +
 +
  </div>
 +
<!-- HERE IS END OF BOOK WRAPPER -->
 +
 +
  <div id="flip-nav">
 +
    <nav id="left-pages">
 +
      <a id="bb-nav-prev" href="#" class="button is-primary"><</a>
 +
      <a id="bb-nav-first" href="#" class="button is-primary"><<</a>
 +
    </nav>
 +
 +
 +
    <nav id="right-pages">
 +
      <a id="bb-nav-next" href="#" class="button is-primary">></a>
 +
      <a id="bb-nav-last" class="button is-primary">>></a>
 +
    </nav>
 +
  </div>
 +
 +
 +
<div class="footer"></div>
 +
 +
 +
 +
 +
 +
  <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookBlockjs&action=raw&ctype=text/javascript"></script>
 +
 +
 +
 +
  <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomjs&action=raw&ctype=text/javascript">
 +
  </script>
 +
 +
 +
 +
 +
  <script>
 +
    $(document).ready(function() {
 +
      var Page = (function() {
 +
 +
        var config = {
 +
            $bookBlock: $('#bb-bookblock'),
 +
            $navNext: $('#bb-nav-next'),
 +
            $navPrev: $('#bb-nav-prev'),
 +
            $navFirst: $('#bb-nav-first'),
 +
            $navLast: $('#bb-nav-last')
 +
          },
 +
          init = function() {
 +
            console.log("enter");
 +
            var $content = $('#bb-bookblock');
 +
            while ($content.length === 0) {
 +
              setTimeout(() => {
 +
                console.log($content.length);
 +
              }, 200);
 +
              $content = $("bb-bookblock");
 +
            }
 +
 +
            config.$bookBlock.bookblock({
 +
              speed: 1000,
 +
              shadowSides: 0.8,
 +
              shadowFlip: 0.4
 +
            });
 +
            initEvents();
 +
          },
 +
          initEvents = function() {
 +
 +
            var $slides = config.$bookBlock.children();
 +
 +
            // add navigation events
 +
            config.$navNext.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('next');
 +
              return false;
 +
            });
 +
 +
            config.$navPrev.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('prev');
 +
              return false;
 +
            });
 +
 +
            config.$navFirst.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('first');
 +
              return false;
 +
            });
 +
 +
            config.$navLast.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('last');
 +
              return false;
 +
            });
 +
 +
            // add swipe events
 +
            $slides.on({
 +
              'swipeleft': function(event) {
 +
                config.$bookBlock.bookblock('next');
 +
                return false;
 +
              },
 +
              'swiperight': function(event) {
 +
                config.$bookBlock.bookblock('prev');
 +
                return false;
 +
              }
 +
            });
 +
 +
            // add keyboard events
 +
            $(document).keydown(function(e) {
 +
              var keyCode = e.keyCode || e.which,
 +
                arrow = {
 +
                  left: 37,
 +
                  up: 38,
 +
                  right: 39,
 +
                  down: 40
 +
                };
 +
 +
              switch (keyCode) {
 +
                case arrow.left:
 +
                  config.$bookBlock.bookblock('prev');
 +
                  break;
 +
                case arrow.right:
 +
                  config.$bookBlock.bookblock('next');
 +
                  break;
 +
              }
 +
            });
 +
          };
 +
 +
        return {
 +
          init: init
 +
        };
 +
 +
      })();
 +
      Page.init();
 +
    });
 +
   
 +
  </script>
 +
 +
 +
<script>
 +
$(document).ready(function() {
 +
document.getElementById("content").style.background = "#93D1D5";
 +
});
 +
 +
</script>
 +
 +
 +
  <script>
 +
    $(document).ready(function() {
 +
      var $nav = $('.navbar.is-fixed-top'); //Caching element
 +
      var $books = $('.wrap .align');
 +
      var $video = $(".hero.is-medium");
 +
      var $pageNav = $("#flip-nav");
 +
      // hide .navbar first - you can also do this in css .nav{display:none;}
 +
      $nav.hide();
 +
      $pageNav.hide();
 +
 +
      // fade in .navbar
 +
      $(function() {
 +
        $(window).scroll(function() {
 +
          // set distance user needs to scroll before we start fadeIn
 +
          if ($(this).scrollTop() > $books.height()) {
 +
            $nav.fadeIn();
 +
          } else {
 +
            $nav.fadeOut();
 +
          }
 +
        });
 +
      });
 +
 +
      $(function() {
 +
        $(window).scroll(function() {
 +
          // set distance user needs to scroll before we start fadeIn
 +
          if ($(this).scrollTop() > $books.height()) {
 +
            $pageNav.fadeIn();
 +
          } else {
 +
            $pageNav.fadeOut();
 +
          }
 +
        });
 +
      });
 +
 +
    });
 +
  </script>
 +
  <script type="text/javascript">
 +
    $(document).ready(function() {
 +
      $('.bb-custom-side img').each(function() {
 +
        $(this).imageZoom();
 +
      });
 +
    });
 +
  </script>
 +
</body>
  
  
 
</html>
 
</html>

Revision as of 15:08, 5 December 2020