<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing UI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
/* PRICING SECTION */
.pricing-section *{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
color:#fff;
}
.pricing-section{
background:
radial-gradient(circle at 20% 10%, #5a2bff, transparent 40%),
radial-gradient(circle at 80% 90%, #ff2bd6, transparent 40%),
#050816;
padding-bottom:60px;
}
/* HERO */
.pricing-section .hero{
text-align:center;
padding:90px 20px 50px;
}
.pricing-section .hero span{opacity:0.7;}
.pricing-section .hero h1{
font-size:48px;
margin:10px 0;
}
.pricing-section .hero p{opacity:0.7;}
/* SWITCH */
.pricing-section .switch{
margin-top:25px;
display:inline-flex;
background:rgba(255,255,255,0.08);
padding:6px;
border-radius:40px;
}
.pricing-section .switch div{
padding:10px 25px;
border-radius:30px;
opacity:0.7;
}
.pricing-section .active{
background:linear-gradient(90deg,#6a5cff,#ff4ecd);
opacity:1 !important;
}
/* CARDS */
.pricing-section .container{
display:flex;
justify-content:center;
gap:30px;
padding:60px 20px;
flex-wrap:wrap;
}
.pricing-section .card{
flex:1 1 300px;
max-width:320px;
border-radius:25px;
padding:30px;
position:relative;
overflow:hidden;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(25px);
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 20px 50px rgba(0,0,0,0.5);
transition:0.3s;
}
.pricing-section .card:hover{
transform:translateY(-10px) scale(1.02);
}
/* GLOW */
.pricing-section .card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,#6a5cff,#ff4ecd);
opacity:0.25;
filter:blur(60px);
}
.pricing-section .card::after{
content:"";
position:absolute;
top:-30px;
left:-20%;
width:140%;
height:140px;
background:radial-gradient(circle at 30% 50%, rgba(255,255,255,0.9), transparent 60%);
filter:blur(20px);
opacity:0.6;
}
.pricing-section .card *{
position:relative;
z-index:2;
}
/* DARK */
.pricing-section .card.dark::before{
background:linear-gradient(135deg,#0f172a,#6a5cff);
}
/* FEATURED */
.pricing-section .featured{
transform:scale(1.08);
border:2px solid #6a5cff;
}
.pricing-section .featured:hover{
transform:scale(1.1) translateY(-10px);
}
/* TEXT */
.pricing-section .card h2{
margin-top:40px;
font-size:24px;
}
.pricing-section .card p{
opacity:0.7;
margin:10px 0 20px;
}
.pricing-section .price{
font-size:40px;
margin:10px 0;
}
.pricing-section .old{
text-decoration:line-through;
opacity:0.4;
margin-right:10px;
}
/* LIST */
.pricing-section ul{
list-style:none;
margin-top:20px;
}
.pricing-section ul li{
margin:10px 0;
opacity:0.9;
}
/* BUTTON */
.pricing-section .btn{
margin-top:25px;
padding:14px;
text-align:center;
border-radius:30px;
background:linear-gradient(90deg,#6a5cff,#ff4ecd);
}
.pricing-section .dark .btn{
background:linear-gradient(90deg,#6a5cff,#00f0ff);
}
</style>
</head>
<body>
<!-- PRICING SECTION ONLY -->
Pro Access
<h1>Get all Craftwork<br>assets for free</h1>
<p>Unlimited access to all Craftwork stuff</p>
Month
Quarter
Year
<h2>Starter</h2>
<p>Best for beginners</p>
$99 $49
<ul>
<li>✔ Basic access</li>
<li>✔ Limited downloads</li>
</ul>
Get Started
<h2>Individual</h2>
<p>For freelancers</p>
$149 $83
<ul>
<li>✔ Unlimited access</li>
<li>✔ Commercial use</li>
</ul>
Subscribe
<h2>Company</h2>
<p>For teams</p>
$199 $111
<ul>
<li>✔ Team license</li>
<li>✔ Full access</li>
</ul>
Go Pro
</body>
</html>]]>
