|
|
| Line 30: |
Line 30: |
| | <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> | | <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> |
| | <![endif]--> | | <![endif]--> |
| − | <style type="text/css">
| |
| − | .st-container {
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
| |
| − | }
| |
| − |
| |
| − | .st-container > input,
| |
| − | .st-container > a {
| |
| − | position: fixed;
| |
| − | bottom: 0px;
| |
| − | width: 20%;
| |
| − | cursor: pointer;
| |
| − | font-size: 16px;
| |
| − | height: 34px;
| |
| − | line-height: 34px;
| |
| − | }
| |
| − |
| |
| − | .st-container > input {
| |
| − | opacity: 0;
| |
| − | z-index: 1000;
| |
| − | }
| |
| − |
| |
| − | .st-container > a {
| |
| − | z-index: 10;
| |
| − | font-weight: 700;
| |
| − | background: #e23a6e;
| |
| − | color: #fff;
| |
| − | text-align: center;
| |
| − | text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
| |
| − | }
| |
| − |
| |
| − | /* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
| |
| − | .st-container:before {
| |
| − | content: '';
| |
| − | position: fixed;
| |
| − | width: 100%;
| |
| − | height: 34px;
| |
| − | background: #e23a6e;
| |
| − | z-index: 9;
| |
| − | bottom: 0;
| |
| − | }
| |
| − |
| |
| − | #st-control-1, #st-control-1 + a {
| |
| − | left: 0;
| |
| − | }
| |
| − |
| |
| − | #st-control-2, #st-control-2 + a {
| |
| − | left: 20%;
| |
| − | }
| |
| − |
| |
| − | #st-control-3, #st-control-3 + a {
| |
| − | left: 40%;
| |
| − | }
| |
| − |
| |
| − | #st-control-4, #st-control-4 + a {
| |
| − | left: 60%;
| |
| − | }
| |
| − |
| |
| − | #st-control-5, #st-control-5 + a {
| |
| − | left: 80%;
| |
| − | }
| |
| − |
| |
| − | .st-container > input:checked + a,
| |
| − | .st-container > input:checked:hover + a{
| |
| − | background: #821134;
| |
| − | }
| |
| − |
| |
| − | .st-container > input:checked + a:after,
| |
| − | .st-container > input:checked:hover + a:after{
| |
| − | bottom: 100%;
| |
| − | border: solid transparent;
| |
| − | content: '';
| |
| − | height: 0;
| |
| − | width: 0;
| |
| − | position: absolute;
| |
| − | pointer-events: none;
| |
| − | border-bottom-color: #821134;
| |
| − | border-width: 20px;
| |
| − | left: 50%;
| |
| − | margin-left: -20px;
| |
| − | }
| |
| − |
| |
| − | .st-container > input:hover + a{
| |
| − | background: #AD244F;
| |
| − | }
| |
| − |
| |
| − | .st-container > input:hover + a:after {
| |
| − | border-bottom-color: #AD244F;
| |
| − | }
| |
| − |
| |
| − | .st-scroll,
| |
| − | .st-panel {
| |
| − | position: relative;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | .st-scroll {
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | -webkit-transition: all 0.6s ease-in-out;
| |
| − | -moz-transition: all 0.6s ease-in-out;
| |
| − | -o-transition: all 0.6s ease-in-out;
| |
| − | -ms-transition: all 0.6s ease-in-out;
| |
| − | transition: all 0.6s ease-in-out;
| |
| − |
| |
| − | /* Let's enforce some hardware acceleration */
| |
| − | -webkit-transform: translate3d(0, 0, 0);
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | }
| |
| − |
| |
| − | .st-panel{
| |
| − | background: #fff;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | #st-control-1:checked ~ .st-scroll {
| |
| − | -webkit-transform: translateY(0%);
| |
| − | -moz-transform: translateY(0%);
| |
| − | -o-transform: translateY(0%);
| |
| − | -ms-transform: translateY(0%);
| |
| − | transform: translateY(0%);
| |
| − | }
| |
| − | #st-control-2:checked ~ .st-scroll {
| |
| − | -webkit-transform: translateY(-100%);
| |
| − | -moz-transform: translateY(-100%);
| |
| − | -o-transform: translateY(-100%);
| |
| − | -ms-transform: translateY(-100%);
| |
| − | transform: translateY(-100%);
| |
| − | }
| |
| − | #st-control-3:checked ~ .st-scroll {
| |
| − | -webkit-transform: translateY(-200%);
| |
| − | -moz-transform: translateY(-200%);
| |
| − | -o-transform: translateY(-200%);
| |
| − | -ms-transform: translateY(-200%);
| |
| − | transform: translateY(-200%);
| |
| − | }
| |
| − | #st-control-4:checked ~ .st-scroll {
| |
| − | -webkit-transform: translateY(-300%);
| |
| − | -moz-transform: translateY(-300%);
| |
| − | -o-transform: translateY(-300%);
| |
| − | -ms-transform: translateY(-300%);
| |
| − | transform: translateY(-300%);
| |
| − | }
| |
| − | #st-control-5:checked ~ .st-scroll {
| |
| − | -webkit-transform: translateY(-400%);
| |
| − | -moz-transform: translateY(-400%);
| |
| − | -o-transform: translateY(-400%);
| |
| − | -ms-transform: translateY(-400%);
| |
| − | transform: translateY(-400%);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Content elements */
| |
| − |
| |
| − | .st-deco{
| |
| − | width: 200px;
| |
| − | height: 200px;
| |
| − | position: absolute;
| |
| − | top: 0px;
| |
| − | left: 50%;
| |
| − | margin-left: -100px;
| |
| − | background: #fa96b5;
| |
| − | -webkit-transform: translateY(-50%) rotate(45deg);
| |
| − | -moz-transform: translateY(-50%) rotate(45deg);
| |
| − | -o-transform: translateY(-50%) rotate(45deg);
| |
| − | -ms-transform: translateY(-50%) rotate(45deg);
| |
| − | transform: translateY(-50%) rotate(45deg);
| |
| − | }
| |
| − |
| |
| − | [data-icon]:after {
| |
| − | content: attr(data-icon);
| |
| − | font-family: 'RaphaelIcons';
| |
| − | color: #fff;
| |
| − | text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
| |
| − | position: absolute;
| |
| − | width: 200px;
| |
| − | height: 200px;
| |
| − | line-height: 200px;
| |
| − | text-align: center;
| |
| − | font-size: 90px;
| |
| − | top: 50%;
| |
| − | left: 50%;
| |
| − | margin: -100px 0 0 -100px;
| |
| − | -webkit-transform: rotate(-45deg) translateY(25%);
| |
| − | -moz-transform: rotate(-45deg) translateY(25%);
| |
| − | -o-transform: rotate(-45deg) translateY(25%);
| |
| − | -ms-transform: rotate(-45deg) translateY(25%);
| |
| − | transform: rotate(-45deg) translateY(25%);
| |
| − | }
| |
| − |
| |
| − | .st-panel h2 {
| |
| − | color: #e23a6e;
| |
| − | text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
| |
| − | position: absolute;
| |
| − | font-size: 54px;
| |
| − | font-weight: 900;
| |
| − | width: 80%;
| |
| − | left: 10%;
| |
| − | text-align: center;
| |
| − | line-height: 50px;
| |
| − | margin: -70px 0 0 0;
| |
| − | padding: 0;
| |
| − | top: 50%;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | }
| |
| − |
| |
| − | #st-control-1:checked ~ .st-scroll #st-panel-1 h2,
| |
| − | #st-control-2:checked ~ .st-scroll #st-panel-2 h2,
| |
| − | #st-control-3:checked ~ .st-scroll #st-panel-3 h2,
| |
| − | #st-control-4:checked ~ .st-scroll #st-panel-4 h2,
| |
| − | #st-control-5:checked ~ .st-scroll #st-panel-5 h2{
| |
| − | -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
| |
| − | -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
| |
| − | -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
| |
| − | -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
| |
| − | animation: moveDown 0.6s ease-in-out 0.2s backwards;
| |
| − | }
| |
| − | @-webkit-keyframes moveDown{
| |
| − | 0% {
| |
| − | -webkit-transform: translateY(-40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes moveDown{
| |
| − | 0% {
| |
| − | -moz-transform: translateY(-40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | -moz-transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes moveDown{
| |
| − | 0% {
| |
| − | -o-transform: translateY(-40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | -o-transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-ms-keyframes moveDown{
| |
| − | 0% {
| |
| − | -ms-transform: translateY(-40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | -ms-transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes moveDown{
| |
| − | 0% {
| |
| − | transform: translateY(-40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .st-panel p {
| |
| − | position: absolute;
| |
| − | text-align: center;
| |
| − | font-size: 16px;
| |
| − | line-height: 22px;
| |
| − | color: #8b8b8b;
| |
| − | z-index: 2;
| |
| − | padding: 0;
| |
| − | width: 50%;
| |
| − | left: 25%;
| |
| − | top: 50%;
| |
| − | margin: 10px 0 0 0;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | }
| |
| − | #st-control-1:checked ~ .st-scroll #st-panel-1 p,
| |
| − | #st-control-2:checked ~ .st-scroll #st-panel-2 p,
| |
| − | #st-control-3:checked ~ .st-scroll #st-panel-3 p,
| |
| − | #st-control-4:checked ~ .st-scroll #st-panel-4 p,
| |
| − | #st-control-5:checked ~ .st-scroll #st-panel-5 p{
| |
| − | -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
| |
| − | -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
| |
| − | -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
| |
| − | -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
| |
| − | animation: moveUp 0.6s ease-in-out 0.2s backwards;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes moveUp{
| |
| − | 0% {
| |
| − | -webkit-transform: translateY(40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-moz-keyframes moveUp{
| |
| − | 0% {
| |
| − | -moz-transform: translateY(40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | -moz-transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-o-keyframes moveUp{
| |
| − | 0% {
| |
| − | -o-transform: translateY(40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | -o-transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-ms-keyframes moveUp{
| |
| − | 0% {
| |
| − | -ms-transform: translateY(40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | -ms-transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes moveUp{
| |
| − | 0% {
| |
| − | transform: translateY(40px);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | transform: translateY(0px);
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* Colored sections */
| |
| − |
| |
| − | .st-color,
| |
| − | .st-deco{
| |
| − | background: #fa96b5;
| |
| − | }
| |
| − | .st-color [data-icon]:after {
| |
| − | color: #fa96b5;
| |
| − | }
| |
| − | .st-color .st-deco {
| |
| − | background: #fff;
| |
| − | }
| |
| − | .st-color h2 {
| |
| − | color: #fff;
| |
| − | text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
| |
| − | }
| |
| − | .st-color p {
| |
| − | color: #fff;
| |
| − | color: rgba(255,255,255,0.8);
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 520px) {
| |
| − | .st-panel h2 {
| |
| − | font-size: 42px;
| |
| − | }
| |
| − |
| |
| − | .st-panel p {
| |
| − | width: 90%;
| |
| − | left: 5%;
| |
| − | margin-top: 0;
| |
| − | }
| |
| − |
| |
| − | .st-container > a {
| |
| − | font-size: 13px;
| |
| − | }
| |
| − | }
| |
| − | @media screen and (max-width: 360px) {
| |
| − | .st-container > a {
| |
| − | font-size: 10px;
| |
| − | }
| |
| − |
| |
| − | .st-deco{
| |
| − | width: 120px;
| |
| − | height: 120px;
| |
| − | margin-left: -60px;
| |
| − | }
| |
| − |
| |
| − | [data-icon]:after {
| |
| − | font-size: 60px;
| |
| − | -webkit-transform: rotate(-45deg) translateY(15%);
| |
| − | -moz-transform: rotate(-45deg) translateY(15%);
| |
| − | -o-transform: rotate(-45deg) translateY(15%);
| |
| − | -ms-transform: rotate(-45deg) translateY(15%);
| |
| − | transform: rotate(-45deg) translateY(15%);
| |
| − | }
| |
| − | }
| |
| − | body{
| |
| − | font-family: Georgia, serif;
| |
| − | background: #ddd;
| |
| − | font-weight: 400;
| |
| − | font-size: 15px;
| |
| − | color: #333;
| |
| − | overflow: hidden;
| |
| − | -webkit-font-smoothing: antialiased;
| |
| − | }
| |
| − | a{
| |
| − | color: #555;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | .clr{
| |
| − | clear: both;
| |
| − | padding: 0;
| |
| − | height: 0;
| |
| − | margin: 0;
| |
| − | }
| |
| − | /* Header Style */
| |
| − | .codrops-top{
| |
| − | line-height: 24px;
| |
| − | font-size: 9px;
| |
| − | text-transform: uppercase;
| |
| − | z-index: 9999;
| |
| − | position: relative;
| |
| − | font-family: Cambria, Georgia, serif;
| |
| − | }
| |
| − | .codrops-top a{
| |
| − | padding: 0px 10px;
| |
| − | letter-spacing: 1px;
| |
| − | color: #888;
| |
| − | display: inline-block;
| |
| − | text-shadow: 0 1px 1px rgba(255,255,255,0.4);
| |
| − | }
| |
| − | .codrops-top span.right{
| |
| − | float: right;
| |
| − | }
| |
| − | .codrops-top span.right a{
| |
| − | float: left;
| |
| − | display: block;
| |
| − | }
| |
| − | @media screen and (max-width: 520px) {
| |
| − | .codrops-top { display: none; }
| |
| − | }
| |
| − | </style>
| |
| | </head> | | </head> |
| | <body> | | <body> |
| Line 507: |
Line 47: |
| | <div id="navbar" class="navbar-collapse collapse"> | | <div id="navbar" class="navbar-collapse collapse"> |
| | <ul class="nav navbar-nav"> | | <ul class="nav navbar-nav"> |
| − | <li class="active"><a href="#">Home</a></li> | + | <li><a href="#">Home</a></li> |
| | <li><a href="https://2017.igem.org/Team:BIT-China/Achievement">Achievement</a></li> | | <li><a href="https://2017.igem.org/Team:BIT-China/Achievement">Achievement</a></li> |
| | <li class="dropdown"> | | <li class="dropdown"> |
| Line 518: |
Line 58: |
| | </ul> | | </ul> |
| | </li> | | </li> |
| − | <li><a href="https://2017.igem.org/Team:BIT-China/Modeling">Modeling</a></li> | + | <li class="active"><a href="https://2017.igem.org/Team:BIT-China/Modeling">Modeling</a></li> |
| | <li><a href="https://2017.igem.org/Team:BIT-China/Notebook">Notebook</a></li> | | <li><a href="https://2017.igem.org/Team:BIT-China/Notebook">Notebook</a></li> |
| | <li><a href="https://2017.igem.org/Team:BIT-China/Team">Team</a></li> | | <li><a href="https://2017.igem.org/Team:BIT-China/Team">Team</a></li> |
| Line 550: |
Line 90: |
| | <!-- Main component for a primary marketing message or call to action --> | | <!-- Main component for a primary marketing message or call to action --> |
| | <div class="jumbotron"> | | <div class="jumbotron"> |
| − | <h1>Navbar example</h1> | + | <h1 class="title">TITLE{Project Name}</h1> |
| − | | + | <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> |
| − | | + | <p> To see the difference between static and fixed top navbars, just scroll.</p> |
| − | <div class="container">
| + | |
| − | <div class="st-container">
| + | <a class=" btn btn- lg btn- primary" href="../../ components/ #navbar" role=" button"> View navbar docs »</a> |
| − |
| + | </p> |
| − | <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
| + | |
| − | <a href="#st-panel-1">Serendipity</a>
| + | |
| − | <input type="radio" name="radio-set" id="st-control-2"/>
| + | |
| − | <a href="#st-panel-2">Happiness</a>
| + | |
| − | <input type="radio" name="radio-set" id="st-control-3"/>
| + | |
| − | <a href="#st-panel-3">Tranquillity</a>
| + | |
| − | <input type="radio" name="radio-set" id="st-control-4"/>
| + | |
| − | <a href="#st-panel-4">Positivity</a>
| + | |
| − | <input type="radio" name="radio-set" id="st-control-5"/>
| + | |
| − | <a href="#st-panel-5">Passion</a>
| + | |
| − |
| + | |
| − | <div class="st-scroll">
| + | |
| − |
| + | |
| − | <!-- Placeholder text from http://hipsteripsum.me/ -->
| + | |
| − |
| + | |
| − | <section class="st-panel" id="st-panel-1">
| + | |
| − | <div class="st-deco" data-icon="H"></div>
| + | |
| − | <h2>Serendipity</h2>
| + | |
| − | <p> Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p> | + | |
| − | | + | |
| − | <a class=" htmleaf- icon icon- home" href=" http://www. htmleaf. com/ " title="jQuery之家" target="_blank"><span> jQuery之家</span></a> | | + | |
| − | <a class="htmleaf-icon icon-arrow-right3" href="http://www.htmleaf.com/html5/html5muban/20141126596.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
| + | |
| − | </p>
| + | |
| − | <!--<div class="htmleaf-links">
| + | |
| − | <a class="htmleaf-icon icon-home" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
| + | |
| − | <a class="htmleaf-icon icon-arrow-right3" href="" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
| + | |
| − | </div>-->
| + | |
| − | </section>
| + | |
| − |
| + | |
| − | <section class="st-panel st-color" id="st-panel-2">
| + | |
| − | <div class="st-deco" data-icon="2"></div>
| + | |
| − | <h2>Happiness</h2>
| + | |
| − | <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
| + | |
| − | </section>
| + | |
| − |
| + | |
| − | <section class="st-panel" id="st-panel-3">
| + | |
| − | <div class="st-deco" data-icon="B"></div>
| + | |
| − | <h2>Tranquillity</h2>
| + | |
| − | <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
| + | |
| − | </section>
| + | |
| − |
| + | |
| − | <section class="st-panel st-color" id="st-panel-4">
| + | |
| − | <div class="st-deco" data-icon="x"></div>
| + | |
| − | <h2>Positivity</h2>
| + | |
| − | <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
| + | |
| − | </section>
| + | |
| − |
| + | |
| − | <section class="st-panel" id="st-panel-5">
| + | |
| − | <div class="st-deco" data-icon="Ç"></div>
| + | |
| − | <h2>Passion</h2>
| + | |
| − | <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
| + | |
| − | </section>
| + | |
| − | | + | |
| − | </div><!-- // st-scroll -->
| + | |
| − |
| + | |
| − | </div><!-- // st-container -->
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | | + | |
| | </div> | | </div> |
| | | | |
