Add files via upload

anuza08 · May 24, 2024 · 96e7532 · 96e7532
1 parent cf19818
commit 96e7532
Show file tree

Hide file tree

Showing 9 changed files with 335 additions and 0 deletions.
diff --git a/banner.webp b/banner.webp
diff --git a/cat.jpg b/cat.jpg
diff --git a/dog.jpg b/dog.jpg
diff --git a/img1.webp b/img1.webp
diff --git a/img2.jpg b/img2.jpg
diff --git a/img3.jpeg b/img3.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,332 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Angkor&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="path/to/font-awesome/css/font-awesome.min.css"
+    />
+    <title>Adopt pet</title>
+    <style>
+
+      .modal {
+        display: none; 
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        backdrop-filter: blur(5px); 
+      }
+
+
+      .modal-content {
+        background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+        border-radius: 10px; 
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      #adoptBtn {
+        background-color: #265073; 
+        color: #fff; 
+        padding: 10px 20px; 
+        border: none; 
+        border-radius: 5px; 
+        cursor: pointer;
+        font-size: 16px;
+      }
+
+      #adoptBtn:hover {
+        background-color: #1a3f5f; 
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        position: relative;
+        font-family: "Angkor", sans-serif;
+        display: flex;
+        flex-direction: column;
+      }
+      h1 {
+        color: white;
+        position: absolute;
+        top: 5%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 7vh;
+      }
+      h3 {
+        color: white;
+        position: absolute;
+        top: 10%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      img {
+        width: 100%;
+        height: auto;
+        padding: 0%;
+        display: block;
+      }
+      ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
+      li {
+        display: inline;
+        margin-right: 20px;
+      }
+      li a {
+        color: white;
+        text-decoration: none;
+        font-size: 18px;
+      }
+      .container {
+        width: 200px;
+        height: 200px;
+        border: 2px solid transparent;
+        transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        border-color: #265073;
+        border-radius: 40px;
+        margin-right: 3cqw;
+        margin-top: 1%;
+        /* margin: 50px 10px 0 50px; */
+      }
+      .iconPlane {
+        display: flex;
+        justify-content: center;
+      }
+      .container:hover {
+        box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
+      }
+      .icon {
+        width: 90%;
+        margin-top: 15px;
+        margin-left: 10px;
+      }
+      .adoptBtn {
+        background-color: #def6fc;
+        border: 2px solid transparent;
+        box-shadow: 0 2px 4px rgba(132, 132, 225, 0.5);
+        width: 50%;
+        height: 100px;
+        margin: -20px 50px 0 350px;
+        border-radius: 50px;
+        flex-direction: row;
+      }
+      .catContainer {
+        display: flex;
+        align-items: center;
+        margin: 50px;
+        width: 40%;
+        /* height: 300px; */
+        flex: 1;
+      }
+      .catSide {
+        flex: 1;
+        margin-right: 20%;
+        height: 400px;
+        border-radius: 50px;
+      }
+      .catSection {
+        display: flex;
+        align-items: center;
+        margin-left: 10%;
+        /* margin-top: 5%; */
+      }
+      .footer {
+        margin-top: 20px;
+        margin-bottom: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <img src="banner.webp" alt="banner" />
+    <h1>PET ADOPTION</h1>
+    <h3>Complete Your Family</h3>
+    <ul>
+      <li><a href="#about">About Us</a></li>
+      <li><a href="#contact">Contact Us</a></li>
+      <li><a href="#newpets">New Pets</a></li>
+    </ul>
+    <h2 style="color: #265073; margin-left: 390px">Select your pet To Adopt</h2>
+    <!-- <p style="color: #265073">Select Pet Type</p> -->
+    <div class="iconPlane">
+      <div class="container">
+        <div class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+            <path
+              d="M309.6 158.5L332.7 19.8C334.6 8.4 344.5 0 356.1 0c7.5 0 14.5 3.5 19 9.5L392 32h52.1c12.7 0 24.9 5.1 33.9 14.1L496 64h56c13.3 0 24 10.7 24 24v24c0 44.2-35.8 80-80 80H464 448 426.7l-5.1 30.5-112-64zM416 256.1L416 480c0 17.7-14.3 32-32 32H352c-17.7 0-32-14.3-32-32V364.8c-24 12.3-51.2 19.2-80 19.2s-56-6.9-80-19.2V480c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V249.8c-28.8-10.9-51.4-35.3-59.2-66.5L1 167.8c-4.3-17.1 6.1-34.5 23.3-38.8s34.5 6.1 38.8 23.3l3.9 15.5C70.5 182 83.3 192 98 192h30 16H303.8L416 256.1zM464 80a16 16 0 1 0 -32 0 16 16 0 1 0 32 0z"
+              fill="#265073"
+            />
+          </svg>
+        </div>
+      </div>
+
+      <div class="container">
+        <div class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+            <path
+              d="M320 192h17.1c22.1 38.3 63.5 64 110.9 64c11 0 21.8-1.4 32-4v4 32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V339.2L280 448h56c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-53 0-96-43-96-96V192.5c0-16.1-12-29.8-28-31.8l-7.9-1c-17.5-2.2-30-18.2-27.8-35.7s18.2-30 35.7-27.8l7.9 1c48 6 84.1 46.8 84.1 95.3v85.3c34.4-51.7 93.2-85.8 160-85.8zm160 26.5v0c-10 3.5-20.8 5.5-32 5.5c-28.4 0-54-12.4-71.6-32h0c-3.7-4.1-7-8.5-9.9-13.2C357.3 164 352 146.6 352 128v0V32 12 10.7C352 4.8 356.7 .1 362.6 0h.2c3.3 0 6.4 1.6 8.4 4.2l0 .1L384 21.3l27.2 36.3L416 64h64l4.8-6.4L512 21.3 524.8 4.3l0-.1c2-2.6 5.1-4.2 8.4-4.2h.2C539.3 .1 544 4.8 544 10.7V12 32v96c0 17.3-4.6 33.6-12.6 47.6c-11.3 19.8-29.6 35.2-51.4 42.9zM432 128a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm48 16a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"
+              fill="#265073"
+            />
+          </svg>
+        </div>
+      </div>
+      <div class="container">
+        <div class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+              d="M226.5 92.9c14.3 42.9-.3 86.2-32.6 96.8s-70.1-15.6-84.4-58.5s.3-86.2 32.6-96.8s70.1 15.6 84.4 58.5zM100.4 198.6c18.9 32.4 14.3 70.1-10.2 84.1s-59.7-.9-78.5-33.3S-2.7 179.3 21.8 165.3s59.7 .9 78.5 33.3zM69.2 401.2C121.6 259.9 214.7 224 256 224s134.4 35.9 186.8 177.2c3.6 9.7 5.2 20.1 5.2 30.5v1.6c0 25.8-20.9 46.7-46.7 46.7c-11.5 0-22.9-1.4-34-4.2l-88-22c-15.3-3.8-31.3-3.8-46.6 0l-88 22c-11.1 2.8-22.5 4.2-34 4.2C84.9 480 64 459.1 64 433.3v-1.6c0-10.4 1.6-20.8 5.2-30.5zM421.8 282.7c-24.5-14-29.1-51.7-10.2-84.1s54-47.3 78.5-33.3s29.1 51.7 10.2 84.1s-54 47.3-78.5 33.3zM310.1 189.7c-32.3-10.6-46.9-53.9-32.6-96.8s52.1-69.1 84.4-58.5s46.9 53.9 32.6 96.8s-52.1 69.1-84.4 58.5z"
+              fill="#265073"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="adoptBtn">
+      <p style="color: #265073; font-size: 20px; text-align: center">
+        Re-Home And Adopt A Pet In India
+      </p>
+      <h6 style="color: #265073; text-align: center; margin-top: -20px">
+        Every Pet Deserve A Good Home #Adoptlove
+      </h6>
+    </div>
+    <div class="catSection">
+      <div class="catContainer">
+        <img src="dog.jpg" alt="dog img" />
+      </div>
+      <div class="catSide">
+        <p style="color: #265073; font-size: large">
+          YOUR ADOPTION JOUNERY WITH US
+        </p>
+        <div>
+          <b style="color: #265073">Search Pet</b><br />
+          <p style="color: #67c6e3">
+            Adopt a dog or cat who's right for you. Simply enter your city above
+            to start your search.<br /><br />
+          </p>
+          <tb />
+          <b style="color: #265073">Connect</b><br />
+          <p style="color: #67c6e3">
+            Once you find a pet, click "show number" to get contact info for
+            their pet parent or rescue. Contact them to learn more about how to
+            meet and adopt the pet.<br /><br />
+            <tb />
+          </p>
+          <!-- <b style="color: #265073">AdoptLove</b><br />
+          <p style="color: #67c6e3">
+            The rescue or pet parents will walk you through their adoption
+            process. Prepare your home for the arrival of<br />
+            your fur baby to help them adjust to their new family.<br /><br />
+          </p>
+          <tb /> -->
+          <!-- <b style="color:#265073">Free Vet Consultation</b><br/>
+        <p style="color:#67C6E3">ThePetNest will help your pet to settle down in its new home, once you complete the Adoption journey reach out to us for free vet consultation.<br/><br/></p>
+        </div> -->
+        </div>
+      </div>
+    </div>
+    <div style="margin-top: 20px; display: flex; justify-content: center;">
+      <div style="width: 50%;">
+        <img src="img3.jpeg" alt="Adoption" style="margin: 0 auto; display: block; height: auto; max-width: 100%;">
+      </div>
+      <div style="width: 50%; color:#265073; font-size: 18px; margin-top: 60px; ">
+        <h2 style="margin-left: 20px;">About Adoption</h2>
+        <p style="margin-left: 20px;">
+          Consider adopting a furry friend today! Adoption not only gives a homeless pet a loving home but also brings immense joy and companionship to your life. By adopting, you are saving a life and making a lifelong commitment to care for a pet. It's a rewarding experience that creates a bond like no other.
+        </p>
+      </div>
+    </div>  
+  </div>
+    <footer class="footer">
+      <div style="background-color: #265073; padding: 20px; text-align: center">
+        <p style="color: white; font-size: 16px; margin: 0">
+          © 2024 Pet Adoption. All rights reserved.
+        </p>
+        <p style="color: white; font-size: 14px; margin-top: 5px">
+          Designed by Anuja Shinde
+        </p>
+      </div>
+    </footer>
+    <style>
+
+      .modal {
+        display: none; 
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(77, 77, 200, 0.8); 
+      }
+
+      .modal-content {
+        background-color: #fefefe;
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div id="myModal" class="modal">
+
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2 style="color: #265073;">Adopt a pet and save a life!</h2>
+
+        <p>Consider adopting a furry friend today!</p>
+
+        <button id="adoptBtn">Adopt</button>
+      </div>
+    </div>
+
+    <script>    
+      var modal = document.getElementById("myModal");
+
+      var span = document.getElementsByClassName("close")[0];
+
+      var adoptBtn = document.getElementById("adoptBtn");
+
+      window.onload = function () {
+        modal.style.display = "block";
+      };
+
+      span.onclick = function () {
+        modal.style.display = "none";
+      };
+
+      adoptBtn.onclick = function () {
+        modal.style.display = "none";
+      };
+
+      window.onclick = function (event) {
+        if (event.target == modal) {
+          modal.style.display = "none";
+        }
+      };
+    </script>
+  </body>
+</html>
diff --git a/paw-print.png b/paw-print.png
diff --git a/settings.json b/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}