diff --git a/index.html b/index.html
index 5940617..2d882d3 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,16 @@
<body>
<div id="app" style="margin: 0; padding: 0;"></div>
<script type="module" src="/src/main.js"></script>
+
+ <noscript>
+ <style type="text/css">
+ .pagecontainer {display:none;}
+ </style>
+ <div class="noscriptmsg">
+ You don't have javascript enabled. <br/>
+ Please visit this website without javascript: <a href="https://scriptless.deprived.dev/">link</a>
+ </div>
+ </noscript>
</body>
</html>
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index 92941da..61ca033 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,12 +1,36 @@
<script>
import svelteLogo from './assets/svelte.svg'
- import viteLogo from '/vite.svg'
+ import StartVideo from './assets/StartVideo.gif'
import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
+ import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
</script>
-<main style="overflow-x: hidden; overflow-y:scroll; height: 100vh;">
- <ScrollTextComponent />
- <div style="background-color: black; height: 200px; width: 100%;"></div>
+<main>
+ <div class="topnav">
+ <a class="active" href="#home">Home</a>
+ <a href="#news">News</a>
+ <a href="#contact">Contact</a>
+ <a href="#about">About</a>
+ </div>
+
+ <!-- <ScrollTextComponent /> -->
+ <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
+ <ParallaxLayer rate={0} span={3} style="background-color: orange;" />
+
+ <ParallaxLayer rate={-0.5}>
+ <img src={StartVideo} alt="Start video on main screen"/>
+ </ParallaxLayer>
+
+ <ParallaxLayer rate={1} offset={1.75}>
+ <img src='bird.jpg' alt='a bird'>
+ </ParallaxLayer>
+
+ <StickyLayer offset={{ top: 0.5, bottom: 2 }}>
+ <p>A description of a horse and a bird.</p>
+ </StickyLayer>
+
+ <ParallaxLayer rate={2} offset={2} style="background-color: lightblue;" />
+ </Parallax>
</main>
<style>
diff --git a/src/app.css b/src/app.css
index 8284563..4071105 100644
--- a/src/app.css
+++ b/src/app.css
@@ -33,4 +33,32 @@ body {
@keyframes typing {
from { width: 0 }
to { width: 100% }
+}
+
+/* Add a black background color to the top navigation */
+.topnav {
+ background-color: #333;
+ overflow: hidden;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+ float: left;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+ background-color: #ddd;
+ color: black;
+}
+
+/* Add a color to the active/current link */
+.topnav a.active {
+ background-color: #04AA6D;
+ color: white;
}
\ No newline at end of file
diff --git a/src/assets/StartVideo.gif b/src/assets/StartVideo.gif
new file mode 100644
index 0000000..4bae4dd
Binary files /dev/null and b/src/assets/StartVideo.gif differ