Team:BNU-China

From 2014.igem.org

(Difference between revisions)
Line 5: Line 5:
<head>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
-
<title>Zeences Design</title>
+
<script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.prettyPhoto.js?action=raw"></script>
-
<script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.aw-showcase.js?action=raw"></script>
+
<script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.jcarousel.js?action=raw"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.jcarousel.js?action=raw"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.prettyPhoto.js?action=raw"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.prettyPhoto.js?action=raw"></script>
-
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 
<script type="text/javascript">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery(document).ready(function($){
Line 42: Line 40:
</script>
</script>
 +
 +
</head>
</head>
<body>
<body>
<!-- Fullscreen backgrounds -->
<!-- Fullscreen backgrounds -->
<div id="thumbs">
<div id="thumbs">
-
<a href="bg1.jpg">1</a>
+
<a href="style/images/art/bg1.jpg">1</a>
-
<a href="bg2.jpg">2</a>
+
<a href="style/images/art/bg2.jpg">2</a>
-
<a href="bg3.jpg">3</a>
+
<a href="style/images/art/bg3.jpg">3</a>
-
<a href="bg4.jpg">4</a>
+
<a href="style/images/art/bg4.jpg">4</a>
-
<a href="bg5.jpg">5</a>
+
<a href="style/images/art/bg5.jpg">5</a>
-
<a href="bg6.jpg">6</a>
+
<a href="style/images/art/bg6.jpg">6</a>
</div>
</div>
<div id="superbgimage">
<div id="superbgimage">
Line 60: Line 60:
<div id="wrapper">
<div id="wrapper">
   <div id="header">
   <div id="header">
-
     <div class="logo opacity"><a href="index.html"><img src="logo.png" alt="" /></a></div>
+
     <div class="logo opacity"><a href="index.html"><img src="style/images/logo.png" alt="" /></a></div>
     <div align="right"><a href="https://2014.igem.org/Main_Page"><img src="IGEMsmall.png" width="45px" height="40px"></a></div>
     <div align="right"><a href="https://2014.igem.org/Main_Page"><img src="IGEMsmall.png" width="45px" height="40px"></a></div>
   </div>
   </div>
Line 99: Line 99:
     </ul>
     </ul>
       </li>
       </li>
-
    </ul>
 
     <br style="clear: left" />
     <br style="clear: left" />
   </div>
   </div>
Line 112: Line 111:
       <div class="showcase-slide">  
       <div class="showcase-slide">  
         <!-- Put the slide content in a div with the class .showcase-content. -->
         <!-- Put the slide content in a div with the class .showcase-content. -->
-
         <div class="showcase-content"> <img src="s1.jpg" alt="1" /> </div>
+
         <div class="showcase-content"> <img src="style/images/art/s1.jpg" alt="1" /> </div>
       </div>
       </div>
        
        
Line 119: Line 118:
       <div class="showcase-slide">   
       <div class="showcase-slide">   
         <!-- Put the slide content in a div with the class .showcase-content. -->
         <!-- Put the slide content in a div with the class .showcase-content. -->
-
         <div class="showcase-content"> <img src="s2.jpg" alt="2" /> </div>
+
         <div class="showcase-content"> <img src="style/images/art/s2.jpg" alt="2" /> </div>
         <div class="showcase-caption">
         <div class="showcase-caption">
Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.
Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.
Line 126: Line 125:
       <!--2-->
       <!--2-->
       <div class="showcase-slide">  
       <div class="showcase-slide">  
-
         <div class="showcase-content"> <img src="s3.jpg" alt="3" /> </div>
+
         <div class="showcase-content"> <img src="style/images/art/s3.jpg" alt="3" /> </div>
         <div class="showcase-caption">
         <div class="showcase-caption">
Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.
Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.
Line 134: Line 133:
       <div class="showcase-slide">  
       <div class="showcase-slide">  
         <!-- Put the slide content in a div with the class .showcase-content. -->
         <!-- Put the slide content in a div with the class .showcase-content. -->
-
         <div class="showcase-content"> <img src="s4.jpg" alt="4" /> </div>
+
         <div class="showcase-content"> <img src="style/images/art/s4.jpg" alt="4" /> </div>
       </div>
       </div>
       <!--4-->
       <!--4-->
       <div class="showcase-slide">  
       <div class="showcase-slide">  
         <!-- Put the slide content in a div with the class .showcase-content. -->
         <!-- Put the slide content in a div with the class .showcase-content. -->
-
         <div class="showcase-content"> <img src="s4.jpg" alt="4" /> </div>
+
         <div class="showcase-content"> <img src="style/images/art/s4.jpg" alt="4" /> </div>
         <div class="showcase-caption">
         <div class="showcase-caption">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Line 174: Line 173:
     <!-- Begin 4 Columns -->
     <!-- Begin 4 Columns -->
      
      
-
     <div class="one-fourth"> <img src="icon1.png" alt="" class="center" /><br />
+
     <div class="one-fourth"> <img src="style/images/icon1.png" alt="" class="center" /><br />
       <h4 class="center">Web Design</h4>
       <h4 class="center">Web Design</h4>
       <p class="center">Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.</p>
       <p class="center">Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.</p>
     </div>
     </div>
-
     <div class="one-fourth"> <img src="icon2.png" alt="" class="center" /><br />
+
     <div class="one-fourth"> <img src="style/images/icon2.png" alt="" class="center" /><br />
       <h4 class="center">Photography</h4>
       <h4 class="center">Photography</h4>
       <p class="center">Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.</p>
       <p class="center">Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.</p>
     </div>
     </div>
-
     <div class="one-fourth"> <img src="icon3.png" alt="" class="center" /><br />
+
     <div class="one-fourth"> <img src="style/images/icon3.png" alt="" class="center" /><br />
       <h4 class="center">Motion Graphic</h4>
       <h4 class="center">Motion Graphic</h4>
       <p class="center">Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.</p>
       <p class="center">Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.</p>
     </div>
     </div>
-
     <div class="one-fourth last"> <img src="icon4.png" alt="" class="center" /><br />
+
     <div class="one-fourth last"> <img src="style/images/icon4.png" alt="" class="center" /><br />
       <h4 class="center">Optimization</h4>
       <h4 class="center">Optimization</h4>
       <p class="center">Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.</p>
       <p class="center">Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.</p>
Line 199: Line 198:
       <div id="carousel-scroll"><a href="#" id="prev">Prev</a><a href="#" id="next">Next</a></div>
       <div id="carousel-scroll"><a href="#" id="prev">Prev</a><a href="#" id="next">Next</a></div>
       <ul>
       <ul>
-
         <li> <a href="#"> <span>describe</span><img src="c1.jpg" alt="" /> </a> </li>
+
         <li> <a href="#"> <span>describe</span><img src="style/images/art/c1.jpg" alt="" /> </a> </li>
-
         <li> <a href="#"> <span>describe</span><img src="c2.jpg" alt="" /> </a> </li>
+
         <li> <a href="#"> <span>describe</span><img src="style/images/art/c2.jpg" alt="" /> </a> </li>
-
         <li> <a href="#"> <span>describe</span><img src="c3.jpg" alt="" /> </a> </li>
+
         <li> <a href="#"> <span>describe</span><img src="style/images/art/c3.jpg" alt="" /> </a> </li>
-
         <li> <a href="#"> <span>describe</span><img src="c4.jpg" alt="" /> </a> </li>
+
         <li> <a href="#"> <span>describe</span><img src="style/images/art/c4.jpg" alt="" /> </a> </li>
-
         <li> <a href="#"> <span>describe</span><img src="c5.jpg" alt="" /> </a> </li>
+
         <li> <a href="#"> <span>describe</span><img src="style/images/art/c5.jpg" alt="" /> </a> </li>
-
         <li> <a href="#"> <span>describe</span><img src="c6.jpg" alt="" /> </a> </li>
+
         <li> <a href="#"> <span>describe</span><img src="style/images/art/c6.jpg" alt="" /> </a> </li>
       </ul>
       </ul>
     </div>
     </div>
Line 211: Line 210:
     <div id="footer">
     <div id="footer">
       <div class="footer-top"></div>
       <div class="footer-top"></div>
-
      <div class="clear"></div>
+
      <div class="clear"></div>
         <!--sponsor-->
         <!--sponsor-->
-
      <div class="two-third">
+
        <div class="two-third">
         <h3>Our Sponsors</h3>
         <h3>Our Sponsors</h3>
         <ul class="flickr">
         <ul class="flickr">
-
           <li><a href="#"><img src="f1.jpg" alt="" /></a></li>
+
           <li><a href="#"><img src="style/images/art/f1.jpg" alt="" /></a></li>
-
           <li><a href="#"><img src="f2.jpg" alt="" /></a></li>
+
           <li><a href="#"><img src="style/images/art/f2.jpg" alt="" /></a></li>
-
           <li><a href="#"><img src="f3.jpg" alt="" /></a></li>
+
           <li><a href="#"><img src="style/images/art/f3.jpg" alt="" /></a></li>
-
           <li><a href="#"><img src="f4.jpg" alt="" /></a></li>
+
           <li><a href="#"><img src="style/images/art/f4.jpg" alt="" /></a></li>
-
           <li><a href="#"><img src="f5.jpg" alt="" /></a></li>
+
           <li><a href="#"><img src="style/images/art/f5.jpg" alt="" /></a></li>
-
           <li><a href="#"><img src="f6.jpg" alt="" /></a></li>
+
           <li><a href="#"><img src="style/images/art/f6.jpg" alt="" /></a></li>
-
           <li><a href="#"><img src="f7.jpg" alt="" /></a></li>
+
           <li><a href="#"><img src="style/images/art/f7.jpg" alt="" /></a></li>
-
           <li><a href="#"><img src="f8.jpg" alt="" /></a></li>
+
           <li><a href="#"><img src="style/images/art/f8.jpg" alt="" /></a></li>
-
           <li><a href="#"><img src="f9.jpg" alt="" /></a></li>
+
           <li><a href="#"><img src="style/images/art/f9.jpg" alt="" /></a></li>
         </ul>
         </ul>
       </div>
       </div>
       </div>
       </div>
       <div class="clear"></div>
       <div class="clear"></div>
 +
    </div>
   </div>
   </div>
   <!-- End Container -->
   <!-- End Container -->
Line 237: Line 237:
</div>
</div>
<!-- End Wrapper -->  
<!-- End Wrapper -->  
 +
<script type="text/javascript">
<script type="text/javascript">
 +
/*-----------------------------------------------------------------------------------*/
 +
/* BACKGROUND IMAGE
 +
/*-----------------------------------------------------------------------------------*/
 +
$(function() {
$(function() {
 +
 +
// Options for SuperBGImage
$.fn.superbgimage.options = {
$.fn.superbgimage.options = {
-
randomtransition: 2,
+
randomtransition: 2, // 0-none, 1-use random transition (0-7)
-
z_index: -1,  
+
z_index: -1, // z-index for the container
-
slideshow: 1,  
+
slideshow: 1, // 0-none, 1-autostart slideshow
-
slide_interval: 4000,
+
slide_interval: 4000, // interval for the slideshow
-
randomimage: 1,  
+
randomimage: 1, // 0-none, 1-random image
-
speed: 'slow'  
+
speed: 'slow' // animation speed
};
};
 +
 +
// initialize SuperBGImage
$('#thumbs').superbgimage().hide();
$('#thumbs').superbgimage().hide();
 +
});
});
 +
/*-----------------------------------------------------------------------------------*/
 +
/* MENU
 +
/*-----------------------------------------------------------------------------------*/
 +
ddsmoothmenu.init({
ddsmoothmenu.init({
mainmenuid: "menu",
mainmenuid: "menu",
Line 255: Line 269:
contentsource: "markup"
contentsource: "markup"
})
})
 +
 +
 +
/*-----------------------------------------------------------------------------------*/
 +
/* IMAGE HOVER
 +
/*-----------------------------------------------------------------------------------*/
$(function() {
$(function() {
$('.flickr img, .blog a img, #.container a img, .content a img').css("opacity","1.0");
$('.flickr img, .blog a img, #.container a img, .content a img').css("opacity","1.0");
Line 263: Line 282:
});
});
});
});
 +
 +
 +
