Merge pull request #27 from AdityaSinha2305/feature

fix: pet-generation-form style changed, enhances the pet generation for the website users
cocomantis · Oct 13, 2024 · a322b78 · a322b78
2 parents 7ad9b49 + 975f536
commit a322b78
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 6 deletions.
diff --git a/Website/HomePage.css b/Website/HomePage.css
@@ -13,7 +13,7 @@ body {
   color: white;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: 100vh; 
 }
 
 
@@ -189,3 +189,49 @@ h2 {
     font-size: 16px;
   }
 }
+
+
+
+#pet-name-form {
+  background-color: #ed6d1e;
+  border-radius: 25px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  padding: 25px; 
+  margin-left: 530px;
+  max-width: 450px; 
+  width: 100%;              /* Responsive width */
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 8px;
+  margin: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+
+button {
+  width: 100%;
+  font-size: medium;
+  padding: 10px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+#generated-name {
+  background-color: #a51eed;
+  visibility: hidden;
+  border-radius: 25px;
+  padding: 25px; 
+  margin-left: 530px;
+  max-width: 450px; 
+  width: 100%;  /* Responsive width */
+}
diff --git a/Website/nameGenerator.html b/Website/nameGenerator.html
@@ -22,19 +22,19 @@
     <section id="name-your-pet">
         <h2>Generate a Random Pet Name</h2>
         <form id="pet-name-form">
-            <label for="first-name">Your First Name:</label>
+            <label for="first-name">Your First Name</label>
             <input type="text" id="first-name" required>
             <br><br><br>
-            <label for="last-name">Your Last Name:</label>
+            <label for="last-name">Your Last Name</label>
             <input type="text" id="last-name" required>
             <br><br><br>
-            <label for="animal-category">Category of Animal:</label>
+            <label for="animal-category">Category of Animal</label>
             <input type="text" id="animal-category" required>
             <br><br><br>
-            <label for="fur-color">Color of Fur:</label>
+            <label for="fur-color">Color of Fur</label>
             <input type="text" id="fur-color" required>
             <br><br><br>
-            <label for="favorite-fruit">Favorite Food:</label>
+            <label for="favorite-fruit">Favorite Food</label>
             <input type="text" id="favorite-fruit" required>
             <br><br><br>
             <button type="submit">Generate Name</button>
@@ -72,6 +72,7 @@ <h3 id="generated-name"></h3>
 
             // Display the generated name
             document.getElementById('generated-name').textContent = `Your Pet Name: ${randomPetName}`;
+            document.getElementById('generated-name').style.visibility = "visible";
         });
 
         // Update the footer year