diff --git a/assets/footer.css b/assets/footer.css new file mode 100644 index 00000000..8ef07578 --- /dev/null +++ b/assets/footer.css @@ -0,0 +1,116 @@ +/* footer.css */ +.footer { + background-color: #4C148A; + /* Footer background color */ + color: #ffffff; + /* Footer text color */ + padding: 40px; + /* Footer padding */ + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.footer__section { + flex-basis: calc(25% - 20px); + /* Four columns with margins */ + margin-bottom: 15px; +} + +.footer__title { + font-size: 20px; + /* Adjust the font size as needed */ + color: #ffffff; + /* White color for the titles */ + font-weight: 600; + /* Semi-bold for a bit of emphasis */ + margin-bottom: 20px; + /* Space below the title */ + text-transform: uppercase; + /* Uppercase for the title for stylistic choice */ + letter-spacing: 1px; + /* Add some spacing between letters */ +} + +.footer__toggle { + font-size: 20px; /* Example size, adjust as needed */ + color: #ffffff; /* White color for the titles */ + font-weight: 600; /* Semi-bold for emphasis */ + margin-bottom: 20px; /* Space below the title */ + letter-spacing: 1px; /* Spacing between letters */ +} + +.footer__link { + display: block; + color: #ffffff; + margin-bottom: 10px; + text-decoration: none; +} + +.footer__form { + display: flex; + gap: 10px; +} + +.footer__input { + padding: 10px; + border: none; + border-radius: 4px; + flex-grow: 1; +} + +.footer__button { + background-color: #8C65F7; + /* Button background color */ + color: #ffffff; + border: none; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; +} + +.footer__button:hover { + background-color: #7A4FC6; + /* Button hover state */ +} + +/* footer.css */ +.footer__toggle-checkbox { + display: none; + /* Hide the default checkbox */ +} + + +.footer__links-list { + margin-top: 20px; +} + +@media (max-width: 768px) { + .footer { + flex-direction: column; + } + + .footer__section { + flex-basis: 100%; + padding: 0; + } + + .footer__toggle-checkbox { + display: inline-block; + /* Show checkbox in mobile view */ + } + + .footer__links-list { + display: none; + } + + .footer__toggle-checkbox:checked+.footer__toggle+.footer__links-list { + display: block; + } + + .footer__title { + font-size: 18px; + /* Slightly smaller font size for mobile */ + text-align: center; + } +} \ No newline at end of file diff --git a/sections/footer.liquid b/sections/footer.liquid new file mode 100644 index 00000000..70a4f04d --- /dev/null +++ b/sections/footer.liquid @@ -0,0 +1,78 @@ +{{ 'footer.css' | asset_url | stylesheet_tag }} + + + +{% schema %} +{ + "name": "Footer", + "max_blocks": 3, + "blocks": [ + { + "type": "menu", + "name": "Menu item", + "settings": [ + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Footer Heading" + }, + { + "type": "link_list", + "id": "menu", + "label": "Menu" + } + ] + } + ], + "settings": [ + { + "type": "text", + "id": "newsletter_heading", + "label": "Newsletter Heading", + "default": "Join the club" + }, + { + "type": "text", + "id": "email_placeholder", + "label": "Email Placeholder", + "default": "Your email" + }, + { + "type": "text", + "id": "button_text", + "label": "Button Text", + "default": "Subscribe" + } + ], + "presets": [ + { + "name": "Default Footer", + "category": "Footer" + } + ] +} +{% endschema %}