Difference between revisions of "Team:SVCE Chennai/Practices"

 
(11 intermediate revisions by the same user not shown)
Line 22: Line 22:
 
<span class="icon-bar"></span>
 
<span class="icon-bar"></span>
 
</button>
 
</button>
−
<a class="navbar-brand" href="#" style="padding-top:0px;"><img src="https://static.igem.org/mediawiki/2015/2/25/MainLogo_Title.png" class="teamLogo"></a>
+
<a class="navbar-brand" href="https://2015.igem.org/Team:SVCE_Chennai" style="padding-top:0px;"><img src="https://static.igem.org/mediawiki/2015/2/25/MainLogo_Title.png" class="teamLogo" style="    padding-left: 15px;"></a>
 
</div>
 
</div>
 
 
Line 28: Line 28:
 
<div class="collapse navbar-collapse js-navbar-collapse">
 
<div class="collapse navbar-collapse js-navbar-collapse">
 
<ul id="sdt_menu" class="sdt_menu">
 
<ul id="sdt_menu" class="sdt_menu">
 +
            <li>
 +
<a href="https://2015.igem.org/Team:SVCE_Chennai/Results">
 +
<img src="https://static.igem.org/mediawiki/2015/b/b9/MenuImgs_results.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Results</span>
 +
<span class="sdt_descr">Data and Chart</span>
 +
</span>
 +
</a>
 +
                           
 +
</li>
 
<li>
 
<li>
 
<a href="https://2015.igem.org/Team:SVCE_Chennai/Gallery">
 
<a href="https://2015.igem.org/Team:SVCE_Chennai/Gallery">
Line 51: Line 62:
 
                     <div class="sdt_box">
 
                     <div class="sdt_box">
 
<a href="https://2015.igem.org/Team:SVCE_Chennai/Practices">Human Practices</a>
 
<a href="https://2015.igem.org/Team:SVCE_Chennai/Practices">Human Practices</a>
−
<a href="https://2015.igem.org/Team:SVCE_Chennai/Collab">Collaboration</a>
+
<a href="https://2015.igem.org/Team:SVCE_Chennai/Collaboration">Collaboration</a>
 +
                        <a href="https://2015.igem.org/Team:SVCE_Chennai/Entrepreneurship">Entrepreneurship</a>
 
</div>
 
</div>
 
</li>
 
</li>
Line 114: Line 126:
 
     <div class="container">
 
     <div class="container">
 
         <h2 class="titleStyle">Human Practices</h2>
 
         <h2 class="titleStyle">Human Practices</h2>
 +
      <a href="https://static.igem.org/mediawiki/2015/0/0e/Human_practices.pdf" target="_blank">Check our PDF Version </a>
 
<div class="row stickyNotification">
 
<div class="row stickyNotification">
−
    <div class="col-sm-3">
+
 
−
            <ul id="nav-tabs-wrapper" class="nav nav-tabs nav-pills nav-stacked well">
+
  <div id="main_area">
−
              <li class="active"><a href="#vtab1" data-toggle="tab">Outlook</a></li>
+
        <!-- Slider -->
−
              <li><a href="#vtab2" data-toggle="tab">Proof of concept</a></li>
+
        <div class="row">
−
              <li><a href="#vtab3" data-toggle="tab">Spark</a></li>
+
            <div class="col-sm-6" id="slider-thumbs">
−
            </ul>
+
                <!-- Bottom switcher of slider -->
−
        </div>
+
                <ul class="hide-bullets">
−
        <div class="col-sm-9">
+
                    <li class="col-sm-3">
−
            <div class="tab-content">
+
                        <a class="thumbnail" id="carousel-selector-0">
−
                <div role="tabpanel" class="tab-pane fade in active" id="vtab1">
+
                            <img src="http://i.imgur.com/wbjU9Gi.jpg">
 +
                        </a>
 +
                    </li>
 +
 
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-1"><img src="http://i.imgur.com/hkyGRUV.jpg"></a>
 +
                    </li>
 +
 
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-2"><img src="http://i.imgur.com/Vyd0o9k.jpg"></a>
 +
                    </li>
 +
 
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-3"><img src="http://i.imgur.com/eov1S5P.jpg"></a>
 +
                    </li>
 +
 
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-4"><img src="http://i.imgur.com/Kq9R0sn.jpg"></a>
 +
                    </li>
 +
 
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-5"><img src="http://i.imgur.com/OBF8a5K.jpg"></a>
 +
                    </li>
 +
           
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-6"><img src="http://i.imgur.com/xPc6h5G.png"></a>
 +
                    </li>
 
                      
 
                      
−
   
+
                    <li class="col-sm-3">
−
    <div id="gal1" style="margin-top:-55px;">
