Skip to content

Commit

Permalink
Merge pull request #7 from KristinaHranovska/footer
Browse files Browse the repository at this point in the history 
Footer
  • Loading branch information
@KristinaHranovska
KristinaHranovska authored Feb 11, 2024
2 parents e0a1fd5 + 485b89f commit 3c9e8d1
Show file tree
Hide file tree
Showing 3 changed files with 349 additions and 0 deletions.
267 changes: 267 additions & 0 deletions src/css/footer.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,267 @@
/* Футер */
.footer {
width: 335px;
background-image: url('../img/footer/footer_mobile.webp');
background-size: cover;
border-radius: 30px;
padding-top: 40px;
padding-bottom: 20px;

@media screen and (min-width: 320px) and (min-resolution: 192dpi) {
background-image: url('../img/footer/footer_mobile@2x.webp');
}

@media screen and (min-width: 768px) {
width: 736px;
height: 576px;
border-radius: 50px;
background-image: url('../img/footer/footer_tablet.webp');
position: relative;
padding-top: 64px;
padding-bottom: 32px;
}

@media screen and (min-width: 768px) and (min-resolution: 192dpi) {
background-image: url('../img/footer/footer_tablet@2x.webp');
}

@media screen and (min-width: 1440px) {
width: 1408px;
height: 454px;
background-image: url('../img/footer/footer_1440.webp');
}
@media screen and (min-width: 1440px) and (min-resolution: 192dpi) {
background-image: url('../img/footer/footer_1440@2x.webp');
}
}

.footer-container {
@media screen and (min-width: 768px) {
display: flex;
flex-wrap: wrap;
gap: 32px 139px;
padding-right: 41px;
padding-left: 48px;
}
@media screen and (min-width: 1440px) {
flex-wrap: nowrap;
gap: 160px;
}
}

/* Лого та лінки */
.footer-company-info {
margin-bottom: 40px;

@media screen and (min-width: 768px) {
margin-bottom: 0;
}
}

.footer-company-logo {
font-weight: 700;
font-size: 16px;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--text-light);
display: block;
margin-bottom: 9px;

@media screen and (min-width: 768px) {
font-size: 28px;
line-height: 1;
margin-bottom: 30px;
}
}

.footer-social-list {
display: flex;
gap: 12px;
@media screen and (min-width: 768px) {
}
}

/* .footer-social-item {
} */

.footer-social-link {
display: flex;
align-items: center;
border-radius: 10px;
border: 1px solid rgba(246,246,246,.2);

padding: 8px;

}

.footer-social-icon {
fill: var(--text-light);
@media screen and (min-width: 768px) {
width: 28px;
height: 28px;
}
}

/* Заголовок */
.footer-title {
font-weight: 400;
color: var(--text-light);
font-size: 32px;
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 20px;

@media screen and (min-width: 768px) {
width: 345px;
font-size: 54px;
line-height: .93;
margin-bottom: 0;
}
@media screen and (min-width: 1440px) {
width: 488px;
line-height: 0.97;
width: 430px;
/* margin-left: 55px; */
}
}

.footer-title-span {
color: var(--text-light);
opacity: 0.3;
font-style: italic;
}

/* Підписка */
.footer-subscription {
/* margin-bottom: 60px; */
margin-bottom: 120px;


@media screen and (min-width: 768px) {
margin-left: auto;
width: 352px;
}

@media screen and (min-width: 1440px) {
margin-bottom: 0;
}
}

.footer-subscription-title {
font-weight: 400;
font-size: 14px;
line-height: 1.28;
color: var(--text-light);
margin-bottom: 20px;

@media screen and (min-width: 768px) {
font-size: 18px;
line-height: 1.33;
}
}

/* .footer-subscription-form {
} */

/* .footer-subscription-label {
} */

.footer-subscription-input {
width: 100%;
font-weight: 400;
font-size: 14px;
line-height: 1.29;
padding: 12px 14px;
color: var(--text-color-alfa);
border: 1px solid var(--text-light);
background-color: transparent;
border-radius: 30px;
margin-bottom: 12px;

@media screen and (min-width: 768px) {
width: 100%;
margin-bottom: 20px;
}
}

