|
|
| (24 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <head>
| |
| − | <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
| |
| − | <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.js"></script>
| |
| − | <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet">
| |
| − | <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
| |
| − | <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet">
| |
| − | </head>
| |
| − | <style>
| |
| − | @font-face {
| |
| − | font-family: "Century Gothic";
| |
| − | src: url('century.ttf');
| |
| − | }
| |
| − | html, body {
| |
| − | height: 100%;
| |
| − | overflow-y: scroll;
| |
| − | overflow-x: hidden;
| |
| − | }
| |
| − | .p1-title {
| |
| − | text-align: center;
| |
| − | font-size: 48px;
| |
| − | font-family: "Century Gothic", Serif;
| |
| − | }
| |
| − | .section {
| |
| − | text-align: center;
| |
| − | }
| |
| − | .ui.secondary.pointing.menu {
| |
| − | margin-bottom: 0px;
| |
| − | border-bottom: 0px solid transparent!important;
| |
| − | }
| |
| − | #leftnav {
| |
| − | font-size: 18px;
| |
| − | }
| |
| − | .leftnav-item {
| |
| − | transition: box-shadow 0.5s;
| |
| − | font-size: 18px!important;
| |
| − | }
| |
| − | .leftnav-item:hover {
| |
| − | box-shadow: -4px 0px 0px #ccc !important;
| |
| − | }
| |
| − | .inside-container {
| |
| − | overflow-y: scroll;
| |
| − | font-size: 18px;
| |
| − | padding-right: 20%;
| |
| − | }
| |
| − | .ui.secondary.vertical.pointing {
| |
| − | box-shadow: -24px 0px 24px -24px #aaa inset;
| |
| − | border-right: 1px solid #ccc!important;
| |
| − | }
| |
| − | #menu {
| |
| − | box-shadow: 0px 2px 10px 0px #aaa;
| |
| − | }
| |
| − | .leftnav-item.active {
| |
| − | border-right: none! important;
| |
| − | box-shadow: -4px 0px 0px #ccc !important;
| |
| − | }
| |
| | | | |
| − | ::-webkit-scrollbar{
| |
| − | padding-left:1px;
| |
| − | background-color:#fafafa;
| |
| − | overflow:visible;
| |
| − | width:9px;
| |
| − | }
| |
| − | ::-webkit-scrollbar-thumb{
| |
| − | background-color:rgba(0, 0, 0, .1);
| |
| − | background-clip:padding-box;
| |
| − | border-left-width:2px;
| |
| − | min-height:10px;
| |
| − | box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
| |
| − | }
| |
| − | ::-webkit-scrollbar-thumb:vertical:hover{
| |
| − | background-color:rgba(0, 0, 0, .2);
| |
| − | }
| |
| − | ::-webkit-scrollbar-thumb:vertical:active{
| |
| − | background-color:rgba(0, 0, 0, .2);
| |
| − | }
| |
| − | ::-webkit-scrollbar-button{
| |
| − | height:0;
| |
| − | width:0;
| |
| − | }
| |
| − | ::-webkit-scrollbar-track{
| |
| − | background-clip:padding-box;
| |
| − | border:solid transparent;
| |
| − | border-width:0 0 0 2px;
| |
| − | }
| |
| − | ::-webkit-scrollbar-corner{
| |
| − | background:transparent;
| |
| − | }
| |
| − | ::-webkit-scrollbar-track-piece{
| |
| − | margin: 10px 0;
| |
| − | -webkit-border-radius: 0;
| |
| − | -webkit-border-bottom-right-radius: 4px;
| |
| − | -webkit-border-bottom-left-radius: 4px;
| |
| − | }
| |
| − | h1 {
| |
| − | font-size: 3em !important;
| |
| − | line-height: 3.5em;
| |
| − | }
| |
| − | h3 {
| |
| − | font-size: 2em !important;
| |
| − | line-height: 2.25em;
| |
| − | font-weight: 300 !important;
| |
| − | }
| |
| − | .divider {
| |
| − | margin: 2em auto 2em auto;
| |
| − | border-top: 1px solid #ccc;
| |
| − | width: 90%;
| |
| − | }
| |
| − | </style>
| |
| − | <body>
| |
| − | <div class="ui menu pointing fixed" id="menu">
| |
| − | <div class="right menu">
| |
| − | <a class="active item" data-menuanchor="firstPage" href="#firstPage">Page 1 </a>
| |
| − | <a class="item" data-menuanchor="secondPage" href="#secondPage">Page 2</a>
| |
| − | <a class="item" data-menuanchor="thirdPage" href="#thirdPage">Page 3</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="fullpage">
| |
| − | <div class="section" id="section1">
| |
| − | <div class="p1-title">biohub</div>
| |
| − | </div>
| |
| − | <div class="section">
| |
| − | <div class="slide" data-anchor="slide1">Slide 2.1</div>
| |
| − | <div class="slide" data-anchor="slide2">Slide 2.2</div>
| |
| − | </div>
| |
| − | <div class="section">Section 3</div>
| |
| − | </div>
| |
| − | <script>
| |
| − | var myFullpage = new fullpage('#fullpage', {
| |
| − | menu: '#menu',
| |
| − | anchors: ['firstPage', 'secondPage', 'thirdPage'],
| |
| − | sectionsColor: ['#FFF', '#FFF', '#FFF'],
| |
| − | autoScrolling: false,
| |
| − | licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE'
| |
| − | });
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | <script>
| |
| − | $(document).ready(function () {
| |
| − |
| |
| − | })
| |
| − | </script>
| |
