Difference between revisions of "Template:KSA KOREA"

(bookshelf code)
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
+
<html lang="en">
<!---------
+
You can place your team's code here.
+
---------->
+
 
<head>
 
<head>
 
<title>KSA Korea Wiki</title>
 
<title>KSA Korea Wiki</title>
</head>
+
<meta charset="utf-8">
 +
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 +
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/Bulma&action=raw&ctype=text/css" />
  
<body>
+
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bbCSS&action=raw&ctype=text/css" />
<div class="wrap">
+
    <ul class="align">
+
      <li>
+
        <figure class='book'>
+
          <!-- Front -->
+
          <ul class='hardcover_front'>
+
            <li>
+
              <img src="images/Covers/1.png" alt="" width="100%" height="100%">
+
            </li>
+
            <li></li>
+
          </ul>
+
          <!-- Pages -->
+
          <ul class='page'>
+
            <li></li>
+
            <li>
+
              <a class="btn" href="#">Description</a>
+
              <a class="btn" href="#">Results</a>
+
              <a class="btn" href="#">Implementation</a>
+
              <a class="btn" href="#">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>
+
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/demo&action=raw&ctype=text/css" />
        <figure class='book'>
+
 
          <!-- Front -->
+
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookCSS&action=raw&ctype=text/css" />
          <ul class='hardcover_front'>
+
 
            <li>
+
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomcss&action=raw&ctype=text/css" />
              <img src="images/Covers/2.png" alt="" width="100%" height="100%">
+
 
            </li>
+
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
            <li></li>
+
 
          </ul>
+
 
          <!-- Pages -->
+
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/modernizr&action=raw&ctype=text/javascript"></script>
          <ul class='page'>
+
 
            <li></li>
+
 
            <li>
+
 
              <a class="btn" href="#">Basic</a>
+
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookBlockjs&action=raw&ctype=text/javascript"></script>
              <a class="btn" href="#">Composite</a>
+
 
              <a class="btn" href="#">Collection</a>
+
 
              <a class="btn" href="#">Contribution</a>
+
 
            </li>
+
 
            <li></li>
+
 
            <li></li>
+
 
            <li></li>
+
 
          </ul>
+
<style>
          <!-- Back -->
+
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
          <ul class='hardcover_back'>
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
            <li></li>
+
body, html {background-color:white; width: 100%; height: 100%;}
            <li></li>
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
          </ul>
+
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
          <ul class='book_spine'>
+
 
            <li></li>
+
 
            <li></li>
+
 
          </ul>
+
 
        </figure>
+
 
      </li>
+
 
      <li>
+
html, body, .footer {
        <figure class='book'>
+
  background-color: #93D1D5;
          <!-- Front -->
+
}
          <ul class='hardcover_front'>
+
 
            <li>
+
.wrap {
              <img src="images/Covers/3.png" alt="" width="100%" height="100%">
+
  /* margin-left: 75px;
            </li>
+
  margin-right: 75px; */
            <li></li>
+
  margin: 0 auto;
          </ul>
+
  width: 90vw;
          <!-- Pages -->
+
}
          <ul class='page'>
+
 
            <li></li>
