From fa2e0cbc0f0f3828c18a72e5e58e5ac98d579897 Mon Sep 17 00:00:00 2001 From: Aadil Ayub Date: Tue, 8 Apr 2025 19:11:58 +0500 Subject: [PATCH] create footer --- assets/css/static.css | 86 ++++++++++++++++++++++++++++++++ assets/css/static.css.map | 2 +- assets/images/footer-bg.svg | 15 ++++++ assets/images/footer-logo.svg | 24 +++++++++ assets/images/icon-insta.svg | 5 ++ assets/images/icon-mail.svg | 4 ++ assets/images/icon-yt.svg | 4 ++ assets/scss/static.scss | 94 +++++++++++++++++++++++++++++++++-- page-book-club.php | 67 +++++++++++++++++++++++-- 9 files changed, 294 insertions(+), 7 deletions(-) create mode 100644 assets/images/footer-bg.svg create mode 100644 assets/images/footer-logo.svg create mode 100644 assets/images/icon-insta.svg create mode 100644 assets/images/icon-mail.svg create mode 100644 assets/images/icon-yt.svg diff --git a/assets/css/static.css b/assets/css/static.css index 71061d7..1368499 100644 --- a/assets/css/static.css +++ b/assets/css/static.css @@ -313,4 +313,90 @@ section.book-club-benefits .book-club-benefits-cta p { font-size: 16px; } +footer.somos-infinitos-footer { + padding-inline: 114px; + padding-top: 73px; + margin-top: 200px; + padding-bottom: 150px; + background-image: url("/wp-content/themes/somos-infinitos-theme/assets/images/footer-bg.svg"); + background-repeat: no-repeat; + background-position: right; + background-size: contain; +} +footer.somos-infinitos-footer .footer-navigation { + margin-top: 75px; + margin-bottom: 120px; +} +footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links { + list-style-type: none; + padding-inline-start: 0; + display: grid; + grid-template-columns: repeat(3, 144px); +} +footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links li a { + font-size: 14px; + display: inline-block; + margin-bottom: 14px; + font-weight: 400; + text-transform: uppercase; + text-decoration: none; +} +footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links li a:hover { + text-decoration: underline; +} +footer.somos-infinitos-footer .email-cta h3 { + font-family: var(--wp--preset--font-family--eb-garamond); + font-size: 32px; + font-weight: 400; + line-height: 1; +} +footer.somos-infinitos-footer .email-cta form { + display: flex; + gap: 16px; + margin-block: 16px; +} +footer.somos-infinitos-footer .email-cta form input { + padding: 1em; + font-family: inherit; + width: 370px; + color: var(--foreground-text); + background: transparent; + border: 1px solid var(--foreground-text); + border-radius: 12px; +} +footer.somos-infinitos-footer .email-cta form input::placeholder { + color: var(--foreground-text); +} +footer.somos-infinitos-footer .email-cta form button.btn { + font-family: inherit; + background-color: transparent; + color: var(--foreground-text); + border: 1px solid; + cursor: pointer; +} +footer.somos-infinitos-footer .email-cta form button.btn:hover { + transform: none; +} +footer.somos-infinitos-footer .email-cta .external-social-links { + display: flex; + align-items: center; + gap: 40px; + margin-top: 24px; +} +footer.somos-infinitos-footer .email-cta .external-social-links a { + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; +} +footer.somos-infinitos-footer .email-cta .external-social-links a:hover { + text-decoration: none; +} +footer.somos-infinitos-footer .email-cta .external-social-links a img { + height: 20px; +} +footer.somos-infinitos-footer .email-cta .external-social-links a img.insta, footer.somos-infinitos-footer .email-cta .external-social-links a img.youtube { + height: 24px; +} + /*# sourceMappingURL=static.css.map */ diff --git a/assets/css/static.css.map b/assets/css/static.css.map index 0892eb2..667e00e 100644 --- a/assets/css/static.css.map +++ b/assets/css/static.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EAEE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAI;;AACJ;EAAS;;AACT;EAAiB;;AAKvB;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAIF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;;AAMR;EACE;;AACA;EACE;EACA;EACA;;AAIF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAiB;;AACjB;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EAAO;;AAIX;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE","file":"static.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EAEE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAI;;AACJ;EAAS;;AACT;EAAiB;;AAKvB;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;;AAMR;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAiB;;AACjB;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EAAO;;AAIX;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EAAU;;AAOhB;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACE;;AACA;EACE","file":"static.css"} \ No newline at end of file diff --git a/assets/images/footer-bg.svg b/assets/images/footer-bg.svg new file mode 100644 index 0000000..1b36c35 --- /dev/null +++ b/assets/images/footer-bg.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/images/footer-logo.svg b/assets/images/footer-logo.svg new file mode 100644 index 0000000..56d15d3 --- /dev/null +++ b/assets/images/footer-logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/icon-insta.svg b/assets/images/icon-insta.svg new file mode 100644 index 0000000..0f67ee8 --- /dev/null +++ b/assets/images/icon-insta.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/icon-mail.svg b/assets/images/icon-mail.svg new file mode 100644 index 0000000..190a0a3 --- /dev/null +++ b/assets/images/icon-mail.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/icon-yt.svg b/assets/images/icon-yt.svg new file mode 100644 index 0000000..58601d1 --- /dev/null +++ b/assets/images/icon-yt.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/scss/static.scss b/assets/scss/static.scss index 5343b9d..8add0d8 100644 --- a/assets/scss/static.scss +++ b/assets/scss/static.scss @@ -37,7 +37,6 @@ h2 { font-size: 38px; } -// TODO: add button hover state .btn { border: 1px solid; border-radius: 0.85em; @@ -227,7 +226,6 @@ section.testimonial-section { font-weight: 400; } - // TODO: turn this into a carousel .testimonial-cards { display: flex; gap: 1rem; @@ -270,7 +268,6 @@ section.faq { margin-bottom: 3rem; } - // TODO: animate the accordion https://css-tricks.com/how-to-animate-the-details-element/ .faq-list { border: 1px solid white; border-radius: 12px; @@ -337,4 +334,95 @@ section.book-club-benefits { font-size: 16px; } } +} + +footer.somos-infinitos-footer { + padding-inline: 114px; + padding-top: 73px; + margin-top: 200px; + padding-bottom: 150px; + background-image: url('/wp-content/themes/somos-infinitos-theme/assets/images/footer-bg.svg'); + background-repeat: no-repeat; + background-position: right; + background-size: contain; + + .footer-navigation { + margin-top: 75px; + margin-bottom: 120px; + ul.footer-navigation--links { + list-style-type: none; + padding-inline-start: 0; + display: grid; + grid-template-columns: repeat(3, 144px); + li { + a { + font-size: 14px; + display: inline-block; + margin-bottom: 14px; + font-weight: 400; + text-transform: uppercase; + text-decoration: none; + &:hover { text-decoration: underline; } + } + } + } + } + + .email-cta { + h3 { + font-family: var(--wp--preset--font-family--eb-garamond); + font-size: 32px; + font-weight: 400; + line-height: 1; + } + + form { + display: flex; + gap: 16px; + margin-block: 16px; + input { + padding: 1em; + font-family: inherit; + width: 370px; + color: var(--foreground-text); + background: transparent; + border: 1px solid var(--foreground-text); + border-radius: 12px; + &::placeholder { + color: var(--foreground-text); + } + } + + button.btn { + font-family: inherit; + background-color: transparent; + color: var(--foreground-text); + border: 1px solid; + cursor: pointer; + &:hover { + transform: none; + } + } + } + + .external-social-links { + display: flex; + align-items: center; + gap: 40px; + margin-top: 24px; + a { + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + &:hover { text-decoration: none; } + img { + height: 20px; + &.insta, &.youtube { + height: 24px; + } + } + } + } + } } \ No newline at end of file diff --git a/page-book-club.php b/page-book-club.php index 9ff2ca5..8ca57a4 100644 --- a/page-book-club.php +++ b/page-book-club.php @@ -19,7 +19,6 @@ -