Upload 754 files

93871a1 verified over 1 year ago

6.32 kB

	<!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; /* Hide overflow from the background elements */
	background-color: #78aaff; /* Blue background color */
	overflow: hidden; /* Hide overflow from the background elements */
	}

	.container {
	text-align: center;
	position: relative;
	z-index: 2; /* Ensure content appears above the background */
	}

	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; /* Ensure text content appears above the LED chaser */
	padding: 20px;
	backdrop-filter: none; /* Disable backdrop filter for text content */
	}

	.contact-details p {
	backdrop-filter: none; /* Disable backdrop filter for contact details text */
	}


	.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); /* Frosted glass effect */
	border-radius: 10px;
	backdrop-filter: blur(10px); /* Apply blur effect */
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
	}

	.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); /* Apply blur effect */
	background-color: rgba(255, 255, 255, 0.5); /* Frosted glass effect */
	animation: chaserAnimation 4s linear infinite; /* LED chaser animation */
	}

	@keyframes chaserAnimation {
	0% {
	border-color: #ff0;
	}
	50% {
	border-color: #0f0;
	}
	100% {
	border-color: #ff0;
	}
	}


	/* Styles for the background */
	.bg {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1; /* Ensure background is behind the content */
	}

	.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> <!-- LED chaser animation -->
	<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>