Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add new html page for planting a tree and add more images for goals sections #174

Closed
wants to merge 1 commit into from
Closed

add new html page for planting a tree and add more images for goals sections #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,7 @@ nav .nav_buttons {
.Goals {
width: 80vw;
margin: 0px auto;
margin-bottom: 2em;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
Expand Down Expand Up @@ -526,7 +526,7 @@ nav .nav_buttons {
flex-direction: column;
justify-content: center;
max-width: 300px;
margin: 5px 10px;
margin-top: 30px;
padding: 10px 5px;
gap: 4%;
font-size: 14px;
Expand All @@ -536,6 +536,7 @@ nav .nav_buttons {
.Goals .images:hover {
box-shadow: 0px 4px 5px rgba(24, 186, 12, 0.377);
transform: scale(1.05);
cursor: pointer;
}

.Goals .images img {
Expand Down
54 changes: 53 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
</div>
<div class="page_buttons">
<button class="one">VIEW PROGRESS</button>
<button
<button id="plant"
class="two showPopupButton"
data-popup-trigger="cover-page"
>
Expand Down Expand Up @@ -176,6 +176,26 @@
/><span>Bhutan</span></a
>
</div>
<div class="country_images">
<a
href="https://en.wikipedia.org/wiki/Singapore"
target="_blank"
><img
src="https://img.freepik.com/free-photo/merlion-statue-cityscape-singapore_335224-666.jpg?size=626&ext=jpg&ga=GA1.1.774392908.1729423143&semt=ais_hybrid"
alt="Singapore"
/><span>Singapore</span></a
>
</div>
<div class="country_images">
<a
href="https://en.wikipedia.org/wiki/China"
target="_blank"
><img
src="https://img.freepik.com/premium-photo/wall-with-chinese-symbol-it-word-china-it_1199278-33131.jpg?ga=GA1.1.774392908.1729423143&semt=ais_hybrid"
alt="China"
/><span>China</span></a
>
</div>
<div class="country_images">
<a
href="https://en.wikipedia.org/wiki/Sri_Lanka"
Expand All @@ -196,6 +216,17 @@
/><span>Malaysia</span></a
>
</div>
<div class="country_images">
<a
href="https://en.wikipedia.org/wiki/Australia"
target="_blank"
><img
src="https://img.freepik.com/free-photo/beautiful-shot-sydney-harbor-bridge-with-light-pink-blue-sky_181624-16041.jpg?size=626&ext=jpg"
alt="Australia"
/><span>Australia</span></a
>
</div>

<div class="country_images">
<a
href="https://en.wikipedia.org/wiki/Indonesia"
Expand Down Expand Up @@ -284,6 +315,27 @@
efforts to 30+ countries across the world.
</div>
</div>
<div class="images">
<img src="https://www.shutterstock.com/image-photo/farmers-hands-planted-saplings-on-600nw-2027021471.jpg" width="200px" />
<div class="text">
<span>AFFORESTATION<br /><br /></span>Afforestation is the development of forest by planting trees on waste land. The main objective of afforestation is to control deforestation and prevent soil erosion.
</div>
</div>
<div class="images">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyrC0d0TIG7MsdPL-dl77mcBp4mGsKNVR0_w&s" width="200px" />
<div class="text">
<span>HEALTH BENEFITS<br /><br /></span>Trees
can improve physical and mental health, reduce stress, and encourage outdoor activities.
</div>
</div>
<div class="images">
<img src="https://econation.one/wp-content/uploads/2015/08/Sustainable_development.jpg" width="200px" />
<div class="text">
<span>SOCIAL AND ECONOMIC BENEFITS<br /><br /></span>Trees can reduce crime rates,
strengthen community ties, and increase physical activity.
They can also raise house prices and reduce green-space maintenance costs.
</div>
</div>
<div class="images">
<img src="./assets/images/Awareness.png" width="200px" />
<div class="text">
Expand Down
135 changes: 135 additions & 0 deletions planttree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plant a tree</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 0;
}

.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #333;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
margin-top: 40px;
}

h1 {
font-size: 2em;
color: #4CAF50;
text-align: center;

}

p {
text-align: center;

font-size: 1.1em;
margin-bottom: 40px;
}

form {
display: flex;
flex-direction: column;
gap: 20px;


}

label {
font-size: 1.1em;
color: #fff;
}

input, select, textarea {
padding: 10px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}

button {
background-color: #4CAF50;
color: white;
padding: 15px;
font-size: 1.2em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #45a049;
}

.back-button {
margin-top: 20px;
text-align: center;
}

.back-button a {
text-decoration: none;
color: #4CAF50;
font-size: 1.1em;
}

.back-button a:hover {
color: #45a049;
}
</style>
</head>
<body>

<div class="container">
<h1>Register for Planting trees</h1>

<form id="registrationForm">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>

<label for="Event-Name">Number of trees to plant:</label>
<input type="number" id="number" name="number" required>

<label for="volunteer-role">Location:</label>
<input type="text" id="location" name="location" required>

<label for="message">Additional Information (optional):</label>
<textarea id="message" name="message" rows="4"></textarea>

<button type="submit">Submit</button>
</form>

<div class="back-button">
<a href="index.html">← Back</a>
</div>
</div>
<script>
// JavaScript to handle form submission and display success message
document.getElementById('registrationForm').addEventListener('submit', function(event) {
// Prevent form from actually submitting
event.preventDefault();

// Show success message
alert("Registered successfully, an email is sent to your mail.");
});
</script>
</body>
</html>
47 changes: 28 additions & 19 deletions scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,37 @@
const showPopupButtons = document.querySelectorAll(".showPopupButton");
// const showPopupButtons = document.querySelectorAll(".showPopupButton");
const plant= document.getElementById('plant');
const closePopupButton = document.querySelector(".closePopupButton");
const popup = document.querySelector(".popup");
const overlay = document.getElementById("overlay");
// showPopupButton.addEventListener("click", function() {
// popup.style.display = "block";
// overlay.style.display = "block";
// });
showPopupButtons.forEach((button) => {
button.addEventListener("click", function () {
// Determine which button was clicked and show the popup accordingly
const trigger = button.getAttribute("data-popup-trigger");
if (
trigger === "donate" ||
trigger === "cover-page" ||
trigger === "navbar"
) {
popup.style.display = "block";
overlay.style.display = "block";
}
});
});
// showPopupButtons.forEach((button) => {
// button.addEventListener("click", function () {
// // Determine which button was clicked and show the popup accordingly
// const trigger = button.getAttribute("data-popup-trigger");
// if (
// trigger === "donate" ||
// trigger === "cover-page" ||
// trigger === "navbar"
// ) {
// popup.style.display = "block";
// overlay.style.display = "block";
// }
// });
// });

closePopupButton.addEventListener("click", function () {
popup.style.display = "none";
overlay.style.display = "none";
});
// closePopupButton.addEventListener("click", function () {
// popup.style.display = "none";
// overlay.style.display = "none";
// });



plant.addEventListener("click",function(){
window.location.href="/Tree2Hope/planttree.html";
})


document.getElementById("openMenu").addEventListener("click", function () {
Expand Down Expand Up @@ -91,3 +98,5 @@

window.addEventListener('scroll', handleScroll);