Scribd
Upload
4 views

preindex.html

Uploaded by

ronaldsaad123
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

preindex.html

Uploaded by

ronaldsaad123
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

preindex.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eco Game</title>
<link rel="stylesheet" href="style.css" />
<style>
/* General Styling */
body {
background: linear-gradient(to bottom right, #f0f4c3, #aed581);
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
color: #333;
line-height: 1.6;
display: flex;
flex-direction: column;
align-items: center;
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
header {
text-align: center;
padding: 20px;
background-color: #388e3c;
color: white;
width: 100%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
h1 {
margin: 0;
font-size: 36px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
animation: bounce 1s infinite alternatevhfhf
}

/* Content Section */
.content {
max-width: 800px;
background: rgba(255, 255, 255, 0.95);
padding: 30px;
border-radius: 15px;
margin: 20px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
animation: slideIn 0.5s ease-in-out;
}
@keyframes slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

/* Game Section */
.game-section {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
border-radius: 8px;
background-color: #f1f1f1;
border-left: 6px solid #388e3c;
transition: transform 0.3s;
position: relative;
}
.game-section:hover {
transform: translateY(-5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.game-section img {
width: 60px;
height: 60px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.game-section img:hover {
transform: scale(1.1);
}
.game-section p {
margin: 0;
font-size: 18px;
color: #333;
text-align: left;
}

/* Tooltip */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #333;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 5px;
position: absolute;
z-index: 1;
bottom: 100%; /* Position above the text */
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

/* Buttons */
a {
text-decoration: none;
}
button {
display: inline-block;
width: 300px;
padding: 15px;
margin: 20px auto;
background-color: #4caf50;
color: white;
border: none;
border-radius: 25px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #388e3c;
transform: scale(1.05);
}
button:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.4);
}

/* Footer */
footer {
margin-top: 20px;
padding: 10px;
background-color: #388e3c;
color: white;
width: 100%;
text-align: center;
}
</style>
<script>
// Function to navigate to a new page
function goToNewPage() {
window.location.href = "newpage.html";
}

// Confetti effect function


function launchConfetti() {
// Create a basic confetti effect
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.position = 'fixed';
confetti.style.left = `${Math.random() * 100}%`;
confetti.style.top = `${Math.random() * 100}%`;
confetti.style.width = '10px';
confetti.style.height = '10px';
confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%,
50%)`;
confetti.style.animation = 'fall 1s linear infinite';
document.body.appendChild(confetti);

setTimeout(() => confetti.remove(), 1000); // Remove after animation


}

// Confetti animation
@keyframes fall {
to { transform: translateY(100vh); opacity: 0; }
}
</script>
</head>
<body>
<header>
<h1>The Green Revolution</h1>
</header>

<div class="content">
<!-- Game Section -->
<div class="game-section">
<!-- Image of a tree icon (Recommended type: PNG or SVG of a tree
planting or nature icon) -->
<img src="https://th.bing.com/th/id/R.26b3fae2294965501b7266ae7bc230a2?
rik=0H9%2bCRG3v6zQTw&riu=https%3a%2f%2ffanyv88.com%3a443%2fhttp%2fclipart-library.com%2fimages_k%2fglobe-
transparent%2fglobe-transparent-
25.jpg&ehk=Ceb3nL7yXl9BRvt3ZBWjST3DB8fguynsMTgSlozJWn4%3d&risl=&pid=ImgRaw&r=0"
alt="Tree planting icon">
<p><strong>What our planet faces daily</strong>: Each year, an
estimated 15 billion trees are cut down worldwide, according to the World Resources
Institute and related environmental research. This translates to approximately 1.25
billion trees lost each month. Deforestation rates vary significantly by region,
season, and economic activity. Human activities, including the increasing frequency
of forest fires, have caused severe environmental damage and the destruction of
countless trees.

Many industries, especially those that rely on resources like coal,


oil, and natural gas, are heavily dependent on forests for raw materials. In
coastal regions, some industries discharge waste that may contain acidic or basic
substances, polluting water sources and harming aquatic life. Urban areas near
forests often rely on forest resources, sometimes leading to excessive tree
cutting. This over-reliance makes these towns and cities more susceptible to forest
fires and other natural disasters. </p>
</div>

<!-- Tooltip with environmental info -->


<div class="tooltip">
<button onclick="launchConfetti()">Did You Know?</button>
<span class="tooltiptext">Deforestation has far-reaching impacts on
biodiversity, climate, and human life.</span>
</div>

<!-- Navigation Buttons -->


<a href="solution.html">
<button onclick="launchConfetti()">Next</button>
</a>
<a href="index.html">
<button onclick="goToNewPage()">Go Back</button>
</a>
</div>

<footer>
<p>&copy; 2024 Eco Game | All rights reserved.</p>
</footer>
</body>
</html>

You might also like