Merge pull request #827 from dohinaf/combine

Combine#716
dohinaf · Nov 8, 2024 · 5dc6c9c · 5dc6c9c
2 parents 6337f7c + 06c8b1d
commit 5dc6c9c
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 63 deletions.
diff --git a/index.html b/index.html
@@ -1667,34 +1667,58 @@ <h2 data-aos="zoom-out-down" data-aos-duration="1200" data-aos-delay="200">Share
 
 <!-- Footer Section Starts Here -->
 
-    <section class="footer" id="footer">
-<div>
-    <img src="https://hits.sh/arcticdelights.netlify.app.svg?label=Website%20Visitors&extraCount=6520&color=FE6648&labelColor=white" alt="web-views">
-</div>
-<div class="social-icons">
-    <a href="#"><i class="fa-brands fa-linkedin"></i></a>
-    <a href="#"><i class="fa-brands fa-facebook"></i></a>
-    <a href="#"><i class="fa-brands fa-x-twitter"></i></a> <!-- Updated X icon -->
-    <a href="#"><i class="fa-brands fa-instagram"></i></a>
-    <a href="#"><i class="fa-brands fa-pinterest"></i></a>
-</div>
-</div>
-
-        <!--  
-<div class="links">
-<a href="#">Home</a>
-<a href="#">About</a>
-<a href="#">Menu</a>
-<a href="#">Review</a>
-<a href="#">Blogs</a>
-</div> -->
-
-        <div class="credit">
-            <p> created by <span> Dohina</span> | <a href="copyright.html"> &copy;Copyright 2024 </a> | all rights reserved
-            <p>
+<!-- <div class="footercolor"> -->
+  <section class="footer" id="footer" style="background-color: black ">
+    <hr> <!-- Horizontal line -->
+
+    <!-- Parent div wrapping all footer content -->
+    <div class="footer-row">
+
+      <!-- Child div for 'About Scruter' -->
+      <div class="footer-column">
+        <h3>About ArcticDelights </h3>
+        <p>At Arctic Delights, we believe that every scoop of ice cream should be a masterpiece. We handpick the finest, sustainably sourced ingredients to craft flavors that not only cool you down but also take your taste buds on an unforgettable journey. </p>
+      </div>
+
+      <!-- Child div for 'Quick Links' -->
+      <div class="footer-column">
+        <h3>Quick Links</h3>
+        <a href="#">About Us</a>
+        <a href="#">Our Team</a>
+        <a href="#">Privacy Policy</a>
+        <a href="#">Terms of Service</a>
+        <a href="#">Our Contributors</a>
+      </div>
+
+      <!-- Child div for 'Help Desk' -->
+      <div class="footer-column">
+        <h3>Help Desk</h3>
+        <a href="#">Help Center</a>
+        <a href="#">FAQ</a>
+        <a href="#">Contact Us</a>
+        <a href="#">Support</a>
+      </div>
+
+      <!-- Child div for 'Follow Us' -->
+      <div class="footer-column">
+        <h3>Follow Us</h3>
+        <div class="social-icons">
+          <a href="#"><i class="fa-brands fa-linkedin"></i></a>
+          <a href="#"><i class="fa-brands fa-facebook"></i></a>
+          <a href="#"><i class="fa-brands fa-x-twitter"></i></a> <!-- Updated X icon -->
+          <a href="#"><i class="fa-brands fa-instagram"></i></a>
+          <a href="#"><i class="fa-brands fa-pinterest"></i></a>
         </div>
-
-    </section>
+      </div>
+
+    </div>
+
+    <!-- Footer credit -->
+    <div class="credit">
+      <p>created by Dohina</p>
+    </div>
+  </section>
+<!-- </div> -->
 
     <!-- Footer Section Ends Here -->
 

diff --git a/style.css b/style.css
@@ -1383,63 +1383,82 @@ button:hover {
 }
 
 /* Footer Styles */
+/* Footer styles */
+
 
 .footer {
-  background-color: var(--background-color);
-  text-align: center;
+  padding: 20px;
+  background-color: #FF6F61; /* Ice cream color */
+  color: white;
+  width: 100%;
 }
 
-.footer .share {
-  padding: 1rem 0;
+.footer hr {
+  border: 0;
+  border-top: 1px solid white;
+  margin: 20px 0;
 }
 
-.footer .share a {
-  height: 5rem;
-  width: 5rem;
-  line-height: 5rem;
-  font-size: 2rem;
-  color: var(--text-color);
-  border: var(--border);
-  margin: 0.3rem;
-  border-radius: 50%;
+/* Parent div styling */
+.footer-row {
+  display: flex;
+  justify-content: space-between; /* Ensures space between child divs */
+  flex-wrap: nowrap; /* Prevent wrapping */
+  align-items: flex-start; /* Aligns child divs at the top */
 }
 
-.footer .share a:hover {
-  background-color: var(--background-color);
+/* Child div styling */
+.footer-column {
+  flex: 1;
+  min-width: 200px; /* Ensures child divs do not shrink too much */
+  margin: 0 15px;
 }
 
-.footer .links {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  padding: 10px 0;
-  gap: 10px;
+.footer h3 {
+  margin-bottom: 10px;
+  font-size: 1.5vw;
+  color: white;
 }
 
-.footer .links a {
-  padding: 0.7rem 2rem;
-  color: var(--text-color);
-  border: var(--border);
-  font-size: 2rem;
+.footer a {
+  display: block;
+  color: white;
+  transition: color 0.3s;
+  margin-bottom: 5px;
+  size: 1vw;
 }
 
-.footer .links a:hover {
-  background-color: var(--background-color);
+.footer a:hover {
+  color: #ddd; /* Subtle hover effect */
 }
 
-footer .credit {
-  font-size: 2rem;
-  font-weight: lighter;
-  padding: 1.5rem;
+/* Social icons container */
+.footer .social-icons {
+  display: flex;
+  justify-content: center; /* Center align icons */
+}
+a{
+  font-size: 1vw;
 }
 
-.footer .credit p {
-  color: var(--text-color);
+.footer .social-icons a {
+  margin: 0 10px;
+  color: white;
+  transition: color 0.3s;
+  margin-top: 2vw;
 }
 
-.footer .credit span {
-  color: var(--text-color);
+.footer .social-icons a:hover {
+  color: #ddd; /* Subtle hover effect */
+}
+
+/* Footer credit */
+.footer .credit {
+  margin-top: 20px;
+  width: 100%;
+  text-align: center;
 }
+/* Footer Styles */
 
 /* Media Queries */
 @media (max-width: 991px) {