Difference between revisions of "Template:CSU CHINA"
| Line 7: | Line 7: | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
| − | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| − | + | <!-- bootstrap --> | |
| − | + | <link rel="stylesheet" href="https://2019.igem.org/Template:CSU_CHINA/CSS/Bootstrap4?action=raw&ctype=text/css" type="text/css"> | |
| − | + | <!-- Font-Awesome-Icons-CSS --> | |
| − | + | <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.css" type="text/css"> | |
<!-- jquery.min.js --> | <!-- jquery.min.js --> | ||
<script src="https://2019.igem.org/Template:CSU_CHINA/JS/jquery?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Template:CSU_CHINA/JS/jquery?action=raw&ctype=text/javascript"></script> | ||
| Line 25: | Line 25: | ||
<style> | <style> | ||
body{ | body{ | ||
| − | + | padding:0; | |
| − | + | margin:0; | |
} | } | ||
body a{ | body a{ | ||
transition:0.5s all; | transition:0.5s all; | ||
| − | + | -webkit-transition:0.5s all; | |
| − | + | -moz-transition:0.5s all; | |
| − | + | -o-transition:0.5s all; | |
| − | + | -ms-transition:0.5s all; | |
} | } | ||
a:hover{ | a:hover{ | ||
| − | + | text-decoration:none; | |
} | } | ||
| − | h1,h2,h3,h4,h5,h6{ | + | #navigator h1,h2,h3,h4,h5,h6{ |
| − | + | margin:0; | |
| − | } | + | } |
| − | p{ | + | #navigator p{ |
| − | + | margin:0; | |
} | } | ||
| − | ul{ | + | #navigator ul{ |
| − | + | margin:0; | |
| − | + | padding:0; | |
} | } | ||
| − | div#top_title{ | + | #navigator div#top_title{ |
display:none; | display:none; | ||
} | } | ||
/*--/navbar--*/ | /*--/navbar--*/ | ||
| − | .navbar { | + | #navigator .navbar { |
| − | + | height: 110px; | |
| − | + | margin-top: 16px; | |
| − | + | padding-top: 0px; | |
| − | + | padding-bottom: 0px; | |
font-size:17px; | font-size:17px; | ||
} | } | ||
| − | #navbarSupportedContent{ | + | #navigator #navbarSupportedContent{ |
| − | + | height: 100px; | |
} | } | ||
| − | nav.navbar{ | + | #navigator nav.navbar{ |
width: 100%; | width: 100%; | ||
background-color: rgba(17, 17, 17, 0.70) !important; | background-color: rgba(17, 17, 17, 0.70) !important; | ||
| Line 69: | Line 69: | ||
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | ||
} | } | ||
| − | nav.shrink{ | + | #navigator nav.shrink{ |
| − | + | width: 100%; | |
background-color: rgba(17, 17, 17, 0.80) !important; | background-color: rgba(17, 17, 17, 0.80) !important; | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
| Line 76: | Line 76: | ||
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | ||
} | } | ||
| − | a.navbar-brand { | + | #navigator a.navbar-brand { |
font-size: 1em; | font-size: 1em; | ||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37); | text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37); | ||
| Line 82: | Line 82: | ||
} | } | ||
| − | .navlink{ | + | #navigator .navlink{ |
| − | + | padding: 0px; | |
} | } | ||
| − | .navbar-light .navbar-brand { | + | #navigator .navbar-light .navbar-brand { |
| − | + | margin-right: 0px; | |
color: #fff; | color: #fff; | ||
font-weight: 100; | font-weight: 100; | ||
} | } | ||
| − | .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { | + | #navigator .navbar-light .navbar-brand:hover, #navigator .navbar-light .navbar-brand:focus { |
color: #fff; | color: #fff; | ||
} | } | ||
| − | li.nav-item { | + | #navigator li.nav-item { |
margin: 10px; | margin: 10px; | ||
} | } | ||
| − | .navbar-light .navbar-nav .nav-link{ | + | #navigator .navbar-light .navbar-nav .nav-link{ |
| − | + | background: -webkit-linear-gradient(left bottom, #cccccc, #ffffff); /* Safari 5.1 - 6.0 */ | |
| − | + | background: -o-linear-gradient(top right, #cccccc, #ffffff); /* Opera 11.1 - 12.0 */ | |
| − | + | background: -moz-linear-gradient(top right, #cccccc, #ffffff); /* Firefox 3.6 - 15 */ | |
| − | + | background: linear-gradient(to top right, #cccccc, #ffffff); /* Standard */ | |
| − | + | -webkit-background-clip: text; /* Safari 5.1 - 6.0 */ | |
| − | + | -o-background-clip: text; /* Opera 11.1 - 12.0 */ | |
| − | + | -moz-background-clip: text; /* Firefox 3.6 - 15 */ | |
| − | + | background-clip: text; /* Standard */ | |
| − | + | color: transparent; | |
} | } | ||
| − | .dropdown-toggle::after{ | + | #navigator .dropdown-toggle::after{ |
color: #bfbfbf; | color: #bfbfbf; | ||
} | } | ||
| − | .nav-item:hover .dropdown-toggle::after{ | + | #navigator .nav-item:hover .dropdown-toggle::after{ |
| − | + | color: rgba(0, 0, 0, 0); | |
| − | + | transition: color 0.15s; | |
-webkit-transition: color 0.15s; /* Safari */ | -webkit-transition: color 0.15s; /* Safari */ | ||
} | } | ||
| − | .navbar-light .navbar-nav .show > .nav-link, | + | #navigator .navbar-light .navbar-nav .show > .nav-link, |
| − | .navbar-light .navbar-nav .active > .nav-link, | + | #navigator .navbar-light .navbar-nav .active > .nav-link, |
| − | .navbar-light .navbar-nav .nav-link:hover, | + | #navigator .navbar-light .navbar-nav .nav-link:hover, |
| − | .navbar-light .navbar-nav .nav-link:focus { | + | #navigator .navbar-light .navbar-nav .nav-link:focus { |
color: white; | color: white; | ||
} | } | ||
| − | .nav-item:hover .nav-link{ | + | #navigator .nav-item:hover .nav-link{ |
| − | + | color: white; | |
} | } | ||
| − | .dropdown-item { | + | #navigator .dropdown-item { |
padding: 0.5em 1.5rem; | padding: 0.5em 1.5rem; | ||
margin: 0; | margin: 0; | ||
} | } | ||
| − | .dropdown-menu { | + | #navigator .dropdown-menu { |
margin: -1px; | margin: -1px; | ||
padding: 0; | padding: 0; | ||
} | } | ||
| − | li.nav-item.active,li.nav-item:hover { | + | #navigator li.nav-item.active,#navigator li.nav-item:hover { |
border-bottom: 2px solid #7070db; | border-bottom: 2px solid #7070db; | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
| − | .dropdown-item:hover .navbar-nav .nav-link, | + | #navigator .dropdown-item:hover .navbar-nav .nav-link, |
| − | .dropdown-item:focus .navbar-nav .nav-link{ | + | #navigator .dropdown-item:focus .navbar-nav .nav-link{ |
| − | + | color: #ffffff; | |
} | } | ||
| − | .dropdown-item:hover, | + | #navigator .dropdown-item:hover, |
| − | .dropdown-item:focus { | + | #navigator .dropdown-item:focus { |
color: #4c6ef5; | color: #4c6ef5; | ||
text-decoration: none; | text-decoration: none; | ||
| Line 165: | Line 165: | ||
} | } | ||
#bodyContent a[href ^="https://"], .link-https{ | #bodyContent a[href ^="https://"], .link-https{ | ||
| − | + | padding: 8px 8px 8px 8px; | |
} | } | ||
| Line 171: | Line 171: | ||
</style> | </style> | ||
| − | <body> | + | <body id="navigator"> |
<nav class="navbar navbar-expand-lg navbar-light fixed-top"> | <nav class="navbar navbar-expand-lg navbar-light fixed-top"> | ||
<a class="navbar-brand" href="index.html"> | <a class="navbar-brand" href="index.html"> | ||
| Line 178: | Line 178: | ||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> | ||
<span class="navbar-toggler-icon"></span> | <span class="navbar-toggler-icon"></span> | ||
| − | </button> | + | </button> |
<div class="collapse navbar-collapse" id="navbarSupportedContent"> | <div class="collapse navbar-collapse" id="navbarSupportedContent"> | ||
<ul class="navbar-nav ml-lg-auto text-center"> | <ul class="navbar-nav ml-lg-auto text-center"> | ||
| Line 219: | Line 219: | ||
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">TEAM</a> | <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">TEAM</a> | ||
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> | <div class="dropdown-menu" aria-labelledby="navbarDropdown"> | ||
| − | + | <a class="dropdown-item" href="/Team:CSU_CHINA/Collaborations" title="">COLLABORATIONS</a> | |
| − | + | <a class="dropdown-item" href="/Team:CSU_CHINA/Attributions" title="">ATTRIBUTIONS</a> | |
<a class="dropdown-item" href="/Team:CSU_CHINA/Team" title="">TEAM MEMBERS</a> | <a class="dropdown-item" href="/Team:CSU_CHINA/Team" title="">TEAM MEMBERS</a> | ||
</div> | </div> | ||
| Line 226: | Line 226: | ||
<li class="nav-item"> | <li class="nav-item"> | ||
<a class="nav-link" href="#">JUDGING</a> | <a class="nav-link" href="#">JUDGING</a> | ||
| − | </li> | + | </li> |
</ul> | </ul> | ||
</div> | </div> | ||
</nav> | </nav> | ||
| − | + | <script> | |
$(document).ready(function() { | $(document).ready(function() { | ||
$(".dropdown").hover( | $(".dropdown").hover( | ||
| Line 243: | Line 243: | ||
); | ); | ||
}); | }); | ||
| − | + | </script> | |
<!-- //dropdown nav --> | <!-- //dropdown nav --> | ||
<!-- fixed nav --> | <!-- fixed nav --> | ||
| Line 255: | Line 255: | ||
}); | }); | ||
</script> | </script> | ||
| − | + | <!-- //fixed nav --> | |
| − | + | <script type="text/javascript"> | |
| − | + | $(document).ready(function () { | |
| − | + | $('#horizontalTab').easyResponsiveTabs({ | |
| − | + | type: 'default', //Types: default, vertical, accordion | |
| − | + | width: 'auto', //auto or any width like 600px | |
| − | + | fit: true // 100% fit in a container | |
| − | + | }); | |
| − | + | }); | |
| − | + | </script> | |
</body> | </body> | ||
</html> | </html> | ||
Revision as of 06:19, 16 October 2019