+
.shelf {
            <li>
+
  width: 100%;
              <a class="btn" href="#">Fluorometer</a>
+
  height: 150px;
              <a class="btn" href="#">Computer Vision</a>
+
  z-index: -1;
              <a class="btn" href="#">Entrepreneurship</a>
+
  background: transparent url(https://static.igem.org/mediawiki/2020/e/ea/T--KSA_KOREA--shelf.png) no-repeat center center;
              <a class="btn" href="#">Modeling</a>
+
  background-size: contain;
            </li>
+
}
            <li></li>
+
 
            <li></li>
+
.align>li {
            <li></li>
+
  width: 100px;
          </ul>
+
}
          <!-- Back -->
+
 
          <ul class='hardcover_back'>
+
.book-wrapper {
            <li></li>
+
  height: 100%;
            <li></li>
+
  width: 90vw;
          </ul>
+
  margin: 0 auto;
          <ul class='book_spine'>
+
}
            <li></li>
+
 
            <li></li>
+
.bb-custom-side>img {
          </ul>
+
  display: flex;
        </figure>
+
  width: 100%;
      </li>
+
  /* height: 100%; */
      <li>
+
  object-fit: contain;
        <figure class='book'>
+
}
          <!-- Front -->
+
 
          <ul class='hardcover_front'>
+
/* .dropdown {
            <li>
+
  z-index: 2000;
              <img src="images/Covers/4.png" alt="" width="100%" height="100%">
+
  position: fixed;
            </li>
+
  bottom: 3%;
            <li></li>
+
  right: 1%;
          </ul>
+
} */
          <!-- Pages -->
+
.navbar.is-fixed-top {
          <ul class='page'>
+
  z-index: 2000;
            <li></li>
+
  width: 90vw;
            <li>
+
  margin: 0 auto;
              <a class="btn" href="#">Software 1</a>
+
}
              <a class="btn" href="#">Software 2</a>
+
 
              <a class="btn" href="#">Software 3</a>
+
/* .navbar.is-dark {
              <a class="btn" href="#">Software 4</a>
+
  background-color: #7FBEBC;
            </li>
+
} */
            <li></li>
+
.coverDesign h1 {
            <li></li>
+
  font-size: 1.3em;
            <li></li>
+
}
          </ul>
+
 
          <!-- Back -->
+
 
          <ul class='hardcover_back'>
+
 
            <li></li>
+
nav#left-pages {
            <li></li>
+
  position: fixed;
          </ul>
+
  left: 1%;
          <ul class='book_spine'>
+
  top: 40%;
            <li></li>
+
  z-index: 9999;
            <li></li>
+
}
          </ul>
+
 
        </figure>
+
nav#right-pages {
      </li>
+
  position: fixed;
      <li>
+
  right: 1%;
        <figure class='book'>
+
  top: 40%;
          <!-- Front -->
+
  z-index: 9999;
          <ul class='hardcover_front'>
+
}
            <li>
+
 
              <img src="images/Covers/5.png" alt="" width="100%" height="100%">
+
nav#left-pages a,
            </li>
+
nav#right-pages a {
            <li></li>
+
  display: block;
          </ul>
+
  margin-top: 2em;
          <!-- Pages -->
+
}
          <ul class='page'>
+
 
            <li></li>
+
/* Video Stuff */
            <li>
+
.hero.is-medium .hero-body {
              <a class="btn" href="#">overview</a>
+
  padding-top: 0;
              <a class="btn" href="#">Identification</a>
+
  padding-left: 0;
              <a class="btn" href="#">Integration</a>
+
  padding-right: 0;
              <a class="btn" href="#">Improvement</a>
+
  padding-bottom: 3rem;
            </li>
+
}
            <li></li>
+
 
            <li></li>
+
.navbar.is-primary,
            <li></li>
+
.button.is-primary {
          </ul>
+
  background-color: #93D1D5;
          <!-- Back -->
+
}
          <ul class='hardcover_back'>
+
</style>
            <li></li>
+
</head>
            <li></li>
+
<body>
          </ul>
+
          <ul class='book_spine'>
+
            <li></li>
+
            <li></li>
+
          </ul>
+
        </figure>
+
      </li>
+
      <li>
+
        <figure class='book'>
+
          <!-- Front -->
+
          <ul class='hardcover_front'>
+
            <li>
+
              <img src="images/Covers/6.png" alt="" width="100%" height="100%">
+
            </li>
+
            <li></li>
+
          </ul>
+
          <!-- Pages -->
+
          <ul class='page'>
+
            <li></li>
+
            <li>
+
              <a class="btn" href="#">Education</a>
+
              <a class="btn" href="#">Collaboration</a>
+
              <a class="btn" href="#">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="images/Covers/7.png" alt="" width="100%" height="100%">
+
            </li>
+
            <li></li>
+
          </ul>
+
          <!-- Pages -->
+
          <ul class='page'>
+
            <li></li>
+
            <li>
+
              <a class="btn" href="#">About Us</a>
+
              <a class="btn" href="#">Members</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="images/Covers/8.png" alt="" width="100%" height="100%">
 
            </li>
 
            <li></li>
 
          </ul>
 
          <!-- Pages -->
 
          <ul class='page'>
 
            <li></li>
 
            <li>
 
              <a class="btn" href="#">Awards</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></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>
 
  
  
 +
</body>
  
  

Latest revision as of 16:44, 27 October 2020

KSA Korea Wiki