| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Quantum Grove</title> |
| <link rel="icon" href="favicon.ico" type="image/x-icon"> |
| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| overflow: hidden; |
| background-color: #78aaff; |
| overflow: hidden; |
| } |
| |
| .container { |
| text-align: center; |
| position: relative; |
| z-index: 2; |
| } |
| |
| h1 { |
| font-size: 3em; |
| color: #333; |
| margin-bottom: 20px; |
| } |
| |
| p { |
| font-size: 1.2em; |
| color: #666; |
| } |
| |
| .contact-details { |
| margin-top: 20px; |
| } |
| |
| .text-content { |
| position: relative; |
| z-index: 2; |
| padding: 20px; |
| backdrop-filter: none; |
| } |
| |
| .contact-details p { |
| backdrop-filter: none; |
| } |
| |
| |
| .contact-details a { |
| color: #007bff; |
| text-decoration: none; |
| } |
| |
| .contact-details a:hover { |
| text-decoration: underline; |
| } |
| .contact-details { |
| margin-top: 20px; |
| padding: 20px; |
| background-color: rgba(255, 255, 255, 0.5); |
| border-radius: 10px; |
| backdrop-filter: blur(10px); |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); |
| } |
| |
| .led-chaser { |
| position: absolute; |
| top: -5px; |
| left: -5px; |
| width: calc(100% + 10px); |
| height: calc(100% + 10px); |
| border: 2px solid transparent; |
| border-radius: 12px; |
| backdrop-filter: blur(10px); |
| background-color: rgba(255, 255, 255, 0.5); |
| animation: chaserAnimation 4s linear infinite; |
| } |
| |
| @keyframes chaserAnimation { |
| 0% { |
| border-color: #ff0; |
| } |
| 50% { |
| border-color: #0f0; |
| } |
| 100% { |
| border-color: #ff0; |
| } |
| } |
| |
| |
| |
| .bg { |
| overflow: hidden; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 1; |
| } |
| |
| .mountain, |
| .mountain-two, |
| .mountain-three { |
| position: absolute; |
| bottom: 0; |
| border-left: 150px solid transparent; |
| border-right: 150px solid transparent; |
| border-bottom: 180px solid #7ac1e4; |
| z-index: 1; |
| } |
| |
| .mountain-two { |
| left: 80px; |
| bottom: -20px; |
| opacity: 0.3; |
| z-index: 0; |
| } |
| |
| .mountain-three { |
| left: -60px; |
| bottom: -10px; |
| opacity: 0.5; |
| z-index: 0; |
| } |
| |
| .mountain-top { |
| position: absolute; |
| right: -65px; |
| border-left: 65px solid transparent; |
| border-right: 65px solid transparent; |
| border-bottom: 77px solid #ceeaf6; |
| z-index: 2; |
| } |
| |
| .mountain-cap-1, |
| .mountain-cap-2, |
| .mountain-cap-3 { |
| position: absolute; |
| top: 70px; |
| border-left: 25px solid transparent; |
| border-right: 25px solid transparent; |
| border-top: 25px solid #ceeaf6; |
| } |
| |
| .mountain-cap-1 { |
| left: -55px; |
| } |
| |
| .mountain-cap-2 { |
| left: -25px; |
| } |
| |
| .mountain-cap-3 { |
| left: 5px; |
| } |
| |
| .cloud, |
| .cloud:before, |
| .cloud:after { |
| position: absolute; |
| width: 70px; |
| height: 30px; |
| background: #fff; |
| border-radius: 100px / 50px; |
| } |
| |
| .cloud { |
| bottom: 100px; |
| animation: cloud 50s infinite linear; |
| } |
| |
| @keyframes cloud { |
| 0% { |
| left: -100px; |
| } |
| 100% { |
| left: 1000px; |
| } |
| } |
| |
| .cloud:before { |
| content: ''; |
| left: 50px; |
| } |
| |
| .cloud:after { |
| content: ''; |
| left: 25px; |
| top: -10px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="bg"> |
| <div class="mountain"> |
| <div class="mountain-top"> |
| <div class="mountain-cap-1"></div> |
| <div class="mountain-cap-2"></div> |
| <div class="mountain-cap-3"></div> |
| </div> |
| </div> |
| <div class="mountain-two"> |
| <div class="mountain-top"> |
| <div class="mountain-cap-1"></div> |
| <div class="mountain-cap-2"></div> |
| <div class="mountain-cap-3"></div> |
| </div> |
| </div> |
| <div class="mountain-three"> |
| <div class="mountain-top"> |
| <div class="mountain-cap-1"></div> |
| <div class="mountain-cap-2"></div> |
| <div class="mountain-cap-3"></div> |
| </div> |
| </div> |
| <div class="cloud"></div> |
| </div> |
| <div class="container"> |
| <div class="led-chaser"></div> |
| <h1 class="text-content">Welcome to QuantumGrove</h1> |
| <p class="text-content">Your gateway to the future of technology.</p> |
| <div class="contact-details"> |
| <p>Contact us:</p> |
| <p>Phone: <a href="tel:+923092193555">+92 309 2193555</a></p> |
| <p>Email: <a href="mailto:info@quantumgrove.tech">info@quantumgrove.tech</a></p> |
| <p>Address: 95-X Gulberg Greens, Islamabad, Pakistan</p> |
| <p>Website: <a href="https://quantumgrove.tech">QUANTUMGROVE.TECH</a></p> |
| </div> |
| </div> |
| </body> |
| </html> |
|
|
