<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Glass Layout</title>
<style>
/* Background aur Base Setup */
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: radial-gradient(circle at top right, #9d50bb, #6e48aa),
radial-gradient(circle at bottom left, #4a00e0, #8e2de2);
background-color: #5c258d;
/* Image wala dot pattern */
background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px);
background-size: 30px 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow-x: hidden;
color: #ffffff; /* Default white text */
}
/* Grid Layout */
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: 1100px;
width: 90%;
padding: 50px 0; /* Upar niche thori space di hai heading hatne ke baad */
}
/* Glassmorphism Card */
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 40px;
padding: 50px 40px;
text-align: left;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.15);
}
/* Icon Styling */
.icon {
font-size: 2.5rem;
margin-bottom: 15px;
display: block;
}
/* Heading Text Color - Pure White */
h2 {
font-size: 2.4rem;
margin-bottom: 15px;
font-weight: 700;
color: #ffffff !important;
}
/* Description Text Color - Pure White */
p {
font-size: 1.05rem;
line-height: 1.6;
color: #ffffff !important;
margin-bottom: 35px;
opacity: 1;
}
/* Rounded Button */
.btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.4);
padding: 12px 35px;
border-radius: 50px;
color: #ffffff;
text-decoration: none;
font-size: 0.95rem;
font-weight: 600;
transition: 0.3s ease;
display: inline-block;
}
.btn:hover {
background: #ffffff;
color: #5c258d;
}
/* Mobile Responsive */
@media (max-width: 850px) {
.container { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- Card 1 -->
👑
<h2>Vorteil 1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a href="#">Learn more</a>
<!-- Card 2 -->
💠
<h2>Vorteil 2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a href="#">Learn more</a>
<!-- Card 3 -->
🌿
<h2>Vorteil 3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a href="#">Learn more</a>
<!-- Card 4 -->
⚙️
<h2>Vorteil 4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<a href="#">Learn more</a>
</body>
</html>]]>
