Merge pull request #874 from TBorundia/main

Updated the UI of Contact Us page--Fixes #360
khushi-joshi-05 · Jun 3, 2024 · 90890dc · 90890dc
2 parents d165547 + f834903
commit 90890dc
Show file tree

Hide file tree

Showing 4 changed files with 324 additions and 203 deletions.
diff --git a/Images/contact_page_background_image.png → Css-files/contact_page_background_image.png b/Images/contact_page_background_image.png → Css-files/contact_page_background_image.png
diff --git a/Css-files/content.css b/Css-files/content.css
@@ -17,7 +17,6 @@ body {
   width: 100%;
   opacity: 0.4;
   z-index: -1;
-
 }
 
 #active-page {
@@ -39,16 +38,16 @@ body {
   z-index: -1;
 
 }*/
-.service-img{
+.service-img {
   background-image: url(https://cdn.tasteatlas.com//images/toplistarticles/d0e6a0a79d5f4197a51f4ca065393ffe.jpg?mw=1300);
   /*content: "";
   position: absolute;
   height: 800px;
   width: 100%;
   opacity: 0.4;*/
-  height:550px;
-  width:100%;
-  padding-top:15px;
+  height: 550px;
+  width: 100%;
+  padding-top: 15px;
   background-size: cover;
 }
 .navbar {
@@ -115,14 +114,13 @@ body {
   opacity: 0.7;
 }
 
-
 .menu_container {
   padding: 55px 70px 30px 70px;
   background-color: rgb(224, 224, 252);
 }
 
 .menu_container h2 {
-  font-family: 'Oswald', sans-serif;
+  font-family: "Oswald", sans-serif;
   font-size: 2rem;
   color: rgb(138, 37, 37);
   padding-left: 50px;
@@ -195,7 +193,7 @@ body {
   box-shadow: 0 0 10px rgba(138, 37, 37, 0.5); */
   box-shadow: 0 0 10px rgba(224, 224, 252, 0.678);
   border: 1px solid rgb(186, 186, 201);
-  padding: 0 0  40px 0;
+  padding: 0 0 40px 0;
   margin: 5px;
   height: 310px;
   width: 230px;
@@ -247,7 +245,6 @@ body {
   justify-content: center;
   height: 160px;
   width: 200px;
-
 }
 
 .first_cont .items h3 {
@@ -300,7 +297,6 @@ body {
   font-size: 2rem;
 }
 
-
 /* Book Table */
 .book-table-container {
   padding: 50px;
@@ -363,7 +359,7 @@ body {
   text-align: center;
   padding: 2rem 3rem 2.5rem;
   border: 2px solid rgba(224, 224, 252, 0.678);
-  transition: border .4s, background-color .4s;
+  transition: border 0.4s, background-color 0.4s;
   background-color: white;
   box-shadow: 0 0 10px rgba(224, 224, 252, 0.678);
   border: 1px solid rgb(186, 186, 201);
@@ -380,7 +376,7 @@ body {
 }
 
 .testimonal__title {
-  margin-bottom: .75rem;
+  margin-bottom: 0.75rem;
 }
 
 .testimonal__description {
@@ -498,16 +494,16 @@ textarea {
   color: black;
   background-color: white;
   border-radius: 50%;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .fa-facebook:hover {
-  background-color: #3B5998;
+  background-color: #3b5998;
   color: white;
 }
 
 .fa-instagram:hover {
-  background-color: #D62976;
+  background-color: #d62976;
   color: white;
 }
 
@@ -520,8 +516,8 @@ textarea {
   background-color: #040204;
   color: white;
 }
-.fa-discord:hover{
-  background-color: #5865F2;
+.fa-discord:hover {
+  background-color: #5865f2;
   color: white;
 }
 /* Cart page styling */
@@ -618,14 +614,14 @@ td {
 }
 
 #inputCode:hover {
-  border: 2px solid #A52A2A;
+  border: 2px solid #a52a2a;
 }
 
 #applyCouponButton {
   width: 5rem;
   border-radius: 0.3rem;
   padding: 10px 20px;
-  background-color: #A52A2A;
+  background-color: #a52a2a;
   color: white;
   font-weight: bold;
   border: none;
@@ -636,7 +632,6 @@ td {
   background-color: #a52a2ad7;
 }
 
-
 /* updated nav bar */
 nav {
   height: 3rem;
@@ -680,7 +675,7 @@ nav {
   padding: 0;
   /* Remove default padding */
 }
-.ul2{
+.ul2 {
   justify-content: flex-end;
 }
 .ul1 {
@@ -705,4 +700,165 @@ nav {
 
 .cart {
   color: white;
-}
+}
+
+.contact-form-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 50px 0;
+  padding-left: 250px;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.img-fluid {
+  height: 300px;
+  width: 300px;
+  margin-top: 250px;
+  margin-left: 100px;
+}
+
+.contact-form {
+  width: 100%;
+}
+
+.form-group.row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.form-group .col-md-6 {
+  flex: 0 0 48%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.contact {
+  margin-left: 30%;
+  font-size: 35px;
+}
+
+main::before {
+  background-image: url("contact_page_background_image.png");
+  content: "";
+  position: absolute;
+  height: 238px;
+  width: 100%;
+  opacity: 0.4;
+  z-index: -1;
+}
+
+main {
+  position: relative;
+  background-color: #fdf6fc;
+  z-index: 0;
+}
+
+.contact-form-section .form-background {
+  /* background-image: url("form_background.jpg"); */
+  background: linear-gradient(
+    to top left,
+    rgb(247, 218, 244),
+    rgb(255, 230, 251)
+  );
+  background-size: cover;
+  background-position: center;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-top: 70px;
+  border: #040204;
+}
+
+.contact-form .form-group {
+  margin-bottom: 1rem;
+}
+
+.contact-form .form-label {
+  font-weight: bold;
+  margin-left: 20px;
+}
+
+.contact-form .form-control {
+  width: 85%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  margin-left: 20px;
+}
+
+.contact-form-section textarea {
+  width: 85%; /* Adjust the width as needed */
+  height: 100px; /* Adjust the height as needed */
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.contact-form .btn {
+  background-color: #fda8af;
+  color: white;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  width: 40%;
+  margin-left: 150px;
+}
+
+.contact-form .btn:hover {
+  background-color: #fc7676;
+}
+
+.contact-form-section {
+  padding: 40px 0;
+}
+
+.get-in-touch {
+  padding: 20px;
+}
+
+.get-in-touch h1 {
+  font-size: 2.8rem;
+  color: #333;
+  margin-top: 210px;
+  font-weight: bold; /* Bold text */
+}
+
+.get-in-touch p {
+  color: #080808; /* Medium-dark text color for readability */
+  font-size: 1rem; /* Standard text size */
+  line-height: 1.5; /* Better line spacing */
+}
+
+.contact-info p {
+  display: flex; /* Use flexbox to align icons and text */
+  align-items: center; /* Vertically center align items */
+  margin: 10px 0; /* Space between each contact info item */
+}
+
+.contact-info p i {
+  color: #e91e63; /* Icon color to match theme or branding */
+  margin-right: 10px; /* Space between icon and text */
+  font-size: 1.2rem; /* Slightly larger icons */
+}
+
+.contact-info p a {
+  color: #e91e63; /* Link color matching the icon color */
+  text-decoration: none; /* Remove underline from links */
+  transition: color 0.3s; /* Smooth color transition on hover */
+}
+
+.contact-info p a:hover {
+  color: #333; /* Darken color on hover */
+}