Difference between revisions of "Team:Hong Kong UCCKE/Notebook"

Line 1: Line 1:
 
{{Hong_Kong_UCCKE/CSS/reset.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.css}} {{Hong_Kong_UCCKE/CSS/style.css}} {{Hong_Kong_UCCKE/CSS/latofonts.css}} {{Hong_Kong_UCCKE/CSS/font-awesome.css}} {{Hong_Kong_UCCKE/CSS/jcarousel.responsive.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.toc.css}}
 
{{Hong_Kong_UCCKE/CSS/reset.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.css}} {{Hong_Kong_UCCKE/CSS/style.css}} {{Hong_Kong_UCCKE/CSS/latofonts.css}} {{Hong_Kong_UCCKE/CSS/font-awesome.css}} {{Hong_Kong_UCCKE/CSS/jcarousel.responsive.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.toc.css}}
−
{{Hong_Kong_UCCKE/CSS/notebook}}
 
 
<html>
 
<html>
 +
 +
<style>
 +
    h2 {
 +
        padding-top: 50px;
 +
        margin-top: -30px;
 +
    }
 +
</style>
 +
 
<link rel="stylesheet" href="https://2016.igem.org/Team:Leiden/libraries/font-awesome-4-6-3/css/font-awesome-min?action=raw&amp;ctype=text/css" type="text/css" />
 
<link rel="stylesheet" href="https://2016.igem.org/Team:Leiden/libraries/font-awesome-4-6-3/css/font-awesome-min?action=raw&amp;ctype=text/css" type="text/css" />
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<div class="wholehead">
 
<div class="wholehead">
 +
 
</html>
 
</html>
 
{{Hong_Kong_UCCKE/crazyheader}}
 
{{Hong_Kong_UCCKE/crazyheader}}
Line 14: Line 22:
 
             <div class="col-sm-12 page_header-text">
 
             <div class="col-sm-12 page_header-text">
 
                 <div>
 
                 <div>
−
                     <h1 data-toc-skip>UCCKE / Notebook</h1>
+
                     <h1 data-toc-skip>UCCKE / Contact</h1>
 
                     <p>offendit malis arbitror appellat o arbitror nisi nam quamquam illustriora do se appellat praetermissum.</p>
 
                     <p>offendit malis arbitror appellat o arbitror nisi nam quamquam illustriora do se appellat praetermissum.</p>
 
                 </div>
 
                 </div>
Line 28: Line 36:
 
</div>
 
</div>
 
</div>
 
</div>
−
+
   
−
<script src="https://codyhouse.co/demo/horizontal-timeline/js/modernizr.js"></script> <!-- Modernizr -->
+
<div id="normalsec" style="font-size:15px; margin-top: -25px; padding-top: 75px; margin-bottom:50px;">
−
<script src="https://codyhouse.co/demo/horizontal-timeline/js/jquery-2.1.4.js"></script>
+
<div class="container"><div class="row">
−
<script src="https://codyhouse.co/demo/horizontal-timeline/js/jquery.mobile.custom.min.js"></script>
+
<div class="col-xs-3" style="text-align:center;">
−
<script src="https://codyhouse.co/demo/horizontal-timeline/js/main.js"></script>
+
<div style="display: inline-block; position: relative; height: 70px; width: 70px; background-color: #5379d0; color: #fff; font-size: 40px; border-radius: 100%;"><i style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);" class="fa fa-envelope" aria-hidden="true"></i></div><br>
−
<style>
+
<p style="text-align:center; color: #5379d0; margin-bottom: 0;"><b>Email</b></p>
−
.events-content {
+
<p style="text-align:center; margin-bottom: 0;">biore...@gmail.com</p>
−
color:#000 !important;
+
</div>
−
}
+
<div class="col-xs-3" style="text-align:center;">
−
.cd-horizontal-timeline .events-content {
+
<div style="display: inline-block; position: relative; height: 70px; width: 70px; background-color: #5379d0; color: #fff; font-size: 40px; border-radius: 100%;"><i style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);" class="fa fa-phone" aria-hidden="true"></i></div><br>
−
  position: relative;
