ourworld_web/www_circl
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
sasha-astiadi
2025-05-07 14:54:45 +02:00
parent e3d6b2f0f9
commit e1d084aca5
3 changed files with 67 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.html
View File

@@ -245,7 +245,7 @@
</fieldset>
</div>
<div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="pricing-card rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-freelancer" class="text-lg/8 font-semibold text-white">For Teams</h3>
</div>
@@ -290,7 +290,7 @@
</li>
</ul>
</div>
<div class="rounded-3xl bg-white/5 p-8 ring-2 ring-gray-400 xl:p-10">
<div class="pricing-card popular rounded-3xl bg-white/5 p-8 ring-2 ring-gray-400 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg/8 font-semibold text-white">For Companies</h3>
<p class="rounded-full bg-gray-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
@@ -336,7 +336,7 @@
</li>
</ul>
</div>
<div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="pricing-card rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg/8 font-semibold text-white">For Businesses</h3>
</div>

20
src/input.css
View File

@@ -135,6 +135,26 @@
}
@layer utilities {
.pricing-card {
@apply transition-all duration-500 hover:scale-105 hover:bg-white/5;
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
.pricing-card:hover {
box-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
}
.pricing-card.popular {
@apply transition-all duration-500 hover:scale-105 hover:bg-white/15;
box-shadow: 0 0 30px rgba(107, 114, 128, 0.3);
border: 1px solid transparent;
}
.pricing-card.popular:hover {
box-shadow: 0 0 100px rgba(107, 114, 128, 0.5);
border-color: rgba(255, 255, 255, 0.1);
}
.fade-up {
opacity: 0;
transform: translateY(30px);