GENMAIN

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HoverTide</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0; /* Light Gray */
color: #333;
}
header {
background-color: #007bff; /* Blue */
color: #fff;
padding: 20px;
text-align: center;
transition: background-color 0.3s ease;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
header h1 {
margin: 0;
font-size: 36px;
transition: color 0.3s ease;
}
header p {
margin: 10px 0;
font-size: 18px;
transition: color 0.3s ease;
}
.navbar {
background-color: #343a40; /* Dark Gray */
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 20px;
text-decoration: none;
transition: background-color 0.3s ease;
}
.navbar a:hover {
background-color: #555; /* Darker Gray on hover */
}
.container {
max-width: 1200px;
margin: 100px auto 20px auto; /* Adjusted margin to accommodate the
header */
padding: 20px;
}
/* Other styles remain unchanged */
</style>
</head>
<body>
<header>
<h1>HoverTide</h1>
<p>Where the seas meet the land!</p>
</header>
<div class="navbar">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="container">
<div class="main-content">
<div class="center-area">
<h2>About Our Product</h2>
<p>HoverTide is the ultimate fusion of land and water
transportation, revolutionizing the way you move through diverse terrains. Powered
by sustainable electricity, HoverTide seamlessly transitions between land and
water, offering an exhilarating experience for adventurers and commuters alike.</p>
<h2>Key Features</h2>
<ul>
<li>Dual-Terrain Versatility: HoverTide effortlessly glides
over both land and water, providing unmatched flexibility in transportation
options.</li>
<li>Electric Propulsion: Utilizing eco-friendly electric power,
HoverTide ensures minimal environmental impact while delivering maximum
performance.</li>
<li>Solar Compatibility: Integrated solar panels harness the
sun's energy, providing an environmentally sustainable charging option for extended
rides and exploration</li>
<li>With its sleek and ergonomic design, HoverTide offers
stability, control, and comfort, enhancing the rider's experience across various
surfaces.</li>
</ul>
</div>
<h2>Contact Us</h2>
<button id="contactBtn">Contact Us</button>
</div>


<div class="sales-section">
<h2>Sales</h2>
<p>Number of Sales: <span id="salesCounter">0</span></p>
</div>
</div>
<footer>
<p>© 2024 Product Promotion. All rights reserved.</p>
</footer>


<div id="popupBox" class="popup">
<span id="popupClose" class="popup-close">×</span>
<h2>Contact Information</h2>
<p>Email: your@email.com</p>
<p>Phone: +1234567890</p>
<p>Instagram: <a href="https://www.instagram.com/HoverTide"
target="_blank">@HoverTide</a></p>
</div>


<script>
// Function to generate a random number between min and max
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to update sales count

function updateSalesCount() {
var salesCounter = document.getElementById('salesCounter');
var currentCount = parseInt(salesCounter.innerText);
var increment = getRandomNumber(1, 5); // Random increment between 1
and 5
// Update sales count with a random increment

salesCounter.innerText = currentCount + increment;
}
// Set initial sales count

var salesCounter = document.getElementById('salesCounter');
salesCounter.innerText = 2369;
// Update sales count every 5 seconds

setInterval(updateSalesCount, 5000);
// Array of product descriptions

var productDescriptions = [
"Description of Product 1",
"Description of Product 4"
];
// Array of product images

var productImages = [
"https://via.placeholder.com/400",
"https://via.placeholder.com/400"
];
// Event listener for product clicks

document.addEventListener('DOMContentLoaded', function() {
var products = document.querySelectorAll('.product');
products.forEach(function(product, index) {
product.addEventListener('click', function() {
showProductDetails(index);
});
});
});
// Function to display product details

function showProductDetails(index) {
var productDetailsSection =
document.getElementById('productDetailsSection');
var productDescription = document.getElementById('productDescription');
var productImage = document.getElementById('productImage');
var goBackBtn = document.getElementById('goBackBtn');
productDescription.innerHTML = '<h2>Product ' + (index + 1) +

'</h2><p>' + productDescriptions[index] + '</p>';
productImage.src = productImages[index];
productDetailsSection.style.display = 'block';
goBackBtn.addEventListener('click', function() {
productDetailsSection.style.display = 'none';
});
}
// Form submission handler

document.getElementById('orderForm').addEventListener('submit',
function(event) {
event.preventDefault(); // Prevent form submission
// Redirect to www.youtube.com
window.location.href = 'https://www.youtube.com';
});
document.getElementById('contactBtn').addEventListener('click', function()
{
document.getElementById('popupBox').style.display = 'block';
});
document.getElementById('popupClose').addEventListener('click', function()
{
document.getElementById('popupBox').style.display = 'none';
});
</script>
</body>
</html>

GENMAIN

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GENMAIN

Uploaded by

Copyright:

Available Formats

<!

// Function to update sales count

// Update sales count with a random increment

// Set initial sales count

// Update sales count every 5 seconds

// Array of product descriptions

// Array of product images

// Event listener for product clicks

// Function to display product details

productDescription.innerHTML = '<h2>Product ' + (index + 1) +

// Form submission handler

You might also like