+
<p style="text-align:center; color: #5379d0; margin-bottom: 0;"><b>Phone</b></p>
−
}
+
<p style="text-align:center; margin-bottom: 0;">+852 2343 6677</p>
−
.cd-horizontal-timeline .events-content li {
+
</div>
−
  position: absolute;
+
<div class="col-xs-3" style="text-align:center;">
−
  z-index: 1;
+
<div style="display: inline-block; position: relative; height: 70px; width: 70px; background-color: #5379d0; color: #fff; font-size: 40px; border-radius: 100%;"><i style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);" class="fa fa-facebook" aria-hidden="true"></i></div><br>
−
  width: 100%;
+
<p style="text-align:center; color: #5379d0; margin-bottom: 0;"><b>Facebook</b></p>
−
  left: 0;
+
<p style="text-align:center; margin-bottom: 0;">biore...@gmail.com</p>
−
  top: 0;
+
</div>
−
  transform: translateX(-100%);
+
<div class="col-xs-3" style="text-align:center;">
−
  opacity: 0;
+
<div style="display: inline-block; position: relative; height: 70px; width: 70px; background-color: #5379d0; color: #fff; font-size: 40px; border-radius: 100%;"><i style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);" class="fa fa-youtube-play" aria-hidden="true"></i></div><br>
−
  animation-duration: 0.4s;
+
<p style="text-align:center; color: #5379d0; margin-bottom: 0;"><b>Youtube</b></p>
−
  animation-timing-function: ease-in-out;
+
<p style="text-align:center; margin-bottom: 0;">biore...@gmail.com</p>
−
}
+
</div>
−
.cd-horizontal-timeline .events-content li.selected {
+
</div></div>
−
  /* visible event content */
+
<div class="container"><div class="row" style="text-align:center;">
−
  position: relative;
+
<h2>Find Us</h2>
−
  z-index: 2;
+
<p style="text-align:center;">United Christian College (Kowloon East), <br>
−
  opacity: 1;
+
2 Lee On Lane, <br>
−
  transform: translateX(0);
+
Kwun Tong, HK</p>
−
}
+
<img src="https://static.igem.org/mediawiki/2016/f/f4/T--Hong_Kong_UCCKE--googlemapimg.png" style="max-width:100%; height: auto;"/>
−
.cd-horizontal-timeline .events-content li.enter-right,
+
</div></div>
−
.cd-horizontal-timeline .events-content li.leave-right {
+
</div>
−
  animation-name: cd-enter-right;
+
−
}
+
−
.cd-horizontal-timeline .events-content li.enter-left,
+
−
.cd-horizontal-timeline .events-content li.leave-left {
+
−
  animation-name: cd-enter-left;
+
−
}
+
−
.cd-horizontal-timeline .events-content li.leave-right,
+
−
.cd-horizontal-timeline .events-content li.leave-left {
+
−
  animation-direction: reverse;
+
−
}
+
−
@keyframes cd-enter-right {
+
−
  0% {
+
−
    opacity: 0;
+
−
    transform: translateX(100%);
+
−
  }
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: translateX(0%);
+
−
  }
+
−
}
+
−
@keyframes cd-enter-left {
+
−
  0% {
+
−
    opacity: 0;
+
−
    transform: translateX(-100%);
+
−
  }
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: translateX(0%);
+
−
  }
+
−
}
+
−
</style>
+
−
 
