autonomic-cooperative/somos-infinitos-theme
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create footer

Browse Source
This commit is contained in:
Aadil Ayub
2025-04-08 19:11:58 +05:00
parent f78f6687b8
commit fa2e0cbc0f
9 changed files with 294 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
assets/css/static.css
View File

@ -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 */

2
assets/css/static.css.map
View File

@ -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"}
{"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"}

15
assets/images/footer-bg.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

24
assets/images/footer-logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

5
assets/images/icon-insta.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 14C12.2091 14 14 12.2091 14 10C14 7.79086 12.2091 6 10 6C7.79086 6 6 7.79086 6 10C6 12.2091 7.79086 14 10 14Z" stroke="#FAF7EF" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 14V6C1 3.23858 3.23858 1 6 1H14C16.7614 1 19 3.23858 19 6V14C19 16.7614 16.7614 19 14 19H6C3.23858 19 1 16.7614 1 14Z" stroke="#FAF7EF"/>
<path d="M15.498 4.51145L15.5092 4.49902" stroke="#FAF7EF" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 551 B

4
assets/images/icon-mail.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="23" height="17" rx="2.5" stroke="#FAF7EF"/>
<path d="M1.5 1.5L9.82993 10.2266C11.0118 11.4647 12.9882 11.4647 14.1701 10.2266L22.5 1.5" stroke="#FAF7EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 287 B

4
assets/images/icon-yt.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6008 12.2299L12.0508 14.8299V9.62988L16.6008 12.2299Z" fill="#FAF7EF" stroke="#FAF7EF" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 13.1504V11.3096C1 7.5461 1 5.6637 2.1765 4.4534C3.3543 3.2418 5.2081 3.1898 8.9144 3.0845C10.6694 3.0351 12.4634 3 14 3C15.5366 3 17.3293 3.0351 19.0856 3.0845C22.7919 3.1898 24.6457 3.2418 25.8222 4.4534C26.9987 5.665 27 7.5474 27 11.3096V13.1491C27 16.9139 27 18.795 25.8235 20.0066C24.6457 21.2169 22.7932 21.2702 19.0856 21.3742C17.3306 21.4249 15.5366 21.46 14 21.46C12.4634 21.46 10.6707 21.4249 8.9144 21.3742C5.2081 21.2702 3.3543 21.2182 2.1765 20.0066C0.9987 18.795 1 16.9126 1 13.1504Z" stroke="#FAF7EF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 781 B

94
assets/scss/static.scss
View File

@ -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;
}
}
}
}
}
}

67
page-book-club.php
View File

@ -19,7 +19,6 @@
<body class="book-club-landing">
<?php wp_body_open(); ?>
<!-- TODO: make header design more accurate -->
<header class="site-navigation">
<a class="logo-wrapper" href="/">
<img
@ -52,7 +51,6 @@
<section class="sponsor-logos">
<div class="container">
<!-- TODO: fix logo resolution -->
<img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/porta-editora.svg'); ?>">
<img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/albatroz.svg'); ?>">
<img src="<?= get_theme_file_uri('/assets/images/sponsor-logos/manuscrito.svg'); ?>">
@ -214,8 +212,71 @@
</section>
</main>
<footer>
<footer class="somos-infinitos-footer">
<a class="footer--logo" href="<?= site_url('/') ?>">
<img src="<?= get_theme_file_uri('/assets/images/footer-logo.svg'); ?>">
</a>
<div class="container">
<nav class="footer-navigation">
<ul class="footer-navigation--links">
<div class="footer-navigation--column col-1">
<li>
<a href="#">Livros</a>
</li>
<li>
<a href="<?= site_url('/book-club') ?>">Book Club</a>
</li>
<li>
<a href="#">Mentoria</a>
</li>
<li>
<a href="#">Podcast</a>
</li>
</div>
<div class="footer-navigation--column col-2">
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Junta-Te</a>
</li>
</div>
<div class="footer-navigation--column col-3">
<li>
<a href="#">Sobre Nos</a>
</li>
<li>
<a href="#">FAQs</a>
</li>
<li>
<a href="#">Contacta-Nos</a>
</li>
<li>
<a href="#">Termos & Privacidade</a>
</li>
</div>
</ul>
</nav>
<div class="email-cta">
<h3>Acompanha-nos por aqui!</h3>
<form>
<input type="email" name="email-signup" id="email-signup" placeholder="countmein@email.com">
<button type="submit" class="btn">INSCREVE-TE</button>
</form>
<nav class="external-social-links">
<a href="#">
<img class="insta" src="<?= get_theme_file_uri('/assets/images/icon-insta.svg'); ?>" alt="Instagram">
</a>
<a href="#">
<img class="youtube" src="<?= get_theme_file_uri('/assets/images/icon-yt.svg'); ?>" alt="YouTube">
</a>
<a href="#">
<img class="mail" src="<?= get_theme_file_uri('/assets/images/icon-mail.svg'); ?>" alt="E-mail">
</a>
</nav>
</div>
</div>
</footer>
<?php wp_footer(); ?>