+
                        <a class="thumbnail" id="carousel-selector-7"><img src="http://i.imgur.com/IKWWZbh.png"></a>
−
 
+
                    </li>
−
 
+
           
−
        <img src="http://i.imgur.com/hkyGRUV.jpg"
+
                   
−
        data-fullsrc="http://i.imgur.com/hkyGRUV.jpg"
+
                    <li class="col-sm-3">
−
    />
+
                        <a class="thumbnail" id="carousel-selector-8"><img src="http://i.imgur.com/IWyqpZI.jpg"></a>
−
     
+
                    </li>
−
        <img src="http://i.imgur.com/wbjU9Gi.jpg"
+
           
−
        data-fullsrc="http://i.imgur.com/wbjU9Gi.jpg"
+
                   
−
    />
+
                    <li class="col-sm-3">
−
     
+
                        <a class="thumbnail" id="carousel-selector-9"><img src="http://i.imgur.com/j2bIoPT.jpg"></a>
−
        <img src="http://i.imgur.com/Vyd0o9k.jpg"
+
                    </li>
−
        data-fullsrc="http://i.imgur.com/Vyd0o9k.jpg"
+
           
−
    />
+
                    <li class="col-sm-3">
−
     
+
                        <a class="thumbnail" id="carousel-selector-10"><img src="http://i.imgur.com/gPS7tNF.jpg"></a>
−
        <img src="http://i.imgur.com/eov1S5P.jpg"
+
                    </li>
−
        data-fullsrc="http://i.imgur.com/eov1S5P.jpg"
+
           
−
    />
+
                    <li class="col-sm-3">
−
          <img src="http://i.imgur.com/Kq9R0sn.jpg"
+
                        <a class="thumbnail" id="carousel-selector-11"><img src="http://i.imgur.com/cRyKh8V.jpg"></a>
−
        data-fullsrc="http://i.imgur.com/Kq9R0sn.jpg"
+
                    </li>
−
    />
+
           
−
          <img src="http://i.imgur.com/OBF8a5K.jpg"
+
                    <li class="col-sm-3">
−
        data-fullsrc="http://i.imgur.com/OBF8a5K.jpg"
+
                        <a class="thumbnail" id="carousel-selector-12"><img src="http://i.imgur.com/h9fOPq2.png"></a>
−
    />
+
                    </li>
−
     
+
           
−
    </div>
+
                    <li class="col-sm-3">
−
                </div>
+
                        <a class="thumbnail" id="carousel-selector-13"><img src="http://i.imgur.com/O1jnVqU.jpg"></a>
−
                <div role="tabpanel" class="tab-pane fade" id="vtab2">
+
                    </li>
−
                      <div id="gal2" style="margin-top:-55px;">
+
           
−
         
+
                    <li class="col-sm-3">
−
        <img src="http://i.imgur.com/5owdhzZ.png"
+
                        <a class="thumbnail" id="carousel-selector-14"><img src="http://i.imgur.com/idqccIf.jpg"></a>
−
        data-fullsrc="http://i.imgur.com/5owdhzZ.png"
+
                    </li>
−
    />
+
           
−
              <img src="http://i.imgur.com/1uEVJDG.png"
+
                    <li class="col-sm-3">
−
        data-fullsrc="http://i.imgur.com/1uEVJDG.png"
+
                        <a class="thumbnail" id="carousel-selector-15"><img src="http://i.imgur.com/exbBYSw.jpg"></a>
−
    />
+
                    </li>
−
    </div>
+
           
−
                </div>
+
                   
−
                <div role="tabpanel" class="tab-pane fade in" id="vtab3">
+
           
−
                    <div id="gal3" style="margin-top:-55px;">
+
 
−
              <img src="http://i.imgur.com/JJLF5Q3.jpg"
+
                </ul>
−
        data-fullsrc="http://i.imgur.com/JJLF5Q3.jpg"
+
            </div>
−
    />
+
            <div class="col-sm-6">
−
              <img src="http://i.imgur.com/exbBYSw.jpg"
+
                <div class="col-xs-12" id="slider">
−
        data-fullsrc="http://i.imgur.com/exbBYSw.jpg"
+
                    <!-- Top part of the slider -->
−
    />
+
                    <div class="row">
−
              <img src="http://i.imgur.com/idqccIf.jpg"
+
                        <div class="col-sm-12" id="carousel-bounding-box">
−
        data-fullsrc="http://i.imgur.com/idqccIf.jpg"
+
                            <div class="carousel slide" id="myCarousel">
−
    />
+
                                <!-- Carousel items -->
−
              <img src="http://i.imgur.com/tUslnV8.jpg"
+
                                <div class="carousel-inner">
−
        data-fullsrc="http://i.imgur.com/tUslnV8.jpg"
+
                                    <div class="active item" data-slide-number="0">
