...
<div class="cards-container">
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, quidem?</p>
<div class="card-footer">
<button class="card-button">Read More</button>
<div class="card-icon">→</div>
</div>
</div>
</div>
...
<style>
.background {
position: fixed;
inset: 0;
/* z-index: -1; */
}
.gradient-blob {
position: absolute;
width: 120vw;
height: 120vw;
border-radius: 50%;
opacity: 0.25;
filter: blur(100px);
animation: float 18s infinite ease-in-out alternate;
}
.gradient-blob:nth-child(1) {
background: linear-gradient(135deg, #ff3366, #3366ff);
top: -50%;
left: -30%;
}
.gradient-blob:nth-child(2) {
background: linear-gradient(135deg, #33ddff, #3366ff);
bottom: -50%;
right: -30%;
}
.gradient-blob:nth-child(3) {
background: linear-gradient(135deg, #ffcc00, #ff3366);
top: 40%;
left: 50%;
}
@keyframes float {
0% {
transform: translate(0, 0) scale(1);
}
100% {
transform: translate(3%, -3%) scale(1.05);
}
}
main {
max-width: 1200px;
margin: auto;
padding: 5vh 1rem;
position: relative;
z-index: 1;
}
h1 {
font-size: 3rem;
text-align: center;
color: White;
font-weight: 800;
}
.subtitle {
text-align: center;
font-size: 1.1rem;
opacity: 0.8;
margin-bottom: 3rem;
}
.cards-container {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(12px);
transition: transform 0.4s ease, box-shadow 0.4s ease;
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 40px rgba(255, 255, 255, 0.2);
}
.card h2 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
background: linear-gradient(to right, #fff, #aaa);
-webkit-background-clip: text;
color: transparent;
}
.card p {
font-size: 0.95rem;
opacity: 0.85;
margin-bottom: 1.5rem;
}
.cardfooter {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-button {
padding: 0.6rem 1.2rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 30px;
color: #fff;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
position: relative;
overflow: hidden;
}
.card-button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.card-icon {
font-size: 1.25rem;
opacity: 0.7;
transition: transform 0.3s ease;
}
.card:hover .card-icon {
transform: translateX(5px);
opacity: 1;
}
</style>