progress sync
This commit is contained in:
parent
0c5747e0bf
commit
d2a418f4c4
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue