Difference between revisions of "Team:SVCE Chennai/Practices"
(Prototype team page) |
Abrahamrkj (Talk | contribs) |
||
(15 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
− | < | + | <meta name="apple-mobile-web-app-capable" content="yes"> |
+ | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
− | < | + | <link rel="stylesheet" type="text/css" href="https://bootswatch.com/flatly/bootstrap.css"/> |
− | + | ||
− | + | ||
− | < | + | <link rel="stylesheet" type="text/css" href="http://vodkabears.github.io/galereya/css/jquery.galereya.css" /> |
− | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:SVCE_Chennai/CSS?action=raw&ctype=text/css" /> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | ||
+ | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | < | + | <nav class="navBarIGEM navbar navbar-default navbar-fixed-top"> |
− | + | ||
+ | <div class="navbar-header"> | ||
+ | <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> | ||
+ | <span class="sr-only">Toggle navigation</span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | </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" style=" padding-left: 15px;"></a> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="collapse navbar-collapse js-navbar-collapse"> | ||
+ | <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> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Gallery"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/c/c2/MenuImgs_mor.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Gallery</span> | ||
+ | <span class="sdt_descr">Click o Click</span> | ||
+ | </span> | ||
+ | </a> | ||
+ | |||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Practices"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/1/17/MenuImgs_parts.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Practices</span> | ||
+ | <span class="sdt_descr">Spread the word</span> | ||
+ | </span> | ||
+ | </a> | ||
+ | |||
+ | <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/Collaboration">Collaboration</a> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Entrepreneurship">Entrepreneurship</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Notebook"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/e/e9/MenuImgs_notebook.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Notebook</span> | ||
+ | <span class="sdt_descr">My Calendar</span> | ||
+ | </span> | ||
+ | </a> | ||
+ | |||
+ | </li> | ||
+ | |||
+ | |||
+ | <li> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Safety"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/d/d4/MenuImgs_bs.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Safety</span> | ||
+ | <span class="sdt_descr">Safety is my priority</span> | ||
+ | </span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Team"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/30/MenuImgs_team.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Team</span> | ||
+ | <span class="sdt_descr">My creators</span> | ||
+ | </span> | ||
+ | </a> | ||
+ | |||
+ | <div class="sdt_box"> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Team">Members</a> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Brainstorm">Brainstorm</a> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Attributions">Attributions</a> | ||
+ | |||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2015.igem.org/Team:SVCE_Chennai/Project"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/9/9d/MenuImgs1.jpg" alt=""/> | ||
+ | <span class="sdt_active"></span> | ||
+ | <span class="sdt_wrap"> | ||
+ | <span class="sdt_link">Project</span> | ||
+ | <span class="sdt_descr">It's all about me</span> | ||
+ | </span> | ||
+ | </a> | ||
+ | |||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | </div><!-- /.nav-collapse --> | ||
+ | |||
+ | </nav> | ||
− | < | + | <div class="container"> |
− | < | + | <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 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> | ||
− | </div> | + | <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> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <footer class="footer " style="position:fixed"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-4"><img src="https://static.igem.org/mediawiki/2015/3/3e/Minio.png" width=50> | ||
+ | <span class="speech" data-toggle="tooltip" title="Did you know! you can speak with me! Ask me questions like: Who are you?">Lets talk! | ||
+ | <div class="fa fa-microphone microphone-icon"></div> | ||
+ | </span> | ||
+ | </div> | ||
+ | |||
+ | <div class="col-md-4" style="float:right; border-left: 1px solid #60C3EB; transform:skew("> | ||
+ | |||
+ | <img src="https://upload.wikimedia.org/wikipedia/en/7/71/SVCE_logo.png" width=50> | ||
+ | <p style=" display: inline; font-size: 14px; transform: skew(-30deg); ">Sri Venkateswara College of Engineering, Chennai</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </footer> | ||
+ | |||
+ | |||
+ | <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Team:SVCE_Chennai/Javascript?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="http://www.mattboldt.com/demos/typed-js/js/typed.custom.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> | ||
+ | <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