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

 
(7 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="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"></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 id="main_area">
 +
        <!-- Slider -->
 +
        <div class="row">
 +
            <div class="col-sm-6" id="slider-thumbs">
 +
                <!-- Bottom switcher of slider -->
 +
                <ul class="hide-bullets">
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-0">
 +
                            <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">
 +
                        <a class="thumbnail" id="carousel-selector-7"><img src="http://i.imgur.com/IKWWZbh.png"></a>
 +
                    </li>
 +
           
 +
                   
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-8"><img src="http://i.imgur.com/IWyqpZI.jpg"></a>
 +
                    </li>
 +
           
 +
                   
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-9"><img src="http://i.imgur.com/j2bIoPT.jpg"></a>
 +
                    </li>
 +
           
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-10"><img src="http://i.imgur.com/gPS7tNF.jpg"></a>
 +
                    </li>
 +
           
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-11"><img src="http://i.imgur.com/cRyKh8V.jpg"></a>
 +
                    </li>
 +
           
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-12"><img src="http://i.imgur.com/h9fOPq2.png"></a>
 +
                    </li>
 +
           
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-13"><img src="http://i.imgur.com/O1jnVqU.jpg"></a>
 +
                    </li>
 +
           
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-14"><img src="http://i.imgur.com/idqccIf.jpg"></a>
 +
                    </li>
 +
           
 +
                    <li class="col-sm-3">
 +
                        <a class="thumbnail" id="carousel-selector-15"><img src="http://i.imgur.com/exbBYSw.jpg"></a>
 +
                    </li>
 +
           
 +
                   
 +
           
 +
 
 +
                </ul>
 +
            </div>
 +
            <div class="col-sm-6">
 +
                <div class="col-xs-12" id="slider">
 +
                    <!-- Top part of the slider -->
 +
                    <div class="row">
 +
                        <div class="col-sm-12" id="carousel-bounding-box">
 +
                            <div class="carousel slide" id="myCarousel">
 +
                                <!-- Carousel items -->
 +
                                <div class="carousel-inner">
 +
                                    <div class="active item" data-slide-number="0">
 +
                                        <img src="http://i.imgur.com/wbjU9Gi.jpg"></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>
 +
            <!--/Slider-->
 +
        </div>
 +
 
 +
    </div>
 +
   
 
   </div>
 
   </div>
 
     </div>
 
     </div>
Line 147: 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>
 +
<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>
 +
        jQuery(document).ready(function($) {
 +
 +
        $('#myCarousel').carousel({
 +
                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