made all changes regarding the alignment (#111)

Made all changes regarding the alignment ## Description I have made changes to this section of the page to improve its alignment and overall layout. Previously, the content was unaligned, making it visually cluttered. To resolve this, I structured the section into two rows: the first row contains the main text, while the second row is divided into two columns for the buttons. By applying this clean, two-column design, the layout now looks more organized and visually balanced. The first column contains the text, occupying max of the width, while the second column houses the buttons, arranged side by side, for a more professional and modern look. ## Related Issues #106 ## Type of PR  - [Enhancement ] () ## Screenshots / videos (if applicable) ![image](https://github.com/user-attachments/assets/b40900cf-8a66-4ed3-8dba-843e97edab5f) ## Checklist  - [x ] I have gone through the [contributing guide](https://github.com/Anjaliavv51/Retro) - [x ] I have updated my branch and synced it with project `main` branch before making this PR - [ x] I have performed a self-review of my code - [ x] I have tested the changes thoroughly before submitting this pull request. - [x ] I have provided relevant issue numbers, screenshots, and videos after making the changes. - [x ] I have commented my code, particularly in hard-to-understand areas.
Anjaliavv51 · Oct 3, 2024 · e8a0de1 · e8a0de1
2 parents 049f546 + a8646d2
commit e8a0de1
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 76 deletions.
diff --git a/Css-files/content.css b/Css-files/content.css
@@ -41,18 +41,31 @@ body {
   margin-top: -5rem;
 }
 
+/* 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 {
   float: left;
   list-style: none;
   padding: 8px 20px;
 }
+
 .navbar li:hover {
   opacity: 0.7;
 }
@@ -63,19 +76,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;
 }
@@ -84,7 +98,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
@@ -1057,7 +1057,11 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
             });
         });
     </script>
+
+
+
     <script src="cart.js"></script>
+
 </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -434,26 +434,29 @@ <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whims
 
     </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
@@ -119,7 +119,7 @@ body {
 }
 
 #about .box {
-  border: 2px solid brown;
+  border: 2px solid #000000;
   padding: 34px;
   margin: 2px 55px;
   border-radius: 28px;
@@ -161,17 +161,104 @@ body {
   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;
   align-items: center;
   color: white;
   background-color: transparent;
 }
+*/
 
 .service_container:before {
   background-color: transparent;
@@ -180,7 +267,6 @@ body {
 
   /*  
     height: 560px;
-    */
   height: 800px;
   width: 100%;
   /* justify-items: center; */
@@ -189,33 +275,44 @@ body {
   /* 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;
@@ -226,14 +323,18 @@ body {
   color: white;
   transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
 }
+*/
 
+/*
 .service .box a:hover {
   background-color: #ffffff;
   color: brown !important;
   border: 3px solid rgb(165, 42, 42);
   transform: scale(1.01); 
   animation: bounce 0.5s;
 }
+*/
+
 
 @keyframes bounce {
   0%, 100% {
@@ -657,55 +758,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 {
-Original file line number
+Diff line change
@@ Expand Up @@
                 });
             });
         </script>
         <script src="cart.js"></script>
     </body>
     </html>