Difference between revisions of "Team:KSA KOREA"

 
(47 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<head>
 
<head>
 +
 +
<style>
 +
.navbar-item.has-dropdown.is-hoverable {
 +
  padding-right: 20px;
 +
}
 +
 +
 +
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
 +
body, html {background-color:white; width: 100%; height: 100%;}
 +
#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" />
 
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/Bulma&action=raw&ctype=text/css" />
Line 9: Line 22:
 
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/demo&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" />
  
−
<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>
  
  
−
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookCSS&action=raw&ctype=text/css" />
+
.bb-custom-wrapper {
 +
  width: 100%;
 +
  height: 100%;
 +
  position: relative;
 +
 
 +
}
 +
 
 +
.bb-custom-wrapper .bb-bookblock {
 +
  width: 100%;
 +
  height: 100%;
 +
  -webkit-perspective: 2000px;
 +
  perspective: 2000px;
 +
}
 +
 
 +
.bb-custom-side {
 +
  width: 50%;
 +
  float: left;
 +
  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;
 +
}
 +
 
 +
.bb-custom-firstpage h1 {
 +
  font-size: 2.625em;
 +
  line-height: 1.3;
 +
  margin: 0;
 +
  font-weight: 300;
 +
  background: #fff;
 +
}
 +
 
 +
.bb-custom-firstpage h1 span {
 +
  display: block;
 +
  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%;
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
#page-nav {
 +
  width: 100%;
 +
  height: 40px;
 +
  margin: 1em auto 0;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  z-index: 1000;
 +
  text-align: center;
 +
}
 +
 
 +
#page-nav a {
 +
  display: inline-block;
 +
  width: 40px;
 +
  height: 40px;
 +
  text-align: center;
 +
  border-radius: 2px;
 +
  background: #1baede;
 +
  color: #fff;
 +
  font-size: 0;
 +
  margin: 2px;
 +
}
 +
 
 +
.bb-custom-wrapper>nav a {
 +
  display: inline-block;
 +
  width: 40px;
 +
  height: 40px;
 +
  text-align: center;
 +
  border-radius: 2px;
 +
  background: #1baede;
 +
  color: #fff;
 +
  font-size: 0;
 +
  margin: 2px;
 +
}
 +
 
 +
#page-nav a:hover {
 +
  opacity: 0.6;
 +
}
 +
 
 +
.bb-custom-wrapper>nav a:hover {
 +
  opacity: 0.6;
 +
}
 +
 
 +
.bb-custom-icon:before {
 +
  font-family: 'arrows';
 +
  speak: none;
 +
  font-style: normal;
 +
  font-weight: normal;
 +
  font-variant: normal;
 +
  text-transform: none;
 +
  line-height: 1;
 +
  font-size: 30px;
 +
  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";
 +
}
 +
 
 +
.bb-custom-icon-arrow-left:before,
 +
.bb-custom-icon-first:before {
 +
  -webkit-transform: rotate(180deg);
 +
  transform: rotate(180deg);
 +
}
 +
 
 +
 
 +
.no-js .bb-custom-wrapper {
 +
  height: auto;
 +
}
 +
 
 +
.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" />
  
−
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomcss&action=raw&ctype=text/css" />
 
  
  
 
<style>
 
<style>
−
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
+
*, *:after, *:before {
−
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
+
  -webkit-box-sizing: border-box;
−
body, html {background-color:white; width: 100%; height: 100%;}
+
  -moz-box-sizing: border-box;
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  box-sizing: border-box;
−
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
+
}
 +
 
 +
