Cyrillustan (Talk | contribs) |
Michael Mu (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | {{Emory}} | + | {{Team:Emory/Test}} |
− | + | ||
− | < | + | <html lang="en"> |
− | < | + | <head> |
+ | <title>Team:Emory iGEM 2016</title> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | ||
+ | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
+ | <style> | ||
+ | #content{width:100%} | ||
+ | #bodyContent{width:100%} | ||
+ | #cssmenu{width:100%} | ||
− | + | /* NAV STYLE*/ | |
+ | *{margin:0;padding:0;text-decoration:none;} | ||
− | + | nav{position:relative;width:980px;margin:0px 0px -50px 0px; auto;} | |
+ | #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} | ||
+ | #cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} | ||
+ | #cssmenu #head-mobile{display:none} | ||
+ | #cssmenu{font-family:sans-serif;background:#333} | ||
+ | #cssmenu > ul > li{float:left} | ||
+ | #cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;} | ||
+ | #cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff} | ||
+ | #cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#448D00!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;} | ||
+ | #cssmenu > ul > li.has-sub > a{padding-right:30px} | ||
+ | #cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''} | ||
+ | #cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease} | ||
+ | #cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0} | ||
+ | #cssmenu ul ul{position:absolute;left:-9999px} | ||
+ | #cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease} | ||
+ | #cssmenu ul ul li:hover{} | ||
+ | #cssmenu li:hover > ul{left:auto;margin:0px;} | ||
+ | #cssmenu li:hover > ul > li{height:35px} | ||
+ | #cssmenu ul ul ul{margin-left:100%;top:0} | ||
+ | #cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;} | ||
+ | #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0} | ||
+ | #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff} | ||
+ | #cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''} | ||
+ | #cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease} | ||
+ | #cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0} | ||
+ | #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;} | ||
+ | #cssmenu ul ul ul li.active a{border-left:1px solid #333} | ||
+ | #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333} | ||
+ | @media screen and (max-width:700px){ | ||
+ | .logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none} | ||
+ | .logo2{display:none} | ||
+ | nav{width:100%;} | ||
+ | #cssmenu{width:100%} | ||
+ | #cssmenu ul{width:100%;display:none} | ||
+ | #cssmenu ul li{width:100%;border-top:1px solid #444} | ||
+ | #cssmenu ul li:hover{background:#363636;} | ||
+ | #cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto} | ||
+ | #cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0} | ||
+ | #cssmenu > ul > li{float:none} | ||
+ | #cssmenu ul ul li a{padding-left:25px} | ||
+ | #cssmenu ul ul li{background:#333!important;} | ||
+ | #cssmenu ul ul li:hover{background:#363636!important} | ||
+ | #cssmenu ul ul ul li a{padding-left:35px} | ||
+ | #cssmenu ul ul li a{color:#ddd;background:none} | ||
+ | #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff} | ||
+ | #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left} | ||
+ | #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none} | ||
+ | #cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700} | ||
+ | .button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;} | ||
+ | .button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''} | ||
+ | .button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''} | ||
+ | .button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} | ||
+ | .button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} | ||
+ | #cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer} | ||
+ | #cssmenu .submenu-button.submenu-opened{background:#262626} | ||
+ | #cssmenu ul ul .submenu-button{height:34px;width:34px} | ||
+ | #cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''} | ||
+ | #cssmenu ul ul .submenu-button:after{top:15px;right:13px} | ||
+ | #cssmenu .submenu-button.submenu-opened:after{background:#fff} | ||
+ | #cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''} | ||
+ | #cssmenu ul ul .submenu-button:before{top:12px;right:16px} | ||
+ | #cssmenu .submenu-button.submenu-opened:before{display:none} | ||
+ | #cssmenu ul ul ul li.active a{border-left:none} | ||
+ | #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none} | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | /* NAV END*/ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .centre { | |
− | + | margin-left: auto; | |
− | + | margin-right: auto; | |
− | + | display: block | |
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | /* P2T */ | ||
+ | #return-to-top { | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | right: 20px; | ||
+ | background: rgb(0, 0, 0); | ||
+ | background: rgba(0, 0, 0, 0.7); | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | -webkit-border-radius: 35px; | ||
+ | -moz-border-radius: 35px; | ||
+ | border-radius: 35px; | ||
+ | display: none; | ||
+ | -webkit-transition: all 0.3s linear; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | -ms-transition: all 0.3s ease; | ||
+ | -o-transition: all 0.3s ease; | ||
+ | transition: all 0.3s ease; | ||
+ | } | ||
+ | #return-to-top i { | ||
+ | color: #fff; | ||
+ | margin: 0; | ||
+ | position: relative; | ||
+ | left: 16px; | ||
+ | top: 13px; | ||
+ | font-size: 19px; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | -ms-transition: all 0.3s ease; | ||
+ | -o-transition: all 0.3s ease; | ||
+ | transition: all 0.3s ease; | ||
+ | } | ||
+ | #return-to-top:hover { | ||
+ | background: rgba(0, 0, 0, 0.9); | ||
+ | } | ||
+ | #return-to-top:hover i { | ||
+ | color: #fff; | ||
+ | top: 5px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* P2T END */ | ||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | </head> | ||
+ | |||
+ | |||
+ | <body> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- NAV BAR--> | ||
+ | <nav id='cssmenu'> | ||
+ | <div id="head-mobile"></div> | ||
+ | <div class="button"></div> | ||
− | |||
− | |||
− | |||
<ul> | <ul> | ||
− | <li><a href= | + | <li class='active'><a href='https://2017.igem.org/Team:Emory'>HOME</a></li> |
− | <li><a href= | + | <li><a href='#'>PROJECT</a> |
− | <li><a href= | + | <ul> |
− | <li><a href= | + | <li><a href='https://2017.igem.org/Team:Emory/Description'>Description</a></li> |
+ | <li><a href='https://2017.igem.org/Team:Emory/Experiments'>Experiments</a></li> | ||
+ | <li><a href='https://2017.igem.org/Team:Emory/Proof'>Proof of Concept</a></li> | ||
+ | <li><a href='https://2017.igem.org/Team:Emory/Results'>Results</a></li> | ||
+ | <li><a href='https://2017.igem.org/Team:Emory/Notebook'>Notebook</a></li> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href='https://2017.igem.org/Team:Emory/Basic_Part'>PARTS</a></li> | ||
+ | <li><a href='https://2017.igem.org/Team:Emory/Safety'>SAFETY</a></li> | ||
+ | <li><a href='https://2017.igem.org/Team:Emory/HP/Silver'>COMMUNITY INVOLVEMENT</a> | ||
+ | <li><a href='https://2017.igem.org/Team:Emory/Collaborations'>COLLABORATIONS</a></li> | ||
+ | <li><a href='https://2017.igem.org/Team:Emory/Team'>TEAM</a></li> | ||
+ | <li><a href='https://2017.igem.org/Team:Emory/Attributions'>ATTRIBUTIONS</a></li> | ||
</ul> | </ul> | ||
+ | </nav> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!--Push Up--> | ||
+ | <!-- Return to Top --> | ||
+ | <a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a> | ||
+ | |||
+ | |||
+ | <!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON --> | ||
+ | <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> | ||
+ | |||
+ | |||
+ | <!--Push up End--> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!--PAGE 8 HUMAN PRACTICES--> | ||
+ | |||
+ | <div class="human-practices" id="human-practices"> | ||
+ | <div class="container"> | ||
+ | <h1 style="text-align:center;font-size:50px;color:black;font-family:Open Sans, Arial, Helvetice Neue, sans-serif;padding-top:150px;"><strong>HUMAN PRACTICES & OUTREACH</strong></h1> | ||
+ | |||
+ | <center><img src="https://static.igem.org/mediawiki/2017/d/dd/HP_SURE_trifold.jpeg" alt="guide" style="width:600px;height:600px;"></center> | ||
+ | |||
+ | <center><b><font size="6">We went to the SURE symposium 2017. Daniel Won is shown in this picture</font></b></center> | ||
+ | <p style="text-align:left;padding-bottom:10px;font-size:18px;">parahraph text here </p> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
</div> | </div> | ||
− | </html> | + | |
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <script> | ||
+ | // ===== Scroll to Top ==== | ||
+ | $(window).scroll(function() { | ||
+ | if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px | ||
+ | $('#return-to-top').fadeIn(200); // Fade in the arrow | ||
+ | } else { | ||
+ | $('#return-to-top').fadeOut(200); // Else fade out the arrow | ||
+ | } | ||
+ | }); | ||
+ | $('#return-to-top').click(function() { // When arrow is clicked | ||
+ | $('body,html').animate({ | ||
+ | scrollTop : 0 // Scroll to top of body | ||
+ | }, 500); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | <script> | ||
+ | |||
+ | (function($) { | ||
+ | $.fn.menumaker = function(options) { | ||
+ | var cssmenu = $(this), settings = $.extend({ | ||
+ | format: "dropdown", | ||
+ | sticky: false | ||
+ | }, options); | ||
+ | return this.each(function() { | ||
+ | $(this).find(".button").on('click', function(){ | ||
+ | $(this).toggleClass('menu-opened'); | ||
+ | var mainmenu = $(this).next('ul'); | ||
+ | if (mainmenu.hasClass('open')) { | ||
+ | mainmenu.slideToggle().removeClass('open'); | ||
+ | } | ||
+ | else { | ||
+ | mainmenu.slideToggle().addClass('open'); | ||
+ | if (settings.format === "dropdown") { | ||
+ | mainmenu.find('ul').show(); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | cssmenu.find('li ul').parent().addClass('has-sub'); | ||
+ | multiTg = function() { | ||
+ | cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); | ||
+ | cssmenu.find('.submenu-button').on('click', function() { | ||
+ | $(this).toggleClass('submenu-opened'); | ||
+ | if ($(this).siblings('ul').hasClass('open')) { | ||
+ | $(this).siblings('ul').removeClass('open').slideToggle(); | ||
+ | } | ||
+ | else { | ||
+ | $(this).siblings('ul').addClass('open').slideToggle(); | ||
+ | } | ||
+ | }); | ||
+ | }; | ||
+ | if (settings.format === 'multitoggle') multiTg(); | ||
+ | else cssmenu.addClass('dropdown'); | ||
+ | if (settings.sticky === true) cssmenu.css('position', 'fixed'); | ||
+ | resizeFix = function() { | ||
+ | var mediasize = 700; | ||
+ | if ($( window ).width() > mediasize) { | ||
+ | cssmenu.find('ul').show(); | ||
+ | } | ||
+ | if ($(window).width() <= mediasize) { | ||
+ | cssmenu.find('ul').hide().removeClass('open'); | ||
+ | } | ||
+ | }; | ||
+ | resizeFix(); | ||
+ | return $(window).on('resize', resizeFix); | ||
+ | }); | ||
+ | }; | ||
+ | })(jQuery); | ||
+ | |||
+ | (function($){ | ||
+ | $(document).ready(function(){ | ||
+ | $("#cssmenu").menumaker({ | ||
+ | format: "multitoggle" | ||
+ | }); | ||
+ | }); | ||
+ | })(jQuery); | ||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | </body> |
Revision as of 23:41, 23 October 2017
HUMAN PRACTICES & OUTREACH
parahraph text here