Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Idea changed but sync

This commit is contained in:
BOT Alex 2023-12-29 06:00:58 +01:00
parent 8d58558c76
commit 4a85a0062b
4 changed files with 66 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -11,6 +11,16 @@
<body> <body>
<div id="app" style="margin: 0; padding: 0;"></div> <div id="app" style="margin: 0; padding: 0;"></div>
<script type="module" src="/src/main.js"></script> <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> </body>
</html> </html>

32
src/App.svelte
View File

@ -1,12 +1,36 @@
<script> <script>
import svelteLogo from './assets/svelte.svg' import svelteLogo from './assets/svelte.svg'
import viteLogo from '/vite.svg' import StartVideo from './assets/StartVideo.gif'
import ScrollTextComponent from './lib/ScrollTextComponent.svelte' import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
</script> </script>
<main style="overflow-x: hidden; overflow-y:scroll; height: 100vh;"> <main>
<ScrollTextComponent /> <div class="topnav">
<div style="background-color: black; height: 200px; width: 100%;"></div> <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> </main>
<style> <style>

28
src/app.css
View File

@ -33,4 +33,32 @@ body {
@keyframes typing { @keyframes typing {
from { width: 0 } from { width: 0 }
to { width: 100% } 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;
} }

BIN
src/assets/StartVideo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 MiB