/*-----------------------------------------------------------------------------------*/
 +
/* OPACITY
 +
/*-----------------------------------------------------------------------------------*/
 +
$('.opacity').transify({opacityOrig:.90, percentHeight:'100%'});
$('.opacity').transify({opacityOrig:.90, percentHeight:'100%'});
 +
 +
/*-----------------------------------------------------------------------------------*/
 +
/* PRETTYPHOTO
 +
/*-----------------------------------------------------------------------------------*/
 +
$(document).ready(function(){
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({autoplay_slideshow: false, overlay_gallery: false, social_tools:false, deeplinking: false, theme:'pp_default', slideshow:5000});
$("a[rel^='prettyPhoto']").prettyPhoto({autoplay_slideshow: false, overlay_gallery: false, social_tools:false, deeplinking: false, theme:'pp_default', slideshow:5000});
});
});
 +
 +
/*-----------------------------------------------------------------------------------*/
 +
/* TOGGLE
 +
/*-----------------------------------------------------------------------------------*/
$(document).ready(function(){
$(document).ready(function(){
 +
//Hide the tooglebox when page load
$(".togglebox").hide();
$(".togglebox").hide();
 +
//slide up and down when click over heading 2
$("h2").click(function(){
$("h2").click(function(){
 +
// slide toggle effect set to slow you can set it to fast too.
$(this).toggleClass("active").next(".togglebox").slideToggle("slow");
$(this).toggleClass("active").next(".togglebox").slideToggle("slow");
return true;
return true;
});
});
});
});
 +
 +
