-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathabout.html
105 lines (87 loc) · 4.77 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<title>About</title>
</head>
<body>
<!--Header section start-->
<header class="header backfade">
<div class="logo-title fadeinfall">
<img id="logo" src="images/logo.png" alt = "logo">
<h1>MetaParks</h1>
</div>
<nav class="navbar fade">
<!-- home, about, interactive map, theme -->
<a href = "index.html"> Home </a>  |  
<a href = "about.html">About </a>  |  
<a href = "index.html#int_map"> Interactive Map </a>
</nav>
</header>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// Get the button:
let mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
<main>
<section id="title">
<h1>About <span>Us</span></h1>
<p>We are MetaMakers</p>
</section>
<section id="motivation">
<h2>Our Motivation</h2>
<p>India’s vast and diverse landscape, along with its enormous population, makes it essential for us to invest time in understanding and appreciating the country’s wildlife conservation efforts. The importance of preserving our natural heritage cannot be overstated. By raising awareness about India's national parks and promoting their significance, we aim to contribute to the broader conversation on conservation.
<p>Through this website, we strive to spread knowledge about the value of these natural spaces and inspire others to join us in supporting their preservation. Our mission is to highlight the beauty and importance of India’s national parks, ensuring that they continue to thrive for future generations.</p>
</p>
<img src="images/2d9b6d43fa0beeeb954b97ad60afc911.jpg" alt="Motivation Image 1" class="side-image">
</section>
<section id="team">
<h2>Meet the MetaMakers</h2>
<p>We are a passionate team of students driven by our love for nature and technology.
<p><strong>Riddhi Pankhade:</strong> Riddhi played a crucial role in designing the website, bringing her creativity and technical skills to the project. Her contribution has been instrumental in shaping the user experience and visual appeal of our site.</p>
<p><strong>Akanksha Jharia:</strong> Akanksha has been instrumental in enhancing the website’s design by integrating engaging animations and creating an interactive map. Her innovative approach has significantly improved user experience, making the site more dynamic and user-friendly.</p>
<p><strong>Renu Gunavare:</strong> Renu is our key resource person, providing invaluable information and resources that have been essential for the development of the site. Her extensive knowledge and the images she provided have greatly facilitated our work, ensuring that the content is both accurate and engaging.</p>
</p>
<img src="images/0f27380f7bd1814c45b09b1a49db9a29.jpg" alt="Team Image 1" class="side-image">
</section>
</main>
<footer>
<div class="footer">
<div class = "Con-text">
<h2>Contact Us</h2>
<p><span class="contact-info">Email:</span> [email protected]</p>
<p><span class="contact-info">Phone:</span> +91 34573XXXXX</p>
<p><span class="contact-info">Address:</span>Pimpri Chinchwad, Maharashtra, India</p>
</div>
<nav class="socialMedia">
<ul id="social">
<li><a href="https://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://linkedin.com" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://github.com" target="_blank"><i class="fa fa-github"></i></a></li>
<li><a href="https://instagram.com" target="_blank"><i class="fa fa-instagram"></i> </a></li>
</ul>
</nav>
<div class="footerMessage">
<p>Thank you for visiting our site!</p>
<p>© 2024 MetaMakers. All rights reserved.</p>
</div>
</div>
</footer>
</html>