Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Craig Mills authored and Craig Mills committed Sep 13, 2024
0 parents commit aa2da24
Showing 1 changed file with 376 additions and 0 deletions.
376 changes: 376 additions & 0 deletions opennature.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,376 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenNature</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:300,400&family=Playfair+Display:700&display=swap" rel="stylesheet">
<style>
/* Reset and basic styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
color: #333;
scroll-behavior: smooth;
background-color: #f5f5f5;
}

a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: #00aaff;
}

/* Header */
header {
background: url('https://images.unsplash.com/photo-1501004318641-b39e6451bec6?auto=format&fit=crop&w=1950&q=80') no-repeat center center/cover;
height: 100vh;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}

header::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}

header .content {
position: relative;
z-index: 1;
max-width: 800px;
padding: 20px;
}

header h1 {
font-family: 'Playfair Display', serif;
font-size: 4em;
margin-bottom: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}

header p {
font-size: 1.5em;
margin-bottom: 40px;
font-weight: 300;
}

header .cta-button {
background-color: #00aaff;
color: #fff;
padding: 15px 40px;
border: none;
border-radius: 50px;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.3s ease;
}

header .cta-button:hover {
background-color: #0088cc;
}

/* Navigation */
nav {
position: fixed;
width: 100%;
background: rgba(255, 255, 255, 0.95);
padding: 10px 0;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
color: #333;
font-weight: 500;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5px 0;
border-bottom: 2px solid transparent;
}

nav ul li a:hover {
color: #00aaff;
border-bottom: 2px solid #00aaff;
}

/* Sections */
section {
padding: 80px 20px;
max-width: 1200px;
margin: auto;
}

section:nth-child(even) {
background-color: #ffffff;
}

section:nth-child(odd) {
background-color: #f9f9f9;
}

section h2 {
font-family: 'Playfair Display', serif;
text-align: center;
margin-bottom: 40px;
font-size: 2.5em;
color: #333;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}

section p, section ul, section ol {
max-width: 800px;
margin: 0 auto 30px;
font-size: 1.2em;
color: #555;
line-height: 1.8;
font-weight: 300;
}

section ul li, section ol li {
margin-bottom: 15px;
}

/* Join Form */
#join-form {
display: flex;
flex-direction: column;
align-items: center;
}

#join-form input, #join-form textarea {
width: 100%;
max-width: 600px;
padding: 15px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
font-family: 'Open Sans', sans-serif;
background-color: #f5f5f5;
transition: border 0.3s ease;
}

#join-form input:focus, #join-form textarea:focus {
border-color: #00aaff;
outline: none;
background-color: #fff;
}

#join-form button {
background-color: #00aaff;
color: #fff;
padding: 15px 40px;
border: none;
border-radius: 50px;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 20px;
font-family: 'Open Sans', sans-serif;
}

#join-form button:hover {
background-color: #0088cc;
}

/* Footer */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 40px 20px;
}

footer p {
margin-bottom: 10px;
font-size: 1em;
}

footer a {
color: #00aaff;
text-decoration: none;
margin: 0 5px;
}

footer a:hover {
text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
header h1 {
font-size: 2.5em;
}

nav ul {
flex-direction: column;
}

nav ul li {
margin: 10px 0;
}
}

@media (max-width: 480px) {
header h1 {
font-size: 2em;
}

header p {
font-size: 1em;
}

nav ul li {
margin: 8px 0;
}

section h2 {
font-size: 2em;
}

section p, section ul, section ol {
font-size: 1em;
}
}
</style>
</head>
<body>

<!-- Navigation -->
<nav>
<ul>
<li><a href="#who-we-are">Who We Are</a></li>
<li><a href="#our-goals">Our Goals</a></li>
<li><a href="#joining">Join Us</a></li>
<li><a href="#vision">Our Vision</a></li>
</ul>
</nav>

<!-- Header -->
<header>
<div class="content">
<h1>OpenNature</h1>
<p>Connecting People and Technology to Protect Our Planet</p>
<button class="cta-button" onclick="document.getElementById('joining').scrollIntoView({ behavior: 'smooth' });">Join Us</button>
</div>
</header>

<!-- Who We Are -->
<section id="who-we-are">
<h2>Who We Are</h2>
<p>
<strong>OpenNature</strong> is a community of scientists and tech enthusiasts who care deeply about the environment. We work together to understand and protect the diversity of life on Earth using the latest technology and artificial intelligence. Our goal is to share this knowledge freely and make it a part of everyday life for everyone.
</p>
</section>

<!-- Our Goals -->
<section id="our-goals">
<h2>Our Goals</h2>
<ol>
<li><strong>Speed Up Biodiversity Research:</strong> Use technology and AI to gather and analyze information about different species and ecosystems quickly.</li>
<li><strong>Share Knowledge Freely:</strong> Make all our findings and data available to anyone, anywhere, without restrictions.</li>
<li><strong>Spread Information Everywhere:</strong> Ensure that information about biodiversity is used in businesses, schools, governments, and communities to make better decisions for our planet.</li>
</ol>
</section>

<!-- Joining OpenNature -->
<section id="joining">
<h2>Joining OpenNature</h2>
<p>
We welcome anyone who is passionate about biodiversity and technology to join us.
</p>
<form id="join-form" onsubmit="submitForm(event)">
<input type="text" id="name" name="name" placeholder="Your Name" required>
<input type="email" id="email" name="email" placeholder="Your Email" required>
<textarea id="message" name="message" rows="4" placeholder="Tell us about your interests and skills" required></textarea>
<button type="submit">Submit</button>
</form>
<p id="form-message" style="color: #00aaff; text-align: center; margin-top: 20px; font-size: 1.1em;"></p>
</section>

<!-- Our Vision -->
<section id="vision">
<h2>Our Vision</h2>
<p>
We imagine a world where:
</p>
<ul>
<li><strong>Knowledge Grows Fast:</strong> New discoveries about nature are made quickly using smart technology.</li>
<li><strong>Everyone Can Access Information:</strong> People everywhere can learn about and use biodiversity data to make better choices.</li>
<li><strong>Nature Guides Our Decisions:</strong> Businesses, governments, and communities use this information to create sustainable and healthy environments.</li>
</ul>
<p>
Together, we aim to protect the rich variety of life on our planet and ensure a healthy Earth for future generations.
</p>
</section>

<!-- Get Involved -->
<section id="get-involved">
<h2>Get Involved</h2>
<p>
Join <strong>OpenNature</strong> today and be part of a community that values science, technology, and the natural world. Let's work together to share knowledge, inspire change, and protect our planet.
</p>
<p>
<a href="http://www.opennature.org" target="_blank">Learn more and join us at www.opennature.org</a>
</p>
</section>

<!-- Footer -->
<footer>
<p>&copy; 2024 OpenNature. All rights reserved.</p>
<p>Follow us on
<a href="#" target="_blank">Twitter</a>,
<a href="#" target="_blank">Facebook</a>,
<a href="#" target="_blank">LinkedIn</a>.
</p>
</footer>

<!-- JavaScript -->
<script>
function submitForm(event) {
event.preventDefault();
// Simple form submission simulation
const name = document.getElementById('name').value;
document.getElementById('form-message').textContent = `Thank you, ${name}! We'll be in touch soon.`;
document.getElementById('join-form').reset();
}
</script>
</body>
</html>

0 comments on commit aa2da24

Please sign in to comment.