Team:Hong Kong-CUHK/team.html

From 2014.igem.org

(Difference between revisions)

Revision as of 02:00, 17 October 2014

board {

   background-image: url('images/board.png');
   background-size: 100% 100%;
   width: 700px;
   height: 700px;

} .chess {

   background-size: 100% 100%;
   width: 40px;
   height: 40px;
   position: absolute;
   cursor: pointer;

} .profile-pic {

   background-size: 100% 100%;
   width: 100px;
   height: 100px;
   position: absolute;
   cursor: pointer;

} .profile-dialog {

   width: 300px;
   height: 300px;
   position: absolute;
   display: none;

} .member-wrapper:hover > .profile-dialog {

   display: block;

} .photo {

   width: 83px;
   height: 250px;
   background-position: center;
   background-size: auto 100%;
   background-repeat: no-repeat;
   -webkit-filter: grayscale(80%);
   margin: 0;

} .photo:hover {

   -webkit-filter: grayscale(0%);

} .photo.show {

   width: 250px;
   height: 250px;
   -webkit-filter: grayscale(0%);

} .member-name {

   text-transform: uppercase;
   margin: 0;

} .member-role {

   font-style: italic;

} .member-about {

   text-align: justify;
   text-justify: distribute;

} </style>

     <img src=""	 alt="Team Photo">

Our Team Photo

     <img src="" alt="...">

2

234

     <img src="" alt="...">

3

3456789

 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
   <img src="" style="
   position: inherit;    
   display: inline-block;    
   top: 50%;    
   width: auto;    height:1em;    
   margin-left: 0;
   background:transparent;">
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

<img src="" style="

   position: inherit;    
   display: inline-block;    
   top: 50%;    
   width: auto;    height:1em;    
   margin-left: 0;
   background:transparent;

">

 </a>

   members: [{
       info: {
           name: "Lily",
           about: "Hi! I'm Lily majoring in Computer Science. It is lucky that I have a chance to work as a team in iGEM. I enjoy creating new things with knowledge. That's why I love computer-related work as well as synthetic biology in the same time. Hope you like the wiki.",
           chessColor: "red",
       },
       offset: {
           top: 104,
           left: 333
       },
       profilePic: {
           background: "0px 0px/100% 100% url('http://placehold.it/300x300')",
           offset: {
               top: 0,
               left: -100
           }
       },
       dialog: {
           background: "#ff0000",
           offset: {
               top: 0,
               left: 100
           }
       }
   }]

};

$(document).ready(function() { $(function(){ $('.carousel').carousel({

     interval: 3000
   });

});

   $.each(content.members, function(index, value) {

var wrapper = $('

')

           .addClass('member-wrapper')
           .css('position', 'relative')
           .offset(value.offset);

var dialog = $('

')

           .addClass('profile-dialog')
           .css('font-size', '18')
           .css('background', value.dialog.background)
           .text(value.info.about)
           .offset(value.dialog.offset);

var profile_pic = $('

')

           .addClass('profile-pic')
           .data("index", index)
           .css('background', value.profilePic.background)
           .offset(value.profilePic.offset);

var chess = $('

')

           .addClass('chess')
           .data("index", index)
           .css('background-image', 'url(images/chess/chess_' + value.info.chessColor + '.png)');

       wrapper.append(chess);
       wrapper.append(profile_pic);
       wrapper.append(dialog);
       $("#board").append(wrapper);
   });

}); </script>

@@ Line 58: / Line 58: @@
 }
 </style>
+<center>
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
@@ Line 70: / Line 70: @@
    <div class="carousel-inner">
      <div class="item active">
-       <img src="..." alt="...">
+       <img src="https://static.igem.org/mediawiki/2014/thumb/a/ad/CUHKTEAM1.JPG/800px-CUHKTEAM1.JPG"	 alt="Team Photo">
        <div class="carousel-caption">
-         <h3>1</h3>
+         <h3>Our Team Photo</h3>
-		<p>123</p>
        </div>
      </div>
      <div class="item">
-       <img src="..." alt="...">
+       <img src="https://static.igem.org/mediawiki/2014/thumb/a/ad/CUHKTEAM1.JPG/800px-CUHKTEAM1.JPG" alt="...">
        <div class="carousel-caption">
          <h3>2</h3>
@@ Line 84: / Line 83: @@
      </div>
 	<div class="item">
-       <img src="..." alt="...">
+       <img src="https://static.igem.org/mediawiki/2014/thumb/a/ad/CUHKTEAM1.JPG/800px-CUHKTEAM1.JPG" alt="...">
        <div class="carousel-caption">
          <h3>3</h3>
-		<p>345</p>
+		<p>3456789</p>
        </div>
      </div>
@@ Line 94: / Line 93: @@
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
-     <span class="glyphicon glyphicon-chevron-left"></span>
+     <img src="https://static.igem.org/mediawiki/2014/a/ab/Cuhkleft.png" style="
+    position: inherit;
+    display: inline-block;
+    top: 50%;
+    width: auto;    height:1em;
+    margin-left: 0;
+    background:transparent;">
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
-    <span class="glyphicon glyphicon-chevron-right"></span>
+	<img src="https://static.igem.org/mediawiki/2014/b/bc/Cuhkright.png" style="
+    position: inherit;
+    display: inline-block;
+    top: 50%;
+    width: auto;    height:1em;
+    margin-left: 0;
+    background:transparent;
+">
    </a>
 </div>
+</center>
 <div class="row">
      <div id="board" class="center-block">
@@ Line 138: / Line 150: @@
 $(document).ready(function() {
+	$(function(){
+	$('.carousel').carousel({
+      interval: 3000
+    });
+	});
      $.each(content.members, function(index, value) {
          var wrapper = $('<div></div>')