Elementor #8743 - 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>Landing Page UI Design | InfoFusion Hubs</title> <!– Google Fonts for Bold Typography –> <link href=”https://fonts.googleapis.com” rel=”stylesheet”> <style> /* Base Reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: ‘Poppins’, sans-serif; } body { background-color: #0d0d0d; min-height: 100vh; display: flex; justify-content: center; align-items: center; color: #ffffff; padding: 10px; } .container { width: 95%; max-width: 1200px; height: 90vh; background: #000000; border-radius: 40px; position: relative; padding: 60px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 100px rgba(80, 50, 255, 0.1); } nav { display: flex; justify-content: space-between; align-items: center; z-index: 10; } .logo { display: flex; align-items: center; gap: 10px; font-family: ‘Montserrat’, sans-serif; font-weight: 900; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; } .logo-symbol { width: 30px; height: 30px; background: white; clip-path: polygon(0 0, 100% 50%, 0 100%); } .nav-links { display: flex; list-style: none; gap: 30px; } .nav-links a { text-decoration: none; color: #888; font-size: 10px; font-weight: 600; letter-spacing: 1px; transition: 0.3s; } .nav-links a:hover { color: #fff; } .btn-signin { background: #4A00E0; color: #fff; padding: 10px 35px; border-radius: 30px; border: none; font-weight: bold; font-size: 11px; cursor: pointer; box-shadow: 0 4px 15px rgba(74, 0, 224, 0.4); } .hero { display: flex; flex: 1; align-items: center; justify-content: space-between; z-index: 5; position: relative; } .left-content { flex: 1.5; } .welcome-title { font-family: ‘Montserrat’, sans-serif; font-size: clamp(60px, 10vw, 120px); font-weight: 900; color: #ffffff; line-height: 1; margin-bottom: 40px; } .search-bar { width: 100%; max-width: 450px; height: 55px; border: 1px solid #333; border-radius: 40px; display: flex; align-items: center; padding: 0 25px; margin-bottom: 40px; } .search-bar input { background: transparent; border: none; color: #fff; width: 100%; outline: none; } .search-icon { font-size: 20px; color: #666; cursor: pointer; } .action-btns { display: flex; gap: 20px; } .btn-blue { background: #00AEEF; color: #fff; border: none; padding: 12px 35px; border-radius: 30px; font-weight: 800; font-size: 12px; cursor: pointer; } .btn-more { background: transparent; color: #888; border: 1px solid #333; padding: 12px 35px; border-radius: 30px; font-size: 12px; cursor: pointer; } .right-content { flex: 1; position: relative; padding-left: 50px; } .waves-background { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; z-index: -1; pointer-events: none; } /* ✅ ONLY CHANGE HERE */ .landing-text h2 { font-size: 45px; font-weight: 400; margin-bottom: 20px; color: #ffffff; } .landing-text p { font-size: 12px; color: #777; line-height: 1.8; max-width: 350px; } .mouse { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 25px; height: 45px; border: 2px solid #333; border-radius: 15px; display: flex; justify-content: center; padding-top: 8px; } .wheel { width: 4px; height: 8px; background: #4A00E0; border-radius: 2px; animation: scroll 1.5s infinite; } @keyframes scroll { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(15px); opacity: 0; } } @media (max-width: 1024px) { .nav-links { display: none; } .container { height: auto; padding: 40px; border-radius: 20px; } .hero { flex-direction: column; text-align: center; } .right-content { padding-left: 0; margin-top: 60px; } .search-bar { margin: 0 auto 40px; } .action-btns { justify-content: center; } .landing-text p { margin: 0 auto; } .waves-background { width: 500px; height: 500px; } } @media (max-width: 600px) { .welcome-title { font-size: 45px; } .action-btns { flex-direction: column; width: 100%; } .btn-blue, .btn-more { width: 100%; } } </style> </head> <body> <div class=”container”> <nav> <div class=”logo”> <div class=”logo-symbol”></div> TEMPLATE <br> DSGN </div> <ul class=”nav-links”> <li><a href=”#”>ABOUT</a></li> <li><a href=”#”>DOWNLOAD</a></li> <li><a href=”#”>PRICING</a></li> <li><a href=”#”>FEATURES</a></li> <li><a href=”#”>CONTACT</a></li> </ul> <div class=”nav-right”> <button class=”btn-signin”>SIGN IN</button> </div> </nav> <div class=”hero”> <div class=”waves-background”> <svg viewBox=”0 0 500 500″> <circle cx=”250″ cy=”250″ r=”120″ stroke=”#4A00E0″ fill=”none” opacity=”0.4″ /> <circle cx=”250″ cy=”250″ r=”160″ stroke=”#8E2DE2″ fill=”none” opacity=”0.3″ /> <circle cx=”250″ cy=”250″ r=”200″ stroke=”#00AEEF” fill=”none” opacity=”0.2″ /> </svg> </div> <div class=”left-content”> <h1 class=”welcome-title”>Welcome.</h1> <div class=”search-bar”> <input type=”text” placeholder=””> <span class=”search-icon”>🔍</span> </div> <div class=”action-btns”> <button class=”btn-blue”>FREE TRIAL</button> <button class=”btn-more”>see more</button> </div> </div> <div class=”right-content”> <div class=”landing-text”> <h2>Landing page.</h2> <p>Lorem ipsum dolor sit amet…</p> </div> </div> </div> <div class=”mouse”> <div class=”wheel”></div> </div> </div> </body> </html>