* {
 +
  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>
 
</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>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/modernizr&action=raw&ctype=text/javascript"></script>
Line 54: Line 913:
  
 
     .book-wrapper {
 
     .book-wrapper {
−
       height: 100%;
+
       height: 100vh;
 
       width: 90vw;
 
       width: 90vw;
 
       margin: 0 auto;
 
       margin: 0 auto;
Line 117: Line 976:
 
       background-color: #93D1D5;
 
       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;
 +
}
 +
 +
iframe {
 +
display: block;
 +
margin: 0 auto;
 +
}
 +
 +
 
   </style>
 
   </style>
  
Line 126: Line 1,034:
  
 
<div class="wrap">
 
<div class="wrap">
−
     <ul class="align">
+
     <ul class="align" id="bookGroup">
 
       <li>
 
       <li>
 
         <figure class='book'>
 
         <figure class='book'>
Line 140: Line 1,048:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Description</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">Description</a>
−
               <a class="btn" href="#">Results</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">Results</a>
−
               <a class="btn" href="#">Implementation</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">Measurement</a>
−
               <a class="btn" href="#">Appendix</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>
Line 174: Line 1,084:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Basic</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">Ligninator</a>
−
               <a class="btn" href="#">Composite</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">Biosensor</a>
−
               <a class="btn" href="#">Collection</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Collection">Collection</a>
−
               <a class="btn" href="#">Contribution</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Contribution">Contribution</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 207: Line 1,117:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Fluorometer</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HW/Flourometer">Fluorometer</a>
−
               <a class="btn" href="#">Computer Vision</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HW/Business">Business</a>
−
              <a class="btn" href="#">Entrepreneurship</a>
+
−
              <a class="btn" href="#">Modeling</a>
+
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 240: Line 1,148:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Software 1</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Biosensor">Biosensor App.</a>
−
              <a class="btn" href="#">Software 2</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Crispy">Crispy</a>
−
               <a class="btn" href="#">Software 3</a>
+
       
−
              <a class="btn" href="#">Software 4</a>
+
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 273: Line 1,180:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">overview</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">Overview</a>
−
               <a class="btn" href="#">Identification</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">Identification</a>
−
               <a class="btn" href="#">Integration</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">Integration</a>
−
               <a class="btn" href="#">Improvement</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>
Line 306: Line 1,214:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Education</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Education">Education</a>
−
               <a class="btn" href="#">Collaboration</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Collaboration">Collaboration</a>
−
               <a class="btn" href="#">Web Presence</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Web">Web Presence</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 338: Line 1,246:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">About Us</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Members">Members</a>
−
               <a class="btn" href="#">Members</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">Attributions</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 370: Line 1,278:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Awards</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Logistics/Judging">Judging</a>
−
              <a class="btn" href="#">Judging Form</a>
+
     
−
              <a class="btn" href="#">Safety</a>
+
         
−
              <a class="btn" href="#">Attribution</a>
+
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 403: Line 1,310:
 
     <nav class="navbar is-fixed-top is-primary is-spaced" role="navigation" aria-label="main navigation">
 
     <nav class="navbar is-fixed-top is-primary is-spaced" role="navigation" aria-label="main navigation">
 
       <div class="navbar-brand">
 
       <div class="navbar-brand">
−
         <a class="navbar-item" href="#">
+
         <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA">
−
           <img src="images/ksalogo.png" width="100" height="50">
+
           <img src="https://static.igem.org/mediawiki/2020/6/64/T--KSA_KOREA--logo.png" width="100" height="50">
 
         </a>
 
         </a>
 
         <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
 
         <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
Line 414: Line 1,321:
 
       <div id="navbarBasicExample" class="navbar-menu">
 
       <div id="navbarBasicExample" class="navbar-menu">
 
         <div class="navbar-start">
 
         <div class="navbar-start">
−
           <a class="navbar-item">
+
            
−
            Home
+
−
          </a>
+
  
 
           <!-- This is end of navbar start -->
 
           <!-- This is end of navbar start -->
Line 429: Line 1,334:
  
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
−
               <a class="navbar-item">
+
               <a class="navbar-item has-text-light has-background-primary" href="https://2020.igem.org/Team:KSA_KOREA/Members">
 
                 Members
 
                 Members
 
               </a>
 
               </a>
−
               <a class="navbar-item has-text-light has-background-primary">
+
             
−
                Collaboration
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">
−
              </a>
+
                 Attributions
−
              <a class="navbar-item">
+
−
                 Attribution
+
 
               </a>
 
               </a>
 
             </div>
 
             </div>
Line 449: Line 1,352:
  
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">
−
                 Description/Inspiration
+
                 Description
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">
−
                 Design
+
                 Results
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">
−
                Labnotes
+
                 Measurement
−
              </a>
+
−
              <a class="navbar-item">
+
−
                Protocol
+
−
              </a>
+
−
              <a class="navbar-item">
+
−
                 Results
+
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Modeling">
−
                 Parts
+
                 Modeling
 
               </a>
 
               </a>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
  
−
           <!-- Device -->
+
           <!-- PARTS-->
  
 
           <div class="navbar-item has-dropdown is-hoverable ">
 
           <div class="navbar-item has-dropdown is-hoverable ">
 
             <a class="navbar-link">
 
             <a class="navbar-link">
−
               Device
+
               Parts
 
             </a>
 
             </a>
  
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">
−
                 Software
+
                 Ligninator
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">
−
                 Hardware
+
                 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>
 
               </a>
  
Line 492: Line 1,395:
 
               Human Practices
 
               Human Practices
 
             </a>
 
             </a>
−
 
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">
−
                 Introduction
+
                 Overview
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">
−
                 Education
+
                 Identification
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">
−
                 Campaign
+
                 Integration
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Improvement">
−
                 Interviews
+
                 Improvement
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://docs.google.com/document/d/e/2PACX-1vSt2M1WlhUYAtq64M2OOh4E0CNE-a7yO33OZq_PeJLidhzN4fS84CBk1EqZLObt9OoZd1eoCzVsr26Z/pub">
 
                 Survey Analysis
 
                 Survey Analysis
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
            </div>
−
                 Integrated Human Practices
+
          </div>
 +
 
 +
 
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Hardware & Business
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HW/Fluorometer">
 +
                Fluorometer
 +
              </a> 
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HW/Business">
 +
                Business
 +
              </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>
 
               </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>
  
−
          <a class="navbar-item">
+
       
−
            Awards/Judging Form
+
−
          </a>
+
  
−
           <a class="navbar-item">
+
            
−
            Safety
+
−
          </a>
+
  
 
         </div>
 
         </div>
Line 533: Line 1,489:
 
     <div class="bb-custom-wrapper">
 
     <div class="bb-custom-wrapper">
 
       <div id="bb-bookblock" class="bb-bookblock">
 
       <div id="bb-bookblock" class="bb-bookblock">
−
        <div class="bb-item">
+
   
−
          <div class="bb-custom-firstpage">
+
          
−
            <h1>BookBlock <span>A Content Flip Plugin</span></h1>
+
      <iframe width="1200" height="800" src="https://www.youtube.com/embed/6eqk6ADKtFQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
−
            <nav class="codrops-demos">
+
          
−
              <a class="current-demo" href="index4.html">Demo 4</a>
+
−
              <a href="index5.html">Demo 5</a>
+
−
            </nav>
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <p>Pastry bear claw oat cake danish croissant jujubes danish. Wypas soufflé muffin. Liquorice powder pastry danish. Candy toffee gummi bears chocolate bar lollipop applicake chocolate cake danish brownie.</p>
+
−
          </div>
+
−
         </div>
+
−
        <div class="bb-item">
+
−
          <div class="bb-custom-side">
+
−
            <p>Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan jelly-o.</p>
+
−
          </div>
+
−
        </div>
+
−
        <div class="bb-item">
+
−
          <div class="bb-custom-side">
+
−
            <img src="https://static.igem.org/mediawiki/2020/0/0b/T--KSA_KOREA--HP_1Overview_1.png" />
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <img src="https://static.igem.org/mediawiki/2020/0/0b/T--KSA_KOREA--HP_1Overview_1.png" />
+
−
          </div>
+
−
        </div>
+
−
        <div class="bb-item">
+
−
          <div class="bb-custom-side">
+
−
            <img src="https://static.igem.org/mediawiki/2020/0/0b/T--KSA_KOREA--HP_1Overview_1.png" />
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <img src="https://static.igem.org/mediawiki/2020/0/0b/T--KSA_KOREA--HP_1Overview_1.png" />
+
−
          </div>
+
−
         </div>
+
  
−
        <div class="bb-item">
+
     
−
          <div class="bb-custom-side">
+
−
            <p>Jujubes fruitcake tiramisu liquorice chocolate cake. Carrot cake faworki donut soufflé oat cake tootsie roll. Fruitcake fruitcake cake sweet pie jelly beans. Chocolate cake candy jujubes oat cake toffee croissant muffin.</p>
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <p>Chocolate bar tiramisu marzipan. Croissant soufflé croissant lollipop liquorice dragée chupa chups carrot cake. Liquorice lollipop halvah toffee lollipop.</p>
+
−
          </div>
+
−
        </div>
+
 
       </div>
 
       </div>
  
Line 586: Line 1,503:
 
<!-- HERE IS END OF BOOK WRAPPER -->
 
<!-- HERE IS END OF BOOK WRAPPER -->
  
−
  <div id="flip-nav">
 
−
    <nav id="left-pages">
 
−
      <a id="bb-nav-prev" href="#" class="button is-primary"><i class="fa fa-angle-left fa-2x"></i></a>
 
−
      <a id="bb-nav-first" href="#" class="button is-primary"><i class="fa fa-angle-double-left fa-2x"></i></a>
 
−
    </nav>
 
−
 
−
 
−
    <nav id="right-pages">
 
−
      <a id="bb-nav-next" href="#" class="button is-primary"><i class="fa fa-angle-right fa-2x"></i></a>
 
−
      <a id="bb-nav-last" class="button is-primary"><i class="fa fa-angle-double-right fa-2x"></i></a>
 
−
    </nav>
 
−
  </div>
 
  
  
 +
<div class="footer"></div>
  
  
Line 615: Line 1,521:
  
  
 +
  <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");
 +
            }
  
−
<script>
+
            config.$bookBlock.bookblock({
−
    var Page = (function() {
+
              speed: 1000,
 +
              shadowSides: 0.8,
 +
              shadowFlip: 0.4
 +
            });
 +
            initEvents();
 +
          },
 +
          initEvents = function() {
  
−
      var config = {
+
            var $slides = config.$bookBlock.children();
−
          $bookBlock: $('#bb-bookblock'),
+
−
          $navNext: $('#bb-nav-next'),
+
−
          $navPrev: $('#bb-nav-prev'),
+
−
          $navFirst: $('#bb-nav-first'),
+
−
          $navLast: $('#bb-nav-last')
+
−
        },
+
−
        init = function() {
+
−
          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;
 +
            });
  
−
          // add navigation events
+
            config.$navPrev.on('click touchstart', function() {
−
          config.$navNext.on('click touchstart', function() {
+
              config.$bookBlock.bookblock('prev');
−
            config.$bookBlock.bookblock('next');
+
              return false;
−
            return false;
+
            });
−
          });
+
  
−
          config.$navPrev.on('click touchstart', function() {
+
            config.$navFirst.on('click touchstart', function() {
−
            config.$bookBlock.bookblock('prev');
+
              config.$bookBlock.bookblock('first');
−
            return false;
+
              return false;
−
          });
+
            });
  
−
          config.$navFirst.on('click touchstart', function() {
+
            config.$navLast.on('click touchstart', function() {
−
            config.$bookBlock.bookblock('first');
+
              config.$bookBlock.bookblock('last');
−
            return false;
+
              return false;
−
          });
+
            });
  
−
          config.$navLast.on('click touchstart', function() {
+
            // add swipe events
−
            config.$bookBlock.bookblock('last');
+
            $slides.on({
−
            return false;
+
              'swipeleft': function(event) {
−
          });
+
                config.$bookBlock.bookblock('next');
 +
                return false;
 +
              },
 +
              'swiperight': function(event) {
 +
                config.$bookBlock.bookblock('prev');
 +
                return false;
 +
              }
 +
            });
  
−
          // add swipe events
+
            // add keyboard events
−
          $slides.on({
+
            $(document).keydown(function(e) {
−
            'swipeleft': function(event) {
+
               var keyCode = e.keyCode || e.which,
−
               config.$bookBlock.bookblock('next');
+
                arrow = {
−
              return false;
+
                  left: 37,
−
            },
+
                  up: 38,
−
            'swiperight': function(event) {
+
                  right: 39,
−
              config.$bookBlock.bookblock('prev');
+
                  down: 40
−
              return false;
+
                };
−
            }
+
−
          });
+
  
−
          // add keyboard events
+
              switch (keyCode) {
−
          $(document).keydown(function(e) {
+
                case arrow.left:
−
            var keyCode = e.keyCode || e.which,
+
                  config.$bookBlock.bookblock('prev');
−
              arrow = {
+
                  break;
−
                left: 37,
+
                 case arrow.right:
−
                up: 38,
+
                  config.$bookBlock.bookblock('next');
−
                 right: 39,
+
                  break;
−
                down: 40
+
               }
−
               };
+
            });
 +
          };
  
−
            switch (keyCode) {
+
        return {
−
              case arrow.left:
+
          init: init
−
                config.$bookBlock.bookblock('prev');
+
−
                break;
+
−
              case arrow.right:
+
−
                config.$bookBlock.bookblock('next');
+
−
                break;
+
−
            }
+
−
          });
+
 
         };
 
         };
  
−
      return {
+
       })();
−
        init: init
+
       Page.init();
−
       };
+
     });
−
        
+
−
     })();
+
 
      
 
      
 
   </script>
 
   </script>
 +
 +
 
<script>
 
<script>
−
Page.init();
+
$(document).ready(function() {
 +
document.getElementById("content").style.background = "#93D1D5";
 +
});
 +
 
 
</script>
 
</script>
  

Latest revision as of 13:52, 16 December 2020