Reduce shop heading background color width and increase margin left t…

…o headings

assets/css/style.css

@@ -173,6 +173,8 @@ main {
     letter-spacing: 0.5px;
     text-transform: uppercase;
     margin: 5px 60px;
+    padding-left: 0.5em;
+    width: 20%;
 }
 
 .m-d.expand-list {

shop.html

@@ -51,7 +51,7 @@ <h1 id="logo" class="barlow-condensed-semibold">
     <!-- MAIN CONTENT -->
     <main>
         <br><br>
-        <h3 class="shop-headings" style="background-color: #66E6E680;">Fashion, Clothing & Accessories</h3>
+        <h3 class="shop-headings" style="background-color: #E0822680;">Clothing & Accessories</h3>
         <!-- EXPAND/COLLAPSE LIST -->
         <ul class="m-d expand-list">
             <li data-md-content="300">
@@ -227,7 +227,7 @@ <h3 class="shop-headings" style="background-color: #A12F8480;">Gifts, Cards & Ho
         </ul>
         <br><br><br>
 
-        <h3 class="shop-headings" style="background-color: #E0822680;">Health & Beauty</h3>
+        <h3 class="shop-headings" style="background-color: #66E6E680;">Health & Beauty</h3>
         <!-- EXPAND/COLLAPSE LIST -->
         <ul class="m-d expand-list">
             <li data-md-content="300">
@@ -341,7 +341,7 @@ <h3 class="shop-headings" style="background-color: #30308680;">Electronics & Acc
         </ul>
         <br><br><br>
 
-        <h3 class="shop-headings" style="background-color: #66E6E680;">Services & Leisure</h3>
+        <h3 class="shop-headings" style="background-color: #E0822680;">Services & Leisure</h3>
         <!-- EXPAND/COLLAPSE LIST -->
         <ul class="m-d expand-list">
             <li data-md-content="300">
@@ -424,22 +424,62 @@ <h3 class="shop-headings" style="background-color: #A12F8480;">Groceries & Newsa
 
 
     <!-- FOOTER -->
-    <footer>
-        <ul id="socials">
-            <li><a href="https://www.facebook.com/KennetShopping" target="_blank" rel="noopener"
-                    aria-label="Visit our Facebook page (opens in a new tab)" <i class="fa-brands fa-facebook-f"></i>
-                </a>
-            </li>
-            <li><a href="https://www.instagram.com/kennetshopping" target="_blank" rel="noopener"
-                    aria-label="Visit our Instagram page (opens in a new tab)" <i class="fa-brands fa-instagram"></i>
-                </a>
-            </li>
-            <li><a href="https://twitter.com/kennet_shopping" target="_blank" rel="noopener"
-                    aria-label="Visit our X / Twitter page (opens in a new tab)" <i class="fa-brands fa-x-twitter"></i>
-                </a>
-            </li>
-        </ul>
+
+    <footer class="footer">
+        <div class="f-container">
+            <div class="row">
+                <div class="footer-column">
+                    <h4>GET IN TOUCH</h4>
+                    <ul>
+                        <li>
+                            <span><i class="fa-solid fa-location-dot"></i></span>
+                            <span>
+                                Centre Management Office
+                                <br>
+                                Kennet Shopping Centre
+                                <br>
+                                Market St, Newbury,
+                                <br>
+                                Berkshire, UK
+                            </span>
+                        </li>
+                        <li>
+                            <span><i class="fa-solid fa-phone"></i></span>
+                            <p>Tel: +44 1635 407480</p>
+                        </li>
+                        <li>
+                            <span><i class="fa-regular fa-envelope"></i></span>
+                            <p><a href="mailto:[email protected]">[email protected]</a></p>
+                        </li>
+                    </ul>
+                </div>
+                <div class="footer-column">
+                    <h4>LINKS</h4>
+                    <ul>
+                        <li><a href="index.html" aria-label="Go to the home page">Home</a></li>
+                        <li><a href="shop.html" aria-label="Go to the Shop page">Shop</a></li>
+                        <li><a href="visit.html" aria-label="Go to the Visit Us page">Visit</a></li>
+                        <li><a href="contact-us.html" aria-label="Go to the Contact Us page">Contact Us</a></li>
+                        <li><a href="privacy-policy.html" aria-label="Go to the Privacy Policy">Privacy Policy</a></li>
+                    </ul>
+                </div>
+                <div class="footer-column">
+                    <h4>FOLLOW US ON SOCIALS</h4>
+                    <div class="social-links">
+                        <a href="https://www.facebook.com/KennetShopping" target="_blank" rel="noopener" aria-label="Visit our Facebook page (opens in a new tab)" <i class="fa-brands fa-facebook-f"></i>
+                        </a>
+                        <a href="https://www.instagram.com/kennetshopping" target="_blank" rel="noopener" aria-label="Visit our Instagram page (opens in a new tab)" <i class="fa-brands fa-instagram"></i>
+                        </a>
+                        <a href="https://twitter.com/kennet_shopping" target="_blank" rel="noopener" aria-label="Visit our X / Twitter page (opens in a new tab)" <i class="fa-brands fa-x-twitter"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </footer>
+    <div class="copyright-text">
+        <p>Copyright © 2024 Kennet Shopping - All Rights Reserved.</p>
+    </div>
 
     <!-- FONT AWESOME KIT -->
     <script src="https://kit.fontawesome.com/3971f457d3.js" crossorigin="anonymous"></script>