Merge branch 'Soujanya2004:main' into fix_review_bug

Soujanya2004 · Oct 15, 2024 · 2d7c29c · 2d7c29c
2 parents 0bdbb2b + 72468db
commit 2d7c29c
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 44 deletions.
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -122,46 +122,136 @@ body{
 }
 
 /* ////////////////////////////////////// */
-  /* Additional Styling*/
-.name{
-    margin-top: 8px;
-    font-size: 1.3rem !important;
-    color: rgb(255, 87, 34)!important;
-    font-weight: 800 !important;
-    margin-left: 10px;
-    text-decoration: none !important;
+ /* FOOTER SECTION */
+footer {
+  margin-top: 100px;
+  /* background-color: #f8f9fa; */
+  padding: 30px;
+  display: flex;
+  justify-content: space-between;
+  /* align-items: flex-start; */
+  flex-wrap: wrap;
 }
+/* 
+.footer-left,
+.footer-middle,
+.footer-right {
+  flex: 1;
+  max-width: 300px;
+} */
 
-.footer-info{
-    text-align: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: space-evenly;
+
+.footer-left .brand h2 {
+  font-size: 50px;
+  font-family: Reggae One;
+  color: #333;
+  font-weight: bold;
+  margin-bottom: 10px;
 }
-.f-name{
-    width: 100%;
-    padding-top: 20px;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-
+
+.footer-left .brand p {
+  font-size: 20px;
+  color: #666;
+  margin-bottom: 20px;
 }
-.fa-brands{
-    padding-left: 25px;
+
+.footer-left .contact-info .email,
+.footer-left .contact-info .phone {
+  margin-bottom: 15px;
+  padding-left: 20px;
 }
-.f-social{
-    width: 100%;
-    font-size: x-large;  
-    padding-top: 20px;   
+
+.footer-left .contact-info i {
+  margin-right: 10px;
+  font-size: 30px;
+  color: #007bff;
 }
-footer{
-    height: 9rem;
-    background-color: rgb(240, 240, 240);
+
+.footer-left .contact-info p {
+  font-size: 17px;
+  color: #666;
+}
+
+.footer-left .contact-info p a {
+  color: #007bff;
+  text-decoration: none;
+  font-weight: bold;
 }
-.form-label{
-    font-size: larger !important;
+
+.footer-left .contact-info p a:hover {
+  text-decoration: underline;
+}
+
+.footer-middle h3,
+.footer-right h3 {
+  font-size: 21px;
+  font-weight: bold;
+  font-family: rekkas;
+  color: #333;
+  margin-top: 15px;
+}
+
+.footer-middle ul,
+.footer-right ul {
+  list-style: none;
+  padding: 0;
 }
+
+.footer-middle ul li,
+.footer-right ul li {
+  margin-bottom: 10px;
+}
+
+.footer-middle ul li a,
+.footer-right ul li a {
+  font-size: 14px;
+  color: #666;
+  text-decoration: none;
+}
+
+.footer-middle ul li a:hover,
+.footer-right ul li a:hover {
+  color: #333;
+}
+
+
+.footer-right h3 {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.footer-right{
+  padding-right: 50px;
+}
+
+.footer-right .social-media a {
+  margin-right: 10px;
+  font-size: 24px;
+  color: #007bff;
+  transition: color 0.3s;
+}
+
+.footer-right .social-media a:hover {
+  color: #0056b3;
+}
+
+.copyright {
+  display: block;
+  position: relative;
+  top: 30px;
+  bottom: 0px;
+  width: 100%;
+  text-align: center;
+
+}
+
+.copyright p {
+  font-size: 14px;
+  color: #666;
+}
+
+
 .listing-card{
     border: none !important;
     margin-bottom: 2.5rem !important;

diff --git a/views/about.ejs b/views/about.ejs
@@ -12,21 +12,21 @@
                 color: #333;
                 overflow-x: hidden;
             }
-            .container {
+            .containerr {
                 width: 80%;
                 margin: 0 auto;
                 text-align: center;
                 padding: 50px 0;
             }
-            .container h1 {
+            .containerr h1 {
                 font-size: 36px;
                 font-weight: 700;
                 margin-bottom: 10px;
                 transition: color 0.3s ease;
                 position: relative;
                 animation: flyIn 1s ease-out;
             }
-            .container p {
+            .containerr p {
                 font-size: 18px;
                 color: #666;
                 margin-bottom: 50px;
@@ -102,10 +102,13 @@
                     transform: translateX(0);
                 }
             }
+            .fa-phone{
+                transform: rotateY(200deg);
+            }
         </style>
 
     <body>
-        <div class="container">
+        <div class="containerr">
             <h1>About Us</h1>
             <p>Welcome to Wanderlust, your ultimate travel companion. We are passionate about exploring the world and helping you create unforgettable travel experiences.</p>
             <div class="row">

diff --git a/views/includes/footer.ejs b/views/includes/footer.ejs
@@ -1,10 +1,40 @@
-<footer style=" margin-top: auto;">
-    <div class="footer-info">
-        <div class="f-social">
-            <i class="fa-brands fa-instagram"></i>
-            <i class="fa-brands fa-facebook"></i>
-            <i class="fa-brands fa-square-x-twitter"></i>
-        </div>
-        <div class="f-name"></i>Wanderlust Private Limited</div>
+<footer class="container" id="footer">
+    <div class="footer-left">
+        <div class="brand">
+            <h2>Wanderlust</h2>
+            <p>Where adventure meets comfort.</p>
+        </div>
+        <div class="contact-info"  id="cantact-us">
+            <div class="email" style="display: flex; align-items: center;">
+                <i class="fas fa-envelope" style="position: relative; bottom: 10px;"></i>
+                <p>Need assistance with your booking or any inquiries?<br>
+                    <a href="mailto:support@Wanderlust.com">supportWanderlust@gmail.com</a></p>
+            </div>
+            <div class="phone" style="display: flex; align-items: center;">
+                <i class="fas fa-phone" style="position: relative; bottom: 10px;"></i>
+                <p>Available 24/7<br><a href="tel:+919876543210">+91-9876543210</a></p>
+            </div>
+        </div>
+    </div>
+    <div class="footer-middle">
+        <div class="company-links">
+            <h3>Company</h3>
+            <ul>
+                <li><a href="/about">About Us</a></li>
+                <li><a href="">Privacy Policy</a></li>
+                <li><a href="">Terms & Conditions</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="footer-right">
+        <h3>Subscribe Us</h3>
+        <div class="social-media">
+            <a href="#"><i class="fab fa-instagram"></i></a>
+            <a href="#"><i class="fab fa-facebook"></i></a>
+            <a href="#"><i class="fab fa-twitter"></i></a>
+        </div>
+    </div>
+    <div class="copyright">
+        <p>&copy; Wanderlust Private Limited All rights reserved.</p>
     </div>
 </footer>