Differences

This shows you the differences between two versions of the page.

--- frenkey_openbeta [2020/06/26 07:43] – frenkey
+++ frenkey_openbeta [2020/11/07 16:09] – rudneck
@@ Line 7: / Line 7: @@
 </WRAP>
 {{frenkey_openbeta_ingame.png?nolink&400|}}
+<html>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function() {
+            $('#fullpage').fullpage({
+              sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
+              anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
+              menu: '#menu',
+            });
+        });
+    </script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css">
+    <style>
+        #menu li {
+            display:inline-block;
+            margin: 10px;
+            color: #000;
+            background:#fff;
+            background: rgba(255,255,255, 0.5);
+            -webkit-border-radius: 10px;
+                    border-radius: 10px;
+        }
+        #menu li.active{
+            background:#666;
+            background: rgba(0,0,0, 0.5);
+            color: #fff;
+        }
+        #menu li a{
+            text-decoration:none;
+            color: #000;
+        }
+        #menu li.active a:hover{
+            color: #000;
+        }
+        #menu li:hover{
+            background: rgba(255,255,255, 0.8);
+        }
+        #menu li a,
+        #menu li.active a{
+            padding: 9px 18px;
+            display:block;
+        }
+        #menu li.active a{
+            color: #fff;
+        }
+        #menu{
+            position:fixed;
+            top:0;
+            left:0;
+            height: 40px;
+            z-index: 70;
+            width: 100%;
+            padding: 0;
+            margin:0;
+        }
+        .section{
+            text-align:center;
+        }
+        .intro p{
+            width: 50%;
+            margin: 0 auto;
+            font-size: 1.5em;
+        }
+        p.introimg {
+            color: #FFF;
+            font-size: 6em;
+            margin: 0;
+            line-height: 1em;
+        }
+    </style>
+    <ul id="menu">
+        <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First</a></li>
+        <li data-menuanchor="secondPage"><a href="#secondPage">Second</a></li>
+        <li data-menuanchor="3rdPage"><a href="#3rdPage">Third</a></li>
+    </ul>
+    <div id="fullpage">
+        <div class="section " id="section0">
+            <h1>fullPage Test</h1>
+            <p>Scroll Down To Change Slide</p>
+            <p class="introimg">&darr;&#9636;&darr;</p>
+        </div>
+        <div class="section active" id="section1">
+            <div class="slide" id="slide1">
+                <div class="intro">
+                    <h1>First Slide</h1>
+                    <p>Keep scrolling down</p>
+                </div>
+            </div>
+            <div class="slide active" id="slide2">
+                <h1>Slide 2</h1>
+                <p>You can also scroll left or right on this screen</p>
+            </div>
+            <div class="slide" id="slide3">
+                <h1>Slide 3</h1>
+            </div>
+        </div>
+        <div class="section" id="section2">
+            <div class="intro">
+                <h1>The End</h1>
+                <p>You reached the bottom of the page</p>
+            </div>
+        </div>
+    </div>
+</html>

User Tools

Site Tools

Differences

Page Tools