−
    />
+
                                        <img src="http://i.imgur.com/wbjU9Gi.jpg"></div>
−
    </div>
+
 
 +
                                    <div class="item" data-slide-number="1">
 +
                                        <img src="http://i.imgur.com/hkyGRUV.jpg"></div>
 +
 
 +
                                    <div class="item" data-slide-number="2">
 +
                                        <img src="http://i.imgur.com/Vyd0o9k.jpg"></div>
 +
 
 +
                                    <div class="item" data-slide-number="3">
 +
                                        <img src="http://i.imgur.com/eov1S5P.jpg"></div>
 +
 
 +
                                    <div class="item" data-slide-number="4">
 +
                                        <img src="http://i.imgur.com/Kq9R0sn.jpg"></div>
 +
 
 +
                                    <div class="item" data-slide-number="5">
 +
                                        <img src="http://i.imgur.com/OBF8a5K.jpg"></div>
 +
                                    <div class="item" data-slide-number="6">
 +
                                        <img src="http://i.imgur.com/xPc6h5G.png"></div>
 +
                                   
 +
                                      <div class="item" data-slide-number="7">
 +
                                        <img src="http://i.imgur.com/IKWWZbh.png"></div>
 +
                                   
 +
                                      <div class="item" data-slide-number="8">
 +
                                        <img src="http://i.imgur.com/IWyqpZI.jpg"></div>
 +
                                   
 +
                                      <div class="item" data-slide-number="9">
 +
                                        <img src="http://i.imgur.com/j2bIoPT.jpg"></div>
 +
                                   
 +
                                      <div class="item" data-slide-number="10">
 +
                                        <img src="http://i.imgur.com/gPS7tNF.jpg"></div>
 +
                                   
 +
                                        <div class="item" data-slide-number="11">
 +
                                        <img src="http://i.imgur.com/cRyKh8V.jpg"></div>
 +
                                   
 +
                                      <div class="item" data-slide-number="12">
 +
                                        <img src="http://i.imgur.com/h9fOPq2.png"></div>
 +
                                   
 +
                                      <div class="item" data-slide-number="13">
 +
                                        <img src="http://i.imgur.com/O1jnVqU.jpg"></div>
 +
                                   
 +
                                      <div class="item" data-slide-number="14">
 +
                                        <img src="http://i.imgur.com/idqccIf.jpg"></div>
 +
                                   
 +
                                      <div class="item" data-slide-number="15">
 +
                                        <img src="http://i.imgur.com/exbBYSw.jpg"></div>
 +
                           
 +
                                </div>
 +
                                <!-- Carousel nav -->
 +
                                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 +
                                    <span class="glyphicon glyphicon-chevron-left"></span>
 +
                                </a>
 +
                                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 +
                                    <span class="glyphicon glyphicon-chevron-right"></span>
 +
                                </a>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 +
            <!--/Slider-->
 
         </div>
 
         </div>
−
 
+
 
−
 
+
    </div>
 +
   
 
   </div>
 
   </div>
 
     </div>
 
     </div>
Line 215: Line 311:
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
−
  <script type="text/javascript" src="http://vodkabears.github.io/galereya/js/jquery.galereya.min.js"></script>
+
<style>
 +
    .hide-bullets {
 +
    list-style:none;
 +
    margin-left: -40px;
 +
    margin-top:20px;
 +
}
 +
 
 +
.thumbnail {
 +
    padding: 0;
 +
}
 +
 
 +
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
 +
    width: 100%;
 +
    }</style>
 
     <script>
 
     <script>
−
         $('#gal1').galereya();
+
        jQuery(document).ready(function($) {
−
             $('#gal2').galereya();
+
−
        $('#gal3').galereya();
+
         $('#myCarousel').carousel({
−
    </script>
+
                interval: 5000
 +
        });
 +
 +
        //Handles the carousel thumbnails
 +
        $('[id^=carousel-selector-]').click(function () {
 +
        var id_selector = $(this).attr("id");
 +
        try {
 +
             var id = /-(\d+)$/.exec(id_selector)[1];
 +
            console.log(id_selector, id);
 +
            jQuery('#myCarousel').carousel(parseInt(id));
 +
        } catch (e) {
 +
            console.log('Regex failed!', e);
 +
        }
 +
    });
 +
        // When the carousel slides, auto update the text
 +
        $('#myCarousel').on('slid.bs.carousel', function (e) {
 +
                var id = $('.item.active').data('slide-number');
 +
                $('#carousel-text').html($('#slide-content-'+id).html());
 +
        });
 +
        });</script>
 
</html>
 
</html>

Latest revision as of 03:36, 19 September 2015

Human Practices

Check our PDF Version
Lets talk!

Sri Venkateswara College of Engineering, Chennai