.footer-subscription-button {
font-weight: 400;
font-size: 14px;
line-height: 1.3;
color: var(--text-light);
background-color: var(--dark-grey-background);
border-radius: 30px;
border: none;
/* display: flex;
justify-content: center;
align-items: center;
gap: 10px; */
padding: 12px 130px;
@media screen and (min-width: 768px) {
width: 100%;
padding: 12px 157px;
font-size: 16px;
line-height: 1.33;
}
}

/* Права */
.footer-security {
display: inline-flex;
flex-direction: column;
gap: 10px;
@media screen and (min-width: 768px) {
position: absolute;
align-items: center;
flex-direction: row;
bottom: 32px;
gap: 32px;
left: 148px;
}

@media screen and (min-width: 1440px) {
left: 485px;
bottom: 26px;
}
}

.footer-security-title {
font-weight: 400;
font-size: 12px;
line-height: 0.83;
letter-spacing: -0.02em;
color: var(--text-light);
opacity: .9;

@media screen and (min-width: 768px) {
font-size: 14px;
line-height: 1.28;
}
}

.footer-security-list {
display: flex;
justify-content: flex-start;
}

.footer-security-item {
font-weight: 400;
font-size: 12px;
color: var(--text-light);
line-height: .83;
letter-spacing: -.02em;

@media screen and (min-width: 768px) {
font-size: 14px;
}
}

.footer-security-list li:not(:last-child):after {
content: "/";
margin: 0 8px;
color: var(--text-light);
font-size: 12px;
line-height: 0.83;
}
35 changes: 35 additions & 0 deletions src/js/subscribe.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { postAccess } from './helper/get-access';
import { iziToastFunctions } from './helper/helpers';

const emailPattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
const footerForm = document.querySelector('.footer-subscription-form');
const footerInput = document.querySelector('.footer-subscription-input');
const feedbackForm = "feedback-subscribe-state";

const subscribeValidity = async (event) => {
event.preventDefault();

const email = footerInput.value.trim();

if (!emailPattern.test(email)) {
iziToastFunctions.getErrorInfo('Enter the correct email!');
} else {
try {
await postAccess({ userEmail: { email }, typeFilter: 'subscription' });
iziToastFunctions.getSuccessInfo('Successful subscription!');
} catch (error) {
iziToastFunctions.getErrorInfo('The user with this address is already subscribed!');
}

localStorage.removeItem(feedbackForm);
footerForm.reset();
}
};

footerForm.addEventListener('submit', subscribeValidity);

footerForm.addEventListener('input', (event) => {
const footerEmail = footerInput.value.trim();
const formData = JSON.stringify({ footerEmail });
localStorage.setItem(feedbackForm, formData);
});
47 changes: 47 additions & 0 deletions src/partials/footer.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<footer class="section">
<div class="container footer-container footer">
<div class="footer-company-info">
<a href="../index.html" class="footer-company-logo">energy.flow</a>
<ul class="footer-social-list">
<li class="footer-social-item">
<a href="https://www.facebook.com/goITclub/" target="_blank" class="footer-social-link">
<svg class="footer-social-icon" width="20" height="20">
<use href="/img/icons/sprite.svg#icon-facebook"></use>
</svg>
</a>
</li>
<li class="footer-social-item">
<a href="https://www.instagram.com/goitclub/" target="_blank" class="footer-social-link">
<svg class="footer-social-icon" width="20" height="20">
<use href="/img/icons/sprite.svg#icon-youtube"></use>
</svg>
</a>
</li>
<li class="footer-social-item">
<a href="https://www.youtube.com/c/GoIT" target="_blank" class="footer-social-link">
<svg class="footer-social-icon" width="20" height="20">
<use href="/img/icons/sprite.svg#icon-instagram"></use>
</svg>
</a>
</li>
</ul>
</div>
<h2 class="footer-title"> Transforming your <span class="footer-title-span">body</span> shape with us</h2>
<div class="footer-subscription">
<p class="footer-subscription-title">Subscribe and learn about new exercises!</p>
<form class="footer-subscription-form">
<label class="footer-subscription-label">
<input type="email" class="footer-subscription-input" placeholder="Email">
</label>
<button class="footer-subscription-button">Send</button>
</form>
</div>
<div class="footer-security">
<p class="footer-security-title">Energy Flow. All rights reserved.</p>
<ul class="footer-security-list">
<li class="footer-security-item">Privacy Policy</li>
<li class="footer-security-item">Terms of Service</li>
</ul>
</div>
</div>
</footer>

0 comments on commit 3c9e8d1

Please sign in to comment.