Merge pull request #1209 from KajalBhatt123/main

ADDED responsiveness, dark/light theme, fixed book table page #1050

Css-files/book-table.css

@@ -0,0 +1,24 @@
+.mainhead::before {
+    content: "";
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-image: url(https://cdn.tasteatlas.com//images/toplistarticles/d0e6a0a79d5f4197a51f4ca065393ffe.jpg?mw=1300);
+        background-size: cover;
+        opacity: 0.4;
+        z-index: -1;
+}
+
+.mainhead {
+    text-align: center;
+    padding-top: 30px;
+}
+
+.mainhead h1 {
+	font-family: "Bree Serif", serif;
+	font-size: 3.8rem;
+	color: white;
+	font-weight: 700;
+	letter-spacing: 5px;
+}

Css-files/cart.css

@@ -138,7 +138,7 @@ textarea {
     height: 40px;
     background-color: brown;
     color: aliceblue;
-    z-index: 2000;
+    z-index: 20;
 }
 @media all and (max-width: 768px) {
     .cart {

Css-files/content.css

@@ -20,8 +20,8 @@ body {
 	position: absolute;
 	top: 0;
 	left: 0;
-	background-image: url(https://cdn.tasteatlas.com//images/toplistarticles/d0e6a0a79d5f4197a51f4ca065393ffe.jpg?mw=1300);
-	background-size: cover;
+	background-image: url(https://cdn.tasteatlas.com//images/toplistarticles/d0e6a0a79d5f4197a51f4ca065393ffe.jpg?mw=1800);
+	background-size:cover;
 	opacity: 0.4;
 	z-index: -1;
 }
@@ -486,7 +486,7 @@ body {
 
 /* service */
 .service_container {
-	/* padding: 55px 70px 30px 70px; */
+	box-sizing: border-box;
 	background-color: rgb(224, 224, 252);
 }
 
@@ -527,7 +527,7 @@ body {
 
 /* Book Table */
 .book-table-container {
-	padding: 50px;
+	padding: 2vw;
 	background-color: rgb(224, 224, 252);
 }
 
@@ -580,7 +580,6 @@ body {
 
 .testimonal__container {
 	display: flex;
-	padding: 3rem;
 }
 
 .testimonal__card {

Css-files/navbar.css

@@ -1,9 +1,43 @@
+:root {
+  --a: white;
+  --drop-bg: #212123;
+  --nav: black;
+  --primary-bg-color: #ffffff;
+  --primary-text-color: #333335;
+  --secondary-bg-color: #f2f2f2;
+  --accent-color: #9e5c48;
+  --navbar-bg-color: #f2f2f2;
+  --navbar-hover-color: #e5e5e5;
+  --card-bg-color: #ffffff;
+  --card-hover-color: #f5f5f5;
+  --footer-bg-color: #f2f2f2;
+  --footer-hover-color: #e5e5e5;
+}
+
+.dark-theme {
+  --a: black;
+  --drop-bg: #ffffff;
+  --nav: white;
+  --primary-bg-color: #212123;
+  --primary-text-color: #ffffff;
+  --secondary-bg-color: #333335;
+  --accent-color: #9e5c48;
+  --navbar-bg-color: #333335;
+  --navbar-hover-color: #474749;
+  --card-bg-color: #2c2c2e;
+  --card-hover-color: #373739;
+  --footer-bg-color: #28282a;
+  --footer-hover-color: #333335;
+
+}
+
 /* Navbar */
-.navbar[data-bs-theme="dark"] {
-  --bs-navbar-color: white;
+.navbar {
+  --bs-navbar-color: var(--a);
+  background-color: var(--nav);
 }
 
-[data-bs-theme="dark"] .navbar-toggler-icon {
+ .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 
@@ -43,15 +77,16 @@
 }
 
 .center-links .nav-item .dropdown-menu{
-  background-color: black;
+  background-color: var(--drop-bg);
+  color:var(--a);
   border-radius: 0;
   border: none;
   padding-top: 0;
 }
 
 .dropdown-item{
   padding: 4px 8px;
-  color: white;
+  color: var(--a);
   font-size: 15px;
 }
 

Css-files/services.css

@@ -2,12 +2,22 @@
     font-family: "Bree Serif", serif;
 } */
 
-body{
+html{
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
     overflow-x: hidden;
+    overflow-y: visible;
 }
-.mainhead:hover h1 {
-    color: rgb(138, 37, 37);
 
+.head_container {
+    overflow-x: scroll;
+}
+
+.mainhead {
+    overflow-x: hidden;
+    overflow: hidden;
 }
 
 .section1 {
@@ -101,8 +111,12 @@ body{
 }
 
 .testimonal__container {
+    width: 80vw;
+    margin: auto;
+    display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    align-items: center;
 }
 
 .testimonal__title {
@@ -175,10 +189,7 @@ body{
     border-color: white;
 }
 
-input,
-textarea {
-    width: 100%;
-}
+
 
 #butt:hover {
     background-color: rgb(196, 89, 89);

Css-files/services1.css

@@ -1,10 +1,11 @@
-*{
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 }
-.container{
+
+.container {
     position: relative;
     display: flex;
     justify-content: center;
@@ -13,26 +14,28 @@
     gap: 100px 50px;
     padding: 100px 50px;
 }
+
 /* background cards size and rounding */
-.container .card
-{
+.container .card {
     position: relative;
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
-    align-items: flex-start;
-    width: 350px;
+    align-items: center;
+    width: 355px;
     height: 300px;
     background: #fff;
     border-radius: 20px;
-    box-shadow: 0 35px 80px rgba(0,0,0,0.15);
+    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
     transition: 0.5s;
+    align-items: center;
 }
-.container .card:hover
-{
+
+.container .card:hover {
     height: 350px;
 }
-.container .card .imgbx
-{
+
+.container .card .imgbx {
     position: absolute;
     top: 20px;
     width: 300px;
@@ -42,45 +45,61 @@
     transition: 0.5s;
     overflow: hidden;
 }
-.container .card:hover .imgbx
-{
+
+@media screen and (max-width:430px) {
+    .container .card .imgbx {
+        width: 250px;
+    }
+}
+
+@media screen and (max-width:350px) {
+    .container .card .imgbx {
+        width: 220px;
+    }
+}
+
+.container .card:hover .imgbx {
     top: -100px;
     scale: 0.75;
-    box-shadow: 0 15px 45px rgba(0,0,0,0.15);
+    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
 }
-.container .card .imgbx img{
+
+.container .card .imgbx img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
-.container .card .content
-{
+
+.container .card .content {
     position: absolute;
     top: 252px;
     width: 100%;
-    padding: 0 30px;
+    padding: 10px 10px;
     height: 35px;
     overflow: hidden;
     text-align: center;
     transition: 0.5s;
 }
-.container .card:hover .content
-{
+
+.container .card:hover .content {
     top: 150px;
     height: 250px;
 }
-.container .card .content h2{
+
+.container .card .content h2 {
     font-size: 1.33em;
     font-weight: 700;
     color: var(--clr);
 }
-.container .card .content p{
+
+.container .card .content p {
     color: #233;
 }
-.container .card .content a{
+
+.container .card .content a {
     position: relative;
     top: 15px;
     display: inline-block;
@@ -91,24 +110,24 @@
     text-decoration: 8px;
     border-radius: 8px;
 }
+
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
-    background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56));
-  }
-
-  ::-webkit-scrollbar {
-    width:12px;
-
-  }
-
-  ::-webkit-scrollbar-thumb {
+    background-image: linear-gradient(to top, rgb(246, 10, 10), rgb(248, 145, 49), rgb(236, 239, 56));
+}
+
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-thumb {
     background-color: #ff0707;
     border-radius: 10px;
-    border:.3px solid white;
+    border: 0.3px solid white;
     background-image: -webkit-linear-gradient(90deg,
-        rgb(20, 21, 12) 0%,
-        rgb(0, 0, 0) 25%,
-        transparent 100%,
-        rgb(247, 4, 4) 75%,
-        transparent)
-  }
+            rgb(20, 21, 12) 0%,
+            rgb(0, 0, 0) 25%,
+            transparent 100%,
+            rgb(247, 4, 4) 75%,
+            transparent)
+}