From 2624846147c2ace0d7bec6b865393539e2f8d40b Mon Sep 17 00:00:00 2001
From: shivamv_03 <shivamv5162@gmail.com>
Date: Thu, 3 Oct 2024 01:38:24 +0530
Subject: [PATCH] made all changes regarding the alignment

---
 Css-files/content.css   |  28 +++++--
 Html-files/contact.html |   1 +
 index.html              |  37 +++++----
 style.css               | 172 ++++++++++++++++++++++++++++------------
 4 files changed, 162 insertions(+), 76 deletions(-)

diff --git a/Css-files/content.css b/Css-files/content.css
index afe67423..4accb483 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -37,11 +37,23 @@ body {
   
 }
 
+/* Base navbar styles */
 .navbar {
   padding: 8px 10px;
+  overflow: hidden;
+  transition: background-color 0.3s ease; /* Smooth transition for background */
+}
+
+/* Styles for scrolled navbar */
+.navbar.scrolled {
+  background-color: rgba(20, 43, 93, 0.8); /* Darker background when scrolled */
 }
+
+/* Unchanged navbar styles */
 .navbar ul {
   overflow: hidden;
+  margin: 0; /* Reset margin */
+  padding: 0; /* Reset padding */
 }
 
 .navbar li {
@@ -49,6 +61,7 @@ body {
   list-style: none;
   padding: 8px 20px;
 }
+
 .navbar li:hover {
   opacity: 0.7;
 }
@@ -59,19 +72,20 @@ body {
   color: white;
   font-size: 1.3rem;
 }
+
 .navbarbg {
-  padding: 8px 0;
-  background-color: hsl(20, 43%, 93%); 
-  text-align: left; 
+  padding: 7px 0;
+  background-color: hsl(20, 43%, 93%);
+  text-align: left;
 }
 
 .navbarbg ul {
-  display: inline-block; 
-  padding-left: 0; 
+  display: inline-block;
+  padding-left: 0;
 }
 
 .navbarbg li {
-  display: inline-block; 
+  display: inline-block;
   list-style: none;
   margin: 0 10px;
 }
@@ -80,7 +94,7 @@ body {
   padding: 5px 10px;
   text-decoration: none;
   color: white;
-  font-size: 1.3rem;
+  font-size: 1rem;
 }
 
 .navbarbg li:hover {
diff --git a/Html-files/contact.html b/Html-files/contact.html
index 60f37364..c88ec9df 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -596,6 +596,7 @@ <h4>Follow Us</h4>
     });
 });
     </script>
+   
 </body>
 
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 0277550a..47cf83ab 100644
--- a/index.html
+++ b/index.html
@@ -363,26 +363,29 @@ <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whims
         </div>
     </section>
 
-    <section class="service_container" style="background-color: hsl(20, 43%, 93%);">
-        <div class="service">
-            <div class="box_main">
-                <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Bringing happiness<br> to you</h1>
-                <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Order your favourite vintage collections!</p>
-            </div>
-            <div class="box">
-                <h1 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);">Online Delivery</h1><br>
-                <a href="./Html-files/menu.html" style="font-family: var(--ff-poppins);color: white;">Order Online</a>
-
-            </div>
-            <div class="box">
-                <h1 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);">Click & Collect</h1><br>
-                <a href="./Html-files/cart.html" style="font-family: var(--ff-poppins);color: white;">Take out Order</a>
+ <section class="service_container">
+    <div class="service">
+        <!-- Text Column - 60% Width -->
+        <div class="service_text column"><br>
+            <h1>Bringing happiness<br> to you</h1>
+            <p>Order your favourite vintage collections!</p>
+        </div>
 
+        <!-- Buttons Column - 40% Width -->
+        <div class="service_buttons column">
+            <div class="button_row">
+                <div class="box">
+                    <h2>Online Delivery</h2><br>
+                    <a href="./Html-files/menu.html" class="order_btn">Order Online</a>
+                </div>
+                <div class="box">
+                    <h2>Click & Collect</h2><br>
+                    <a href="./Html-files/cart.html" class="order_btn">Take out Order</a>
+                </div>
             </div>
-            
         </div>
-
-    </section>
+    </div>
+</section>
 
     <section class="menu_container">
         <div class="mainhead">
diff --git a/style.css b/style.css
index af15d742..fd1f4bc2 100644
--- a/style.css
+++ b/style.css
@@ -111,7 +111,7 @@ s
 }
 
 #about .box {
-  border: 2px solid brown;
+  border: 2px solid #000000;
   padding: 34px;
   margin: 2px 55px;
   border-radius: 28px;
@@ -153,10 +153,96 @@ s
   text-align: center;
 }
 
