Difference between revisions of "Team:CSMU NCHU Taiwan/Engagement"

Line 1: Line 1:
 
{{CSMU_NCHU_Taiwan}}
 
{{CSMU_NCHU_Taiwan}}
−
 
+
{{:Team:CSMU_NCHU_Taiwan/Templates/Header}}
 
<html>
 
<html>
−
 
+
<!--
 
<div class="clear"></div>
 
<div class="clear"></div>
  
Line 35: Line 35:
  
 
<div class="clear"></div>
 
<div class="clear"></div>
 +
-->
 +
  <head>
 +
    <meta charset="UTF-8">
 +
    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 +
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 +
    <title>Inter Lab</title>
 +
  </head>
 +
 +
<style type="text/css">
 +
 +
* {
 +
  margin: 0;
 +
  padding: 0;
 +
  box-sizing: border-box; }
 +
 +
body {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  font-family: 'Ubuntu' !important; }
 +
 +
.pdfbtn {
 +
  width: 100%;
 +
  margin: 20px 0 10px 0;
 +
  padding: 10px 20px;
 +
  border-radius: 5px;
 +
  background-color: #556b7e;
 +
  color: white;
 +
  display: block;
 +
  position: relative; }
 +
  .pdfbtn i {
 +
    position: absolute;
 +
    right: 50px;
 +
    top: 50%;
 +
    transform: translateY(-50%); }
 +
 +
