|
|
<!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> |
|
|
|
