Merge pull request #1210 from PrabhjotBajwa/contactus

arghadipmanna101 · Jun 16, 2024 · ed6627f · ed6627f
2 parents 3768451 + 09e210e
commit ed6627f
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 0 deletions.
diff --git a/account/contact.html b/account/contact.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us - Your Website</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../css/footer.css">
+    <link rel="stylesheet" href="../css/contact.css">
+
+</head>
+<body>
+
+<!-- Header -->
+<div class="contact-header text-center">
+    <a href="../">Home</a>
+    <a href="../helpcentre/index.html">Help Centre</a>
+    <a href="../sell-online/index.html">Become a Seller</a>
+    <a href="../account/orders.html">Orders</a>
+</div>
+
+<!-- Main Content -->
+<div class="container contact-section">
+    <h1 class="text-center mb-5">Contact Us</h1>
+
+    <div class="row mb-5">
+        <div class="col-md-6 contact-info">
+            <h2><img src="https://img.icons8.com/ios-filled/50/000000/map-marker.png" alt="Address Icon"> Mail Us:</h2>
+            <address>
+                Company Private Limited,<br>
+                1234 Street,<br>
+                City, 56789,<br>
+                State, Country
+            </address>
+            <h2><img src="https://img.icons8.com/ios-filled/50/000000/phone.png" alt="Phone Icon"> Registered Office Address:</h2>
+            <address>
+                Company Private Limited,<br>
+                1234 Your Street,<br>
+                City, 56789,<br>
+                State, Country<br>
+                CIN: U12345ABC12345<br>
+                Telephone: 123-456-7890
+            </address>
+        </div>
+        <div class="col-md-6 contact-form">
+            <form>
+                <div class="form-group">
+                    <label for="name">Name</label>
+                    <input type="text" class="form-control" id="name" placeholder="Your Name">
+                </div>
+                <div class="form-group">
+                    <label for="email">Email address</label>
+                    <input type="email" class="form-control" id="email" placeholder="Your Email">
+                </div>
+                <div class="form-group">
+                    <label for="message">Message</label>
+                    <textarea class="form-control" id="message" rows="5" placeholder="Your Message"></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary btn-block">Submit</button>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Bootstrap JS -->
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>
diff --git a/css/contact.css b/css/contact.css
@@ -0,0 +1,48 @@
+.contact-header {
+    background-color: #007bff;
+    color: white;
+    padding: 15px 0;
+}
+.contact-header a {
+    color: white;
+    text-decoration: none;
+    margin: 0 20px;
+    transition: color 0.3s;
+}
+.contact-header a:hover {
+    color: #ffd700;
+}
+.contact-section {
+    padding: 60px 0;
+}
+.contact-section h2 {
+    animation: fadeInDown 1s;
+}
+.contact-info,
+.contact-form {
+    animation: fadeInUp 1s;
+}
+@keyframes fadeInDown {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.contact-info img {
+    width: 30px;
+    margin-right: 10px;
+}
+.footer {
+    background-color: #f1f1f1;
+    padding: 20px 0;
+}
+.footer a {
+    color: #007bff;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+.footer a:hover {
+    color: #0056b3;
+}
diff --git a/index.html b/index.html
@@ -101,6 +101,9 @@
 							<a class="dropdown-item" href="the-gift-card-store/">
 								<img width="20" src="img/svg/giftCard.svg" alt="flipKart">
 								Gift Cards</a>
+								<a class="dropdown-item" href="account/contact.html">
+									<img width="20" src="https://pngimg.com/uploads/phone/phone_PNG48988.png" alt="flipKart">
+									Contact Us </a>
 						</div>
 					</li>
 					<li class="nav-item navItem3">