Elementor #8789 - Info Fusion Hub

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Creative Agency – White Lamp Edition</title>
<style>
/* 1. Global Setup */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
background-color: #0d0b21; /* Deep dark blue */
font-family: ‘Segoe UI’, Arial, sans-serif;
color: #ffffff; /* All text is WHITE */
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}

/* 2. Navigation */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px 8%;
width: 100%;
z-index: 100;
}

.logo { font-weight: bold; font-size: 22px; letter-spacing: 1px; color: #ffffff; }

.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
text-decoration: none;
color: #ffffff;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
opacity: 0.8;
}

.btn-login {
background: #ffffff;
color: #0d0b21 !important;
padding: 8px 25px;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
}

/* 3. Hero Layout (Responsive) */
.hero {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 8% 80px;
flex: 1;
flex-wrap: wrap;
gap: 50px;
}

/* 4. Left Content: White & Cyan Text */
.hero-text { flex: 1.2; min-width: 320px; }

.hero-text h1 {
font-family: ‘Georgia’, serif;
font-size: clamp(50px, 8vw, 100px);
line-height: 0.9;
margin-bottom: 10px;
color: #ffffff;
font-weight: 900;
}

.hero-text h2 {
font-size: clamp(18px, 2.5vw, 26px);
color: #00e5ff; /* Neon Cyan */
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 25px;
font-weight: 800;
}

.hero-text p {
font-size: 14px;
line-height: 1.8;
color: #d1d1e0;
margin-bottom: 35px;
max-width: 460px;
}

.btn-learn {
display: inline-block;
border: 2px solid #ffffff;
padding: 12px 35px;
color: #ffffff;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
font-size: 13px;
}

/* 5. Right Side: WHITE Lamp, Light, and V Design */
.hero-visual {
flex: 1;
min-width: 350px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 500px;
}

/* THE WHITE HANGING LAMP */
.lamp-assembly {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.cord {
width: 2px;
height: 110px;
background: #ffffff; /* LAMP CORD IS NOW WHITE */
opacity: 0.9;
}

.lamp-head {
width: 70px;
height: 35px;
background: #ffffff; /* LAMP HEAD IS NOW WHITE */
border-radius: 35px 35px 0 0;
position: relative;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); /* Subtle white glow */
}

/* THE GLOWING LIGHT BEAM */
.light-beam {
width: 280px;
height: 400px;
background: linear-gradient(to bottom, rgba(0, 229, 255, 0.35) 0%, transparent 80%);
clip-path: polygon(45% 0%, 55% 0%, 100% 100%, 0% 100%);
filter: blur(8px);
margin-top: -1px;
z-index: 1;
}

/* FLOATING NEON V */
.v-letter {
font-size: clamp(160px, 15vw, 220px);
font-weight: 900;
background: linear-gradient(to bottom, #4fc3f7, #00e5ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 25px rgba(0, 229, 255, 0.6));
z-index: 5;
position: absolute;
bottom: 120px;
animation: floatV 3.5s ease-in-out infinite;
}

/* 3D PODIUM STEPS */
.podium {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
position: relative;
z-index: 4;
margin-bottom: 20px;
}

.step {
background: linear-gradient(to bottom, #1e88e5, #00e5ff);
border-radius: 50%;
box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}

.s1 { width: clamp(180px, 20vw, 220px); height: 50px; z-index: 10; background: #00e5ff; }
.s2 { width: clamp(260px, 30vw, 320px); height: 65px; margin-top: -35px; opacity: 0.8; z-index: 9; }
.s3 { width: clamp(340px, 40vw, 450px); height: 80px; margin-top: -45px; opacity: 0.4; z-index: 8; }

/* Animation */
@keyframes floatV {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}

/* 6. Mobile Tweaks */
@media (max-width: 850px) {
nav { padding: 25px 5%; flex-direction: column; gap: 20px; }
.hero { text-align: center; justify-content: center; padding-top: 40px; }
.hero-text p { margin: 0 auto 30px; }
.hero-visual { transform: scale(0.85); margin-top: 40px; height: 450px; }
.nav-links { display: none; }
}
</style>
</head>
<body>

<nav>
<div class=”logo”>LOGO HERE</div>
<div class=”nav-links”>
<a href=”#”>Home</a>
<a href=”#”>About Us</a>
<a href=”#”>Services</a>
<a href=”#”>Contact</a>
<a href=”#” class=”btn-login”>LOGIN</a>
</div>
</nav>

<main class=”hero”>
<div class=”hero-text”>
<h1>Creative</h1>
<h2>Corporate Agency</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
<a href=”#” class=”btn-learn”>LEARN MORE</a>
</div>

<!– Floating V –>
<div class=”v-letter”>V</div>

<!– 3D Podium –>
<div class=”podium”>
<div class=”step s1″></div>
<div class=”step s2″></div>
<div class=”step s3″></div>
</div>
</div>
</main>

</body>
</html>