add contact form

apu52 · Jul 30, 2024 · 92f0410 · 92f0410
1 parent 9f0b513
commit 92f0410
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 2 deletions.
diff --git a/Projects/Gamics/assets/css/style.css b/Projects/Gamics/assets/css/style.css
@@ -1691,4 +1691,111 @@ body {
 
   .footer .container { grid-template-columns: 1fr 0.7fr 0.7fr 1fr; }
 
+}
+/* General Styles */
+
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.section-title {
+  text-align: center;
+  margin-bottom: 30px;
+  font-size: 2.5em;
+  color: var(--xiketic);
+}
+
+.section-subtitle {
+  text-align: center;
+  margin-bottom: 50px;
+  font-size: 1.2em;
+  color: var(--marigold);;
+}
+
+/* Contact Section */
+#contact {
+  padding: 50px 0;
+  background-color: #f8f8f8;
+}
+
+.contact-form-wrapper {
+  background: var(--eerie-black-1);;
+  padding: 40px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  margin-top: 10rem;
+  margin-bottom: 10rem;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 15px;
+  margin-top: 5px;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  font-size: 1em;
+  background-color: var(--eerie-black-1);;
+}
+
+.form-control:focus {
+  border-color: #5cb85c;
+  box-shadow: 0 0 5px rgba(92, 184, 92, 0.5);
+}
+
+.btn-primary {
+  background-color: var(--marigold);
+  border: none;
+  color: white;
+  padding: 15px;
+  font-size: 1.2em;
+  border-radius: 10px;
+  transition: background-color 0.3s;
+  margin: auto;
+}
+
+.btn-primary:hover {
+  background-color: #4cae4c;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .section-title {
+    font-size: 2em;
+  }
+  .section-subtitle {
+    font-size: 1em;
+  }
+}
+
+@media (max-width: 576px) {
+  .section-title {
+    font-size: 1.8em;
+  }
+  .section-subtitle {
+    font-size: 0.9em;
+  }
+  .contact-form-wrapper {
+    padding: 20px;
+  }
+  .form-control {
+    padding: 10px;
+    font-size: 0.9em;
+  }
+  .btn-primary {
+    padding: 10px;
+    font-size: 1em;
+  }
+}
+#contact{
+  margin-bottom: -35px;
+}
+#contact label,input,textarea{
+  color: white;
 }
diff --git a/Projects/Gamics/index.html b/Projects/Gamics/index.html
@@ -112,7 +112,7 @@
             </li>
 
             <li class="navbar-item">
-              <a href="#" class="navbar-link skewBg" data-nav-link>Contact</a>
+              <a href="#contact" class="navbar-link skewBg" data-nav-link>Contact</a>
             </li>
 
           </ul>
@@ -910,7 +910,35 @@ <h3>
 
         </div>
       </section>
-
+  <!-- Contact Section -->
+  <section id="contact">
+    <div class="container">
+      <h2 class="section-title h2" id="contact">Contact Us</h2>
+      <p class="section-subtitle">We would love to hear from you!</p>
+
+      <div class="row justify-content-center">
+        <div class="col-lg-8 col-md-10">
+          <div class="contact-form-wrapper">
+            <form action="/submit-form" method="post">
+              <div class="form-group">
+                <label for="name">Your Name</label>
+                <input type="text" class="form-control" id="name" name="name" required>
+              </div>
+              <div class="form-group">
+                <label for="email">Your Email</label>
+                <input type="email" class="form-control" id="email" name="email" required>
+              </div>
+              <div class="form-group">
+                <label for="message">Your Message</label>
+                <textarea class="form-control" id="message" name="message" rows="6" required></textarea>
+              </div>
+              <button type="submit" class="btn btn-primary btn-block">Send Message</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
 
 
@@ -950,6 +978,8 @@ <h2 class="h2">
         </div>
       </section>
 
+
+
     </article>
   </main>