.brown-btn {
 +
  background-color: #603813; }
 +
 +
.hp-title {
 +
  position: relative;
 +
  top: 20px;
 +
  text-align: center;
 +
  font-size: 60px;
 +
  font-weight: 700;
 +
  font-family: 'Arizonia' !important;
 +
  margin-bottom: 1rem; }
 +
 +
.hp-bg-container {
 +
  overflow: hidden;
 +
  position: relative;
 +
  max-height: 200vh;
 +
  background-color: #fdf8e3; }
 +
  .hp-bg-container > img {
 +
    width: 100%;
 +
    margin-top: -45px; }
 +
 +
.hp-main-container {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 50px 7%;
 +
  min-height: 200vh;
 +
  overflow: hidden; }
 +
 +
.hp-main-content {
 +
  background-color: white;
 +
  width: 80%;
 +
  margin-left: 10%;
 +
  padding: 50px;
 +
  margin-top: 750px;
 +
  min-height: 300vh;
 +
  z-index: 10; }
 +
 +
.img-container {
 +
  width: 100%;
 +
  text-align: center;
 +
  display: none; }
 +
  .img-container img {
 +
    width: 100%; }
 +
 +
.pdf-container {
 +
  width: 100%;
 +
  text-align: center;
 +
  height: 90vh;
 +
  display: none; }
 +
 +
.top {
 +
  position: fixed;
 +
  right: 50px;
 +
  bottom: 50px;
 +
  height: 50px;
 +
  width: 50px;
 +
  cursor: pointer; }
 +
  .top img {
 +
    width: 100%; }
 +
 +
#HQ_page .text-area p {
 +
  font-size: 22px;
 +
  font-family: 'Ubuntu';
 +
  font-weight: 500; }
 +
 +
.my-main-container {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 50px 7%;
 +
  min-height: 200vh;
 +
  overflow: hidden; }
 +
 +
.main-content {
 +
  background-color: white;
 +
  width: 80%;
 +
  margin-left: 10%;
 +
  padding: 50px;
 +
  min-height: 180vh;
 +
  z-index: 10; }
 +
 +
.text-area {
 +
  margin-bottom: 80px; }
 +
  .text-area h1 {
 +
    font-size: 60px;
 +
    font-weight: 700;
 +
    font-family: 'Arizonia' !important;
 +
    text-align: center;
 +
    margin-bottom: 1rem; }
 +
  .text-area p {
 +
    font-size: 22px;
 +
    font-weight: 500; }
 +
 +
</style>
 +
  <body>
 +
    <div class="hp-bg-container">
 +
      <img src="https://static.igem.org/mediawiki/2017/b/b1/T--CSMU_NCHU_Taiwan--public.png">
 +
      <div class="hp-main-container">
 +
        <h1 class="hp-title">-Public Engagement &amp;Education-</h1>
 +
        <div class="hp-main-content">
 +
          <div class="text-area">
 +
            <img class="center" src="https://static.igem.org/mediawiki/2017/3/38/T--CSMU_NCHU_Taiwan--intro.png" alt="" style="width: 30%; margin-bottom: 20px;">
 +
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi optio aliquid distinctio ex. Quae, provident, iure. Officia, quidem quos nam esse sequi nisi ab ullam deleniti. Fugit ut iste, aperiam quam repudiandae sit quo, nihil officiis illo nemo, temporibus, aspernatur porro cupiditate numquam magnam fuga voluptas ipsam voluptatibus facere pariatur?</p>
 +
 +
          </div>
 +
          <div class="pdf-area">
 +
            <span class="pdfbtn brown-btn" id="public-btn-1">Youth Education<i class="fa fa-caret-down" aria-hidden="true"></i></span>
 +
            <div class="img-container" id="public-1">
 +
              <img src="https://static.igem.org/mediawiki/2017/2/21/T--CSMU_NCHU_Taiwan--public01.png" alt="">
 +
            </div>
 +
            <span class="pdfbtn brown-btn" id="public-btn-2">Syntetic Biology Workshop<i class="fa fa-caret-down" aria-hidden="true"></i></span>
 +
            <div class="img-container" id="public-2">
 +
              <img src="https://static.igem.org/mediawiki/2017/5/5b/T--CSMU_NCHU_Taiwan--public02.png" alt="">
 +
            </div>
 +
            <span class="pdfbtn brown-btn" id="public-btn-3">Street Interview<i class="fa fa-caret-down" aria-hidden="true"></i></span>
 +
            <div class="img-container" id="public-3">
 +
              <img src="https://static.igem.org/mediawiki/2017/b/b5/T--CSMU_NCHU_Taiwan--public03.png" alt="">
 +
            </div>
 +
            <span class="pdfbtn brown-btn" id="public-btn-4">Booth<i class="fa fa-caret-down" aria-hidden="true"></i></span>
 +
            <div class="img-container" id="public-4">
 +
              <img src="https://static.igem.org/mediawiki/2017/0/0c/T--CSMU_NCHU_Taiwan--public04.png" alt="">
 +
            </div>
 +
            <span class="pdfbtn brown-btn" id="public-btn-5">Card Game<i class="fa fa-caret-down" aria-hidden="true"></i></span>
 +
            <div class="img-container" id="public-5">
 +
              <img src="https://static.igem.org/mediawiki/2017/0/00/T--CSMU_NCHU_Taiwan--public05.png" alt="">
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="top">
 +
      <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
 +
    </div>
 +
 +
 +
  </body>
 +
  <script type="text/javascript">
 +
$(document).ready(function(){
 +
 +
      for( var i = 1; i < 6; i++){
 +
        $('#public-btn-' + i).click( toggleContainer(i) );
 +
      }
 +
 +
      $('.top').on('click', function(){
 +
      $('html, body').animate({scrollTop: '0px'}, 500);
 +
    });
 +
 +
});
 +
 +
function toggleContainer(i){
 +
  return function(){
 +
      if($('#public-'+i).is(":visible")){
 +
        $('#public-'+i).slideToggle(500);
 +
      }
 +
      else{
 +
        $('.img-container:visible').slideToggle(500);
 +
        $('#public-'+i).slideToggle(500);
 +
      }
 +
      $('.hp-bg-container').css('max-height','none')
 +
      $('.main-content').css('min-height','200vh')
 +
  }
 +
}
 +
 +
</script>
 
</html>
 
</html>

Revision as of 10:11, 24 October 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

HOME
Inter Lab

-Public Engagement &Education-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi optio aliquid distinctio ex. Quae, provident, iure. Officia, quidem quos nam esse sequi nisi ab ullam deleniti. Fugit ut iste, aperiam quam repudiandae sit quo, nihil officiis illo nemo, temporibus, aspernatur porro cupiditate numquam magnam fuga voluptas ipsam voluptatibus facere pariatur?

Youth Education
Syntetic Biology Workshop
Street Interview
Booth
Card Game