CSS
unknown
html
a month ago
5.7 kB
0
Indexable
Never
<div class="footer"> <div class="footer-content"> <div class="footer-section about"> <h2>Jewelry Store</h2> <p> At Melissa's Store, we offer the finest jewelry. Our pieces are designed to capture the essence of beauty, elegance, and sophistication. </p> </div> <div class="footer-section links"> <h2>Quick Links</h2> <ul> <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="footer-section contact"> <h2>Contact Us</h2> <p><i class="fas "></i> Scarborough Ontario</p> <p><i class="fas"></i> +1 234 567 890</p> <p><i class="fas"></i> contact@contact.com</p> </div> </div> <div class="footer-bottom"> © 2023 Melissa's Store | Designed by Mathew </div> </div> ``` This is the part of the index page in question: ``` <div class="products"> <!-- Example product items. In a real-world scenario, these would be dynamically loaded. --> <div class="product"> <img src="images/image1.jpeg" alt="Jewelry Item 1" width="100%"> <button class="add-to-cart-btn">Add to Cart</button> </div> <div class="product"> <img src="images/image2.jpeg" alt="Jewelry Item 2" width="100%"> <button class="add-to-cart-btn">Add to Cart</button> </div> <div class="product"> <img src="images/image2.jpeg" alt="Jewelry Item 2" width="100%"> <button class="add-to-cart-btn">Add to Cart</button> </div> <div class="product"> <img src="images/image1.jpeg" alt="Jewelry Item 2" width="100%"> <button class="add-to-cart-btn">Add to Cart</button> </div> <!-- Add more product items as needed --> </div> </div> <div id="footerContainer"></div> <script> fetch('footer.html') .then(response => response.text()) .then(data => { document.getElementById('footerContainer').innerHTML = data; }); </script> </div> ``` This is my CSS: ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; padding-top: 5%; } .header { background-color: #333; color: #fff; padding: 20px 0; text-align: center; position: fixed; /* This will fix the header at the top */ top: 0; /* Ensure it's at the very top */ left: 0; /* Align it to the left edge */ right: 0; /* Align it to the right edge */ z-index: 1000; /* Ensure it stays on top of other elements */ } .cart { position: absolute; top: 20px; right: 10px; } .products { display: flex; flex-wrap: wrap; justify-content: center; max-height: 600px; /* Change this value based on your needs */ padding: 10px; } .product { /* border: 1px solid #ccc; */ margin: 10px; padding: 10px; width: calc(33% - 20px); /* width minus margin */ text-align: center; position: relative; overflow: hidden; } @media only screen and (max-width: 768px) { /* This threshold (768px) is just an example. Adjust as needed */ .product { width: calc(100% - 20px); /* Occupies full width minus margin */ flex: 1 0 auto; } .footer{ flex-shrink: 0; } body, html { height: 100%; margin: 0; padding-top: 5%; } .main-wrapper { display: grid; grid-template-rows: auto 1fr auto; } .site-content { width: 95%; overflow: hidden; /* Allows the content to scroll if it overflows */ } } .add-to-cart-btn { position: absolute; bottom: 10px; /* Adjust as needed for vertical position */ right: 10px; /* Adjust as needed for horizontal position */ background-color: #333; /* Any color you want */ color: #fff; /* Font color */ border: none; padding: 5px 15px; cursor: pointer; transition: background-color 0.3s ease; /* Add any other styles you want for the button */ } .add-to-cart-btn:hover { background-color: #555; /* Adjust hover color as needed */ } .footer { background-color: #333; color: #ffffff; padding: 20px 0; } .footer-content { display: flex; justify-content: space-between; padding: 0 20px; max-width: 1200px; margin: 0 auto; } .footer-section { flex: 1; padding: 0 20px; } .footer-bottom { text-align: center; padding: 10px; background-color: #222; } ul { list-style: none; padding: 0; } li { margin-bottom: 10px; } a { color: #ffffff; text-decoration: none; } a:hover { text-decoration: underline; } /* If you're using Font Awesome for icons */ .fas { margin-right: 10px; } .button-16 { background-color: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px; color: #3c4043; cursor: pointer; font-family: arial,sans-serif; } .button-16:hover { border-color: #dadce0; box-shadow: rgba(0, 0, 0, .1) 0 1px 1px; color: #202124; } .button-16:focus { border-color: #4285f4; outline: none; }