Merge pull request #1051 from charmi2109/branch2

Delivery form UI enhanced

delivery.html

@@ -91,15 +91,19 @@
         </div>
     </div>
 
-    <section>
-        <h1 style="margin-top: 100px; padding: 0 40px;">Island-Wide Delivery</h1>
-        <h2 class="heading">Enter Your Details</h2>
-
-        <form class="form-contents">
-            <div class="indv-text">
-                <label for="name" class="text">Name</label>
-                <input type="text" class="form-text" id="name" name="name" placeholder="Enter your Name" required />
-            </div>
+    <div class="delivery_container">
+        <section>
+            <h1 style="margin-top: 100px; padding: 0 40px;">Island-Wide Delivery</h1>
+            <h2 class="heading">Enter Your Details</h2>
+            <div class="box">
+                <form class="form-contents">
+                    <div class="indv-text">
+                        <label for="name" class="text">Name</label>
+                        <input type="text" class="form-text" id="name" name="name" placeholder="Enter your Name"
+                            required />
+                    </div>
+
+
 
             <div class="indv-text">
                 <label for="email" class="text">Email Id</label>
@@ -174,6 +178,8 @@ <h2 class="heading">Enter Your Details</h2>
 
         </form>
     </section>
+    </div>
+<!-- >>>>>>> master -->
 
     <!-- Cart -->
     <div class="cart">
@@ -250,13 +256,15 @@ <h4>Need Help?</h4>
                 </ul>
                 <h4 style="margin-top: 15px;">Follow Us</h4>
                 <ul class="links">
+
                     <li><a href="https://www.facebook.com/" class="social"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
                     <li><a href="https://www.instagram.com/" class="social"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
                     <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i> Linkedin</a></li>
                     <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
+<!-- >>>>>>> master -->
                     <!-- Added Whatsapp Logo -->
                     <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i>
-                        Whatsapp</a></li>
+                            Whatsapp</a></li>
                 </ul>
             </div>
             <div class="footer-col">
@@ -314,4 +322,4 @@ <h4>Newsletter</h4>
 
 </body>
 
-</html>
+</html>

styles/delivery-catering.css

@@ -7,6 +7,46 @@ section h1 {
     font-size: 20px;
     margin-top: 15px;
     font-weight: 400;
+}
+.form-text {
+    width: 80%; /* Set a smaller width for input fields */
+    padding: 8px; /* Reduce padding inside input fields */
+    font-size: 14px; /* Decrease font size for a more compact look */
+    border: 1px solid #e91e63;
+    border-radius: 5px; 
+    box-sizing: border-box; /* Ensure padding doesn’t affect width */
+}
+.delivery_container{
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    /* background: url(/images/icecreams.jpg); */
+    /* background-size:cover; */
+}
+.box{
+    /* background: red; */
+    box-shadow: 0px 0px 10px rgba(0,0, 0, 0.1);
+    border: 12px solid rgba(255,255 ,255 , 0.1);
+    border-radius: 10px;
+    backdrop-filter: blur(1.5px);
+
+    padding: 20px 20px;
+    /* max-width: 900px;  */
+
+
+
+}
+.indv-text .form-text{
+    background: transparent;
+    font-weight:500;
+    /* border: none; */
+    font-size: 20px;
+    padding: 20px 20px 20px 20px ;
+    border-radius: 19px;
+
+
+
 }
 
 .form-text {
@@ -18,8 +58,10 @@ section h1 {
     width: 100%;
     height: 40px;
     background-color: transparent;
+
 }
 
+
 .indv-text label {
     font-weight: bold;
 }
@@ -31,6 +73,7 @@ section h1 {
 .text {
     display: block;
     margin-bottom: 7px;
+    font-size: 19px;
 }
 
 .indv-text {
@@ -44,6 +87,8 @@ section h1 {
     background: transparent;
     color: var(--main-color);
 }
+.btn{
+margin: auto 0 ;}
 .reset-btn:hover {
     background-image: var(--background-image);
     background-color: var(--main-color);