+.service_container {
+        background-color: hsl(20, 43%, 93%);
+        padding: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+  border: 0.5px solid black;
+    }
+
+    .service {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 30px;
+        max-width: 1200px;
+        width: 100%;
+    }
+
+    .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    /* Text Column - 60% */
+    .service_text {
+        flex: 0 0 49%;
+        font-family: var(--ff-poppins);
+        color: hsl(203, 30%, 26%);
+    }
+
+    .service_text h1 {
+        font-family: var(--ff-philosopher);
+        font-size: 3rem;
+        line-height: 1.2;
+        margin-bottom: 15px;
+    }
+
+    .service_text p {
+        font-family: var(--ff-poppins);
+        font-size: 1.2rem;
+        color: hsl(208, 7%, 46%);
+        margin-bottom: 20px;
+    }
+
+    /* Buttons Column - 40% */
+    .service_buttons {
+        flex: 0 0 40%;
+    }
+
+    .button_row {
+        display: flex;
+        justify-content: space-between;
+      /*border: 1px solid black;*/
+        gap: 20px;
+    }
+
+    .box {
+        text-align: center;
+        flex: 1;
+    }
+
+    .box h2 {
+        font-family: var(--ff-philosopher);
+        color: hsl(357, 82%, 35%);
+        font-size: 1.5rem;
+        margin-bottom: 10px;
+    }
+
+    .order_btn {
+        font-family: var(--ff-poppins);
+        background-color: hsl(357, 82%, 35%);
+        color: white;
+        padding: 12px 30px;
+        font-size: 1rem;
+        text-decoration: none;
+        border-radius: 10px;
+        transition: background-color 0.3s ease;
+    }
+
+    .order_btn:hover {
+        background-color: hsl(357, 82%, 45%);
+    }
+    
+
+
+/*
 .service_container {
   display: flex;
   flex-direction: column;
-  /* padding: 3px 200px; */
+   padding: 3px 200px; 
   height: 550px;
   width: auto;
   justify-content: center;
@@ -164,6 +250,7 @@ s
   color: white;
   background-color: transparent;
 }
+*/
 
 .service_container:before {
   background-color: transparent;
@@ -172,7 +259,6 @@ s
 
   /*  
     height: 560px;
-    */
   height: 800px;
   width: 100%;
   /* justify-items: center; */
@@ -181,33 +267,44 @@ s
   /* background-repeat: no-repeat; */
 }
 
+/*
 .service {
   display: flex;
   padding: 20px;
   box-sizing: fixed;
 }
+*/
 
+/*
 .service .box_main {
   padding-left: 20px;
   padding-right: 40px;
 }
+*/
 
+/*
 .service .box_main h1 {
   font-size: 4.5rem;
   font-family: "Oswald", sans-serif;
 }
+*/
+/*
 
 .service .box_main p {
   font-family: "Oswald", sans-serif;
 }
+*/
+/*
 
 .service .box {
   padding: 140px 20px;
-  /* border:2px solid rgb(224, 224, 252); */
+   border:2px solid rgb(224, 224, 252); 
   text-align: center;
   font-size: 1.3rem;
 }
+*/
 
+/*
 .service .box a {
   text-decoration: none;
   background-color: brown;
@@ -215,10 +312,14 @@ s
   padding: 5px;
   border-radius: 10px;
 }
+*/
 
+/*
 .service .box a:hover {
   background-color: hsl(304, 14%, 46%);
 }
+*/
+
 
 .menu_container {
   background-color: hsl(20, 43%,93%);
@@ -592,55 +693,22 @@ textarea {
 }
 
 /* responsiveness  */
+@media (max-width: 768px) {
+        .service {
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .service_text, .service_buttons {
+            flex: 1 1 100%;
+        }
+
+        .button_row {
+            flex-direction: column;
+            gap: 20px;
+        }
+    }
 
-@media screen and (max-width: 1120px) {
-  #about {
-    /* margin: 34px; */
-    flex-direction: column-reverse;
-  }
-
-  .service {
-    flex-direction: column;
-    padding: 5px;
-    /* box-sizing: fixed; */
-  }
-
-  .service .box {
-    padding: 20px 20px;
-    /* border: 2px solid rgb(224, 224, 252); */
-    text-align: center;
-    font-size: 1.3rem;
-  }
-
-  .service_container {
-    height: fit-content;
-    /* height: 1000px; */
-  }
-
-  .service .box_main h1 {
-    font-size: 3.5rem;
-  }
-
-  .service_container:before {
-    /*  
-        height: 560px;
-        */
-    /* height: 800px; */
-    /* height: fit-content; */
-    background-size: cover;
-    width: 100%;
-    /* background-repeat: no-repeat; */
-    /* justify-items: center; */
-    opacity: 0.4;
-    z-index: -1;
-    /* background-repeat: no-repeat; */
-  }
-
-  .menu_items {
-    flex-direction: column;
-    align-items: center;
-  }
-}
 
 @media screen and (max-width: 780px) {
   .app_download {