progress sync

This commit is contained in:
BOTAlex 2024-08-20 22:06:08 +02:00
parent 0c5747e0bf
commit d2a418f4c4
3 changed files with 175 additions and 5 deletions

View File

@ -1,6 +1,7 @@
<script> <script>
import Header from './Header.svelte'; import Header from './Header.svelte';
import '../app.css'; import '../app.css';
import Footer from './Footer.svelte';
</script> </script>
<div class="app"> <div class="app">
@ -9,6 +10,8 @@
<main> <main>
<slot /> <slot />
</main> </main>
<Footer/>
</div> </div>
<style> <style>

View File

@ -68,7 +68,7 @@
</svelte:head> </svelte:head>
<section> <section>
<Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}> <Parallax sections={1.5} config={{stiffness: 0.2, damping: 0.3}}>
<ParallaxLayer rate={0} span={0.6}> <ParallaxLayer rate={0} span={0.6}>
<div class="relative fill"> <div class="relative fill">
<img class="backgroundVideoContainer" src="{differencialBackgroundVideo}" alt="Background"/> <img class="backgroundVideoContainer" src="{differencialBackgroundVideo}" alt="Background"/>
@ -105,7 +105,7 @@
</div> </div>
</div> </div>
</ParallaxLayer> </ParallaxLayer>
<ParallaxLayer rate={0} offset={0.575} span={2} class="bg-base-100"> <ParallaxLayer rate={0} offset={0.575} span={1} class="bg-base-100">
<div class="flex-container"> <div class="flex-container">
<div class="card lg:card-side bg-base-100 sylvesterTest"> <div class="card lg:card-side bg-base-100 sylvesterTest">
<div class="card-body shadow-xl"> <div class="card-body shadow-xl">

View File

@ -2,9 +2,111 @@
// Script // Script
</script> </script>
<div> <main>
<!-- html --> <div class="topbar"></div>
</div> <div class="ads"></div>
<div class="content flex justify-center space-x-4 ">
<div class="card-container fullcontainer">
<div class="card w-96 shadow-xl bg-primary ">
<figure class="px-10 pt-10 ">
<img
src="https://i.redd.it/cxr3m537py6d1.jpeg"
alt="Shoes"
class="rounded-xl photo-card" />
</figure>
<div class="card-body items-center textbox-container">
<h2 class="card-title">Enterprise</h2>
<h1> Contact Us </h1>
<div class="card-actions">
<button class="btn btn-lg btn-secondary">Get Enterprise Usage</button>
</div>
<div class="textbox-container-decription">
<p class="big">Access to all features</p>
<p class="big">Access to an self-aware AI Girlfriend</p>
<p class="big">Access to private calls us everyday!</p>
<p class="big">Access to 1 Novemdecillion GB's of data</p>
</div>
</div>
</div>
</div>
<div class="card-container fullcontainer">
<div class="card w-96 shadow-xl bg-primary">
<figure class="px-10 pt-10 ">
<img
src="https://preview.redd.it/oh-hell-nah-v0-uflg6j7q8p6d1.jpeg?width=614&format=pjpg&auto=webp&s=27d308a5b6e203b3c06bab79320b003c90bda466"
alt="Shoes"
class="rounded-xl photo-card" />
</figure>
<div class="card-body items-center textbox-container">
<h2 class="card-title">Profesional</h2>
<h1> 0.00$ /month </h1>
<div class="card-actions">
<button class="btn btn-lg btn-secondary">Get Profesional Usage</button>
</div>
<div class="textbox-container-decription">
<p class="big">Access to all features</p>
<p class="big">Access to an machine learning AI</p>
<p class="big">Access to all of the CIA secrets</p>
<p class="big">Access to 1 Septillion GB's of data</p>
</div>
</div>
</div>
</div>
<div class="card-container fullcontainer ">
<div class="card w-96 shadow-xl bg-primary ">
<figure class="px-10 pt-10 ">
<img
src="https://i.redd.it/fp2psppzqm6d1.jpeg"
alt="Shoes"
class="rounded-xl photo-card" />
</figure>
<div class="card-body items-center textbox-container">
<h2 class="card-title">Profeional lite</h2>
<h1> 0$ /month </h1>
<div class="card-actions">
<button class="btn btn-lg btn-secondary">Get Profeional Lite Usage</button>
</div>
<div class="textbox-container-decription">
<p class="big ">Access to all features</p>
<p class="big">Access to blink while using the app</p>
<p class="big">Access to not talk to girls </p>
<p class="big">Access to 1 Quadrillion GB's of data</p>
</div>
</div>
</div>
</div>
<div class="card-container fullcontainer">
<div class="card w-96 shadow-xl bg-primary ">
<figure class="px-10 pt-10 ">
<img
src="https://preview.redd.it/hell-ye-jigsaw-you-a-goat-v0-qrhlgbaanu5d1.jpeg?width=961&format=pjpg&auto=webp&s=5dfd92e329eaef4353398c16313c38f65c755983"
alt="Shoes"
class="rounded-xl photo-card" />
</figure>
<div class="card-body items-center textbox-container">
<h2 class="card-title">Personal usage</h2>
<h1> Free </h1>
<div class="card-actions">
<button class="btn btn-lg btn-secondary">Get Personal Usage</button>
</div>
<div class="textbox-container-decription ">
<p class="big">Access to all features</p>
<p class="big">Access to breath while using the app</p>
<p class="big">Access to eat while mathing</p>
<p class="big">Access to 1 billion GB's of data</p>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar"></div>
<div class="footer"></div>
</main>
<style> <style>
main{ main{
@ -20,4 +122,69 @@
align-items: center; align-items: center;
} }
.topbar {
grid-area: topbar;
text-align: center;
padding: 10px;
}
.ads {
grid-area: ads;
text-align: center;
padding: 10px;
}
.content {
grid-area: content;
text-align: center;
padding: 10px;
}
.sidebar {
grid-area: sidebar;
text-align: center;
padding: 10px;
}
.footer {
grid-area: footer;
text-align: center;
padding: 10px;
}
.fullcontainer{
outline: 3px solid black;
border-radius: 15px;
}
.photo-card {
height: 200px;
width: 300px;
outline: 3px solid black;
border-radius: 15px;
}
.textbox-container {
height: 700px;
}
.textbox-container-decription {
text-align: justify;
}
p.big {
line-height: 4;
}
</style> </style>