Add files via upload

codegenweb · Oct 21, 2024 · 810c180 · 810c180
1 parent b3fc0eb
commit 810c180
Show file tree

Hide file tree

Showing 8 changed files with 774 additions and 0 deletions.
diff --git a/animations.css b/animations.css
@@ -0,0 +1,28 @@
+@keyframes planetAn {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bottomIn {
+  from {
+    transform: translateY(500px);
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
diff --git a/images/45.png b/images/45.png
diff --git a/images/about-img.png b/images/about-img.png
diff --git a/images/background.jpg b/images/background.jpg
diff --git a/images/projects-img.png b/images/projects-img.png
diff --git a/index.html b/index.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WildGuardians</title>
+
+  <!-- styles -->
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="animations.css">
+  <link rel="stylesheet" href="responsive.css">
+</head>
+
+<body>
+
+  <section id="hero">
+
+    <div class="section-box">
+
+      <div class="content-wrap">
+        <header>
+          <a class="header-logo"><span>wild</span>guardians</a>
+          <nav>
+            <a class="nav-items active">Home</a>
+            <a class="nav-items">about us</a>
+            <a class="nav-items">projects</a>
+            <a class="nav-items">resources</a>
+            <a class="nav-items">blog</a>
+            <a class="nav-items">contacts</a>
+          </nav>
+        </header>
+        <div class="hero-content">
+          <h3>protect</h3>
+          <h1>wildanimals</h1>
+          <img src="images/45.png" class="hero-img">
+          <button class="hero-btn">join with us</button>
+        </div>
+      </div>
+
+    </div>
+
+  </section>
+
+  <section id="about">
+    <div class="section-box">
+      <div class="content-grid">
+        <div class="left-grid">
+          <h3 class="section-sub">About us</h3>
+          <h2 class="section-title">Who we are?</h2>
+          <p>
+            At WildlifeGuardians, we are committed to the preservation and protection of endangered species worldwide.
+            Our mission is to create awareness, provide resources for conservation efforts, and take direct action to
+            save vulnerable wildlife from extinction. With over a decade of experience, our team of environmentalists,
+            biologists, and volunteers works tirelessly to protect Earth's most precious creatures and their habitats.
+          </p>
+          <button class="action-btn">Learn More</button>
+        </div>
+
+        <div class="right-grid">
+          <img src="images/about-img.png" class="about-img">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="projects">
+    <div class="section-box">
+      <div class="content-grid">
+        <div class="right-grid">
+          <img src="images/projects-img.png" class="about-img">
+        </div>
+        <div class="left-grid">
+          <h3 class="section-sub">projects</h3>
+          <h2 class="section-title">What we did?</h2>
+          <p>
+            1. Project Savannah Shield – A dedicated effort to protect the last remaining herds of African elephants
+            from poaching in Kenya’s savannah.<br><br>
+
+            2. Project Savannah Shield – A dedicated effort to protect the last remaining herds of African elephants
+            from poaching in Kenya’s savannah.<br><br>
+
+            3. Project Savannah Shield – A dedicated effort to protect the last remaining herds of African elephants
+            from poaching in Kenya’s savannah.
+          </p>
+          <button class="action-btn">more projects</button>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <section id="join-us">
+    <div class="section-box">
+
+      <div class="content-wrap">
+
+        <h3 class="section-sub">join with us</h3>
+        <h2 class="section-title">Save Wildlife, Protect Nature</h2>
+
+        <div class="join-form">
+          <input type="text" class="input-1 i1" placeholder="Your Name">
+          <input type="email" class="input-1 i2" placeholder="Your Email">
+          <input type="text" class="input-1 i3" placeholder="Your Number">
+          <input type="text" class="input-1 i4" placeholder="Your Address">
+
+          <p>Membership</p>
+          <div class="checkbox-wrap">
+            <label><input type="checkbox"> Individual</label>
+            <label><input type="checkbox"> Family</label>
+            <label><input type="checkbox"> Corporate</label>
+          </div>
+
+          <button class="join-btn">be a member</button>
+
+        </div>
+
+      </div>
+
+    </div>
+
+  </section>
+
+  <section id="footer">
+    <div class="section-box">
+      <div class="footer-grid">
+
+        <div>
+          <h3>Quick Links</h3>
+
+          <a class="footer-items f1">Home</a>
+          <a class="footer-items f2">about us</a>
+          <a class="footer-items f3">projects</a>
+          <a class="footer-items f4">resources</a>
+          <a class="footer-items f5">blog</a>
+          <a class="footer-items f6">contacts</a>
+
+        </div>
+
+        <div>
+          <h3>Contacts</h3>
+
+          <a class="footer-items f1">+1 (800) 555-WILD (9453)</a>
+          <a class="footer-items f2">+1 (888) 999-SAVE (7283)</a>
+          <a class="footer-items f3">[email protected]</a>
+          <a class="footer-items f4">1234 Forest Drive, 
+            Green Valley, CA 90210</a>
+        </div>
+
+        <div>
+          <h3>Socials</h3>
+
+          <a class="footer-items f1">facebook</a>
+          <a class="footer-items f2">youtubr</a>
+          <a class="footer-items f3">instagram</a>
+          <a class="footer-items f4">linkedin</a>
+          <a class="footer-items f5">twitter</a>
+        </div>
+
+      </div>
+
+      <p class="copyrights">© codegenweb | all rights reserved</p>
+    </div>
+  </section>
+
+</body>
+
+</html>
diff --git a/responsive.css b/responsive.css
@@ -0,0 +1,197 @@
+/* Mobile */
+@media screen and (max-width: 428px) {
+  section{
+    padding-bottom: 100px;
+    height: auto;
+  }
+  .section-box {
+    border-radius: 20px;
+    height: auto;
+    width: 90%;
+  }
+  .content-wrap {
+    padding: 20px 20px;
+  }
+  .header-logo {
+    font-size: 28px;
+    margin-bottom: 30px;
+  }
+
+  header {
+    flex-direction: column;
+  }
+  nav {
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .hero-content h3,
+  .hero-content h1 {
+    display: none;
+  }
+  .hero-img {
+    width: 100%;
+    margin-top: 20px;
+    animation: planetAn 120s linear infinite;
+  }
+  .hero-btn {
+    margin: 50px 0 20px;
+  }
+  .hero-content {
+    padding-top: 30px;
+
+  }
+
+  /* About Section */
+  .content-grid {
+    display: flex;
+    flex-direction: column;
+    padding: 20px
+  }
+  .about-img {
+    width: 100%;
+    margin: 30px 0;
+  }
+  .section-title {
+    font-size: 3rem;
+    line-height: 1.3;
+  }
+
+  .action-btn {
+    margin-bottom: 40px;
+  }
+
+  .input-1 {
+    border-radius: 50px;
+    height: 50px;
+    width: 90%;
+  }
+
+  .checkbox-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+  #join-us h2 {
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  .footer-grid {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    row-gap: 50px;
+  }
+}
+
+@media screen and (min-width: 429px) and (max-width: 1279px) {
+  section{
+    padding-bottom: 100px;
+    height: auto;
+  }
+  .section-box {
+    border-radius: 20px;
+    height: auto;
+    width: 90%;
+  }
+  .content-wrap {
+    padding: 20px 20px;
+  }
+  .header-logo {
+    font-size: 28px;
+    margin-bottom: 30px;
+  }
+
+  header {
+    flex-direction: column;
+  }
+  nav {
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .hero-content h3 {
+    font-size: 2rem;
+    letter-spacing: 30px;
+    margin-top: 50px;
+  }
+  .hero-content h1 {
+    font-size: 4rem;
+    letter-spacing: 10px;
+  }
+  .hero-img {
+    width: 100%;
+    margin-top: 20px;
+    animation: planetAn 120s linear infinite;
+  }
+  .hero-btn {
+    margin: 20px 0 50px;
+  }
+  .hero-content {
+    padding-top: 30px;
+
+  }
+
+  /* About Section */
+  .content-grid {
+    display: flex;
+    flex-direction: column;
+    padding: 20px
+  }
+  .about-img {
+    width: 100%;
+    margin: 30px 0;
+  }
+  .section-title {
+    font-size: 3rem;
+    line-height: 1.3;
+  }
+
+  .action-btn {
+    margin-bottom: 40px;
+  }
+
+  .input-1 {
+    border-radius: 50px;
+    height: 50px;
+    width: 90%;
+  }
+
+  #join-us h2 {
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+    row-gap: 50px;
+  }
+
+}
+
+@media screen and (min-width: 1280px) and (max-width: 1919px) {
+  .hero-btn {
+    margin-top: -75px;
+  }
+
+  nav {
+    gap: 20px;
+  }
+  #join-us {
+
+    height: auto;
+  }
+  #join-us .section-box {
+    height: auto;
+    margin: 50px 0;
+  }
+  #join-us .content-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+  }
+}