progress sync
This commit is contained in:
parent
0c5747e0bf
commit
d2a418f4c4
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import Header from './Header.svelte';
|
||||
import '../app.css';
|
||||
import Footer from './Footer.svelte';
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
|
@ -9,6 +10,8 @@
|
|||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<Footer/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -68,7 +68,7 @@
|
|||
</svelte:head>
|
||||
|
||||
<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}>
|
||||
<div class="relative fill">
|
||||
<img class="backgroundVideoContainer" src="{differencialBackgroundVideo}" alt="Background"/>
|
||||
|
@ -105,7 +105,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</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="card lg:card-side bg-base-100 sylvesterTest">
|
||||
<div class="card-body shadow-xl">
|
||||
|
|
|
@ -2,9 +2,111 @@
|
|||
// Script
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<!-- html -->
|
||||
</div>
|
||||
<main>
|
||||
<div class="topbar"></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>
|
||||
main{
|
||||
|
@ -20,4 +122,69 @@
|
|||
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>
|
Loading…
Reference in New Issue