+
−
<section class="cd-horizontal-timeline">
+
−
<div class="timeline">
+
−
<style>
+
−
.cd-horizontal-timeline .events-wrapper::before {
+
−
background-image: none;
+
−
}
+
−
.cd-horizontal-timeline .events-wrapper::after {
+
−
background-image: none;
+
−
}
+
−
</style>
+
−
<div style="background:none;" class="events-wrapper">
+
−
<div class="events">
+
−
<ol style="list-style:none;">
+
−
<li><a href="#0" data-date="20/04/2016" class="selected">20 Apr</a></li>
+
−
<li><a href="#0" data-date="09/05/2016">9 May</a></li>
+
−
<li><a href="#0" data-date="29/06/2016">29 Jun</a></li>
+
−
<li><a href="#0" data-date="10/08/2016">10 Aug</a></li>
+
−
<li><a href="#0" data-date="11/08/2016">11 Aug</a></li>
+
−
<li><a href="#0" data-date="12/08/2016">12 Aug</a></li>
+
−
<li><a href="#0" data-date="15/08/2016">15 Aug</a></li>
+
−
<li><a href="#0" data-date="19/08/2016">19 Aug</a></li>
+
−
</ol>
+
−
+
−
<span class="filling-line" aria-hidden="true"></span>
+
−
</div> <!-- .events -->
+
−
</div> <!-- .events-wrapper -->
+
−
+
−
<ul class="cd-timeline-navigation" style="list-style:none;">
+
−
<li><a href="#0" class="prev inactive">Prev</a></li>
+
−
<li><a href="#0" class="next">Next</a></li>
+
−
</ul> <!-- .cd-timeline-navigation -->
+
−
</div> <!-- .timeline -->
+
−
+
−
<div class="events-content">
+
−
<ol>
+
−
<li class="selected" data-date="20/04/2016">
+
−
<h2>Meeting with Team: Hong_Kong_HKU</h2>
+
−
<em>20 April 2016</em>
+
−
<p>
+
−
We have met the members from the Hong Kong University iGem team (known as the HKU iGem team), briefly introduce to them our interested area of study and the origin of the idea. By sharing our interested fields, we established a close bond in between. Thanks to the HKU iGem team, we can set our topic with more background knowledges provided.
+
−
</p>
+
−
</li>
+
−
 
+
−
<li data-date="09/05/2016">
+
−
<h2>Finalized area of investigation</h2>
+
−
<em>9 May 2016</em>
+
−
<p>
+
−
We have finalized the area of investigation during our meeting after 3 weeks of researches and discussion subsequent to our meeting with HKU iGem team. We have eventually decided to investigate on C. elegans, a kind of well-studied roundworm which has a short life cycle and is easy to reproduce.
+
−
</p>
+
−
</li>
+
−
 
+
−
<li data-date="29/06/2016">
+
−
<h2>Meeting with Team: Hong_Kong_HKU</h2>
+
−
<em>29 June 2016</em>
+
−
<p>
+
−
We have the second meeting with the HKU iGem team through video conference software to exchange our progress and discussed on the possibility of further development regarding our collaboration bond.
+
−
</p>
+
−
</li>
+
−
 
+
−
<li data-date="10/08/2016">
+
−
<h2>Um...</h2>
+
−
<em>10 August 2016</em>
+
−
<p>
+
−
Supposedly we should meet to kick off our experiments on our project, yet it was cancelled due to the bad weather.  
+
−
</p>
+
−
</li>
+
−
 
+
−
<li data-date="11/08/2016">
+
−
<h2>Experiment preperation</h2>
+
−
<em>11 August 2016</em>
+
−
<p>
+
−
Meeting in the laboratory, we are briefed by our co-workers on the characteristics of C. elegans before doing and hands on experiment in the morning. Meanwhile we started on preparing for the presentation in the Giant Jamboree. We started having practices on the experiment before the real one.
+
−
</p>
+
−
</li>
+
−
 
+
−
<li data-date="12/08/2016">
+
−
<h2>Experiment</h2>
+
−
<em>12 August 2016</em>
+
−
<p>
+
−
Laboratory work continues and the presentation preparation goes quite well. We started our real experiment today and a few chemicals were tested. The results are quite surprising as some of the results are completely different from our expectation. Data is being collected and inputted at the same time.
+
−
</p>
+
−
</li>
+
−
 
+
−
<li data-date="15/08/2016">
+
−
<h2>Experiment</h2>
+
−
<em>15 August 2016</em>
+
−
<p>
+
−
This is the last day we planned to carry out our experiments. The presentation preparation is mostly done and the results of the experiment are all inputted.
+
−
</p>
+
−
</li>
+
−
 
+
−
<li data-date="19/08/2016">
+
−
<h2>Meeting with Team: Hong_Kong_HKU</h2>
+
−
<em>19 August 2016</em>
+
−
<p>
+
−
We had our third meeting with the HKU iGem team to update each other with our progress thus to confirm some details of an extra collaborative activity. Simultaneously we have finished analyzing the data extracted from the experiment carried out previously.  
+
−
</p>
+
−
</li>
+
−
</ol>
+
−
</div> <!-- .events-content -->
+
−
</section>
+
−
 
+
−
 
+
−
<div class="container">
+
−
<section class="main">
+
−
<div class="custom-calendar-wrap">
+
−
<div id="custom-inner" class="custom-inner">
+
−
<div class="custom-header clearfix">
+
−
<nav>
+
−
<span id="custom-prev" class="custom-prev"></span>
+
−
<span id="custom-next" class="custom-next"></span>
+
−
</nav>
+
−
<h2 id="custom-month" class="custom-month"></h2>
+
−
<h3 id="custom-year" class="custom-year"></h3>
+
−
</div>
+
−
<div id="calendar" class="fc-calendar-container"></div>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
</div><!-- /container -->
+
−
+
−
<script type="text/javascript" src="https://2016.igem.org/Template:Hong_Kong_UCCKE/JS/calendario?action=raw"></script>
+
−
<script type="text/javascript" src="https://2016.igem.org/Template:Hong_Kong_UCCKE/JS/calendariodata?action=raw"></script>
+
−
<script type="text/javascript">
+
−
$(function() {
+
−
+
−
var transEndEventNames = {
+
−
'WebkitTransition' : 'webkitTransitionEnd',
+
−
'MozTransition' : 'transitionend',
+
−
'OTransition' : 'oTransitionEnd',
+
−
'msTransition' : 'MSTransitionEnd',
+
−
'transition' : 'transitionend'
+
−
},
+
−
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
+
−
$wrapper = $( '#custom-inner' ),
+
−
$calendar = $( '#calendar' ),
+
−
cal = $calendar.calendario( {
+
−
onDayClick : function( $el, $contentEl, dateProperties ) {
+
−
 
+
−
if( $contentEl.length > 0 ) {
+
−
showEvents( $contentEl, dateProperties );
+
−
}
+
−
 
+
−
},
+
−
caldata : codropsEvents,
+
−
displayWeekAbbr : true
+
−
} ),
+
−
$month = $( '#custom-month' ).html( cal.getMonthName() ),
+
−
$year = $( '#custom-year' ).html( cal.getYear() );
+
−
 
+
−
$( '#custom-next' ).on( 'click', function() {
+
−
cal.gotoNextMonth( updateMonthYear );
+
−
} );
+
−
$( '#custom-prev' ).on( 'click', function() {
+
−
cal.gotoPreviousMonth( updateMonthYear );
+
−
} );
+
−
 
+
−
function updateMonthYear() {
+
−
$month.html( cal.getMonthName() );
+
−
$year.html( cal.getYear() );
+
−
}
+
−
 
+
−
// just an example..
+
−
function showEvents( $contentEl, dateProperties ) {
+
−
 
+
−
hideEvents();
+
−
+
−
var $events = $( '<div id="custom-content-reveal" class="custom-content-reveal"><h4>Events for ' + dateProperties.monthname + ' ' + dateProperties.day + ', ' + dateProperties.year + '</h4></div>' ),
+
−
$close = $( '<span class="custom-content-close"></span>' ).on( 'click', hideEvents );
+
−
 
+
−
$events.append( $contentEl.html() , $close ).insertAfter( $wrapper );
+
−
+
−
setTimeout( function() {
+
−
$events.css( 'top', '0%' );
+
−
}, 25 );
+
−
 
+
−
}
+
−
function hideEvents() {
+
−
 
+
−
var $events = $( '#custom-content-reveal' );
+
−
if( $events.length > 0 ) {
+
−
+
−
$events.css( 'top', '100%' );
+
−
Modernizr.csstransitions ? $events.on( transEndEventName, function() { $( this ).remove(); } ) : $events.remove();
+
−
 
+
−
}
+
  
−
}
 
−
 
−
});
 
−
</script>
 
 
</html>
 
</html>
 
{{Hong_Kong_UCCKE/heyfooter}}
 
{{Hong_Kong_UCCKE/heyfooter}}
 
{{Hong_Kong_UCCKE/illbeback}}
 
{{Hong_Kong_UCCKE/illbeback}}

Revision as of 13:50, 28 September 2016


Email

biore...@gmail.com


Phone

+852 2343 6677


Facebook

biore...@gmail.com


Youtube

biore...@gmail.com

Find Us

United Christian College (Kowloon East),
2 Lee On Lane,
Kwun Tong, HK