/*-----------------------------------------------------------------------------------*/
 +
/* TABS
 +
/*-----------------------------------------------------------------------------------*/
$(document).ready(function() {
$(document).ready(function() {
-
$(".tab_content").hide();  
+
//Default Action
-
$("ul.tabs li:first").addClass("active").show();  
+
$(".tab_content").hide(); //Hide all content
-
$(".tab_content:first").show();  
+
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
 +
$(".tab_content:first").show(); //Show first tab content
 +
 +
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").click(function() {
-
$("ul.tabs li").removeClass("active");
+
$("ul.tabs li").removeClass("active"); //Remove any "active" class
-
$(this).addClass("active");  
+
$(this).addClass("active"); //Add "active" class to selected tab
-
$(".tab_content").hide();  
+
$(".tab_content").hide(); //Hide all tab content
-
var activeTab = $(this).find("a").attr("href");  
+
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
-
$(activeTab).fadeIn();  
+
$(activeTab).fadeIn(); //Fade in the active content
return false;
return false;
});
});
 +
});
});
 +
 +
/*-----------------------------------------------------------------------------------*/
 +
/* IMAGE HOVER
 +
/*-----------------------------------------------------------------------------------*/
  $(document).ready(function() {
  $(document).ready(function() {
         $('.box, .carousel ul li').mouseenter(function(e) {
         $('.box, .carousel ul li').mouseenter(function(e) {
 +
             $(this).children('a').children('span').fadeIn(200);
             $(this).children('a').children('span').fadeIn(200);
         }).mouseleave(function(e) {
         }).mouseleave(function(e) {
 +
             $(this).children('a').children('span').fadeOut(200);
             $(this).children('a').children('span').fadeOut(200);
         });
         });

Revision as of 10:42, 16 July 2014

1 2 3 4 5 6
1
2
Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.
3
Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.
4
4
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Aenean fringilla aliquam est, a porttitor arcu euismod et. Maecenas rutrum erat at arcu porta interdum. Cras convallis ligula ac risus imperdiet placerat.

What We Do

Vivamus sodales pharetra libero, a tincidunt nisi condimentum a. Quisque non sodales nislero. Integer a tellus eget arcu fringilla molestie quis vel eros. Praesent fermentum vulputate purusa ornare. Vivamus imperdiet, quam et adipiscing placerat, nibh odio scelerisque risus, vitaere accumsan mi justo et quam. Pellentesque quis felis quis tortor porttitor lobortis nec ac risus.

  • Vivamus at magna non ipsum.
  • Etiam pharetra pretium eros.
  • Curabitur porttitor ipsum nec magna.
  • Maecenas cursus arcu a nulla tristique.




Web Design

Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.


Photography

Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.


Motion Graphic

Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.


Optimization

Vivamus soder pharetra libero atincidunt, nisi condimentum Quisque non sodales nislero.

Latest Works

Retrieved from "http://2014.igem.org/Team:BNU-China"