diff --git a/src/css/layout/footer.css b/src/css/layout/footer.css
index eda16c0..d560b82 100644
--- a/src/css/layout/footer.css
+++ b/src/css/layout/footer.css
@@ -243,3 +243,129 @@
background-image: url(/img/footer/footer-bg-desktop@2x.png);
}
}
+
+/* footer - team */
+@media screen and (max-width: 1279px) {
+ .our-stars {
+ display: none;
+ }
+}
+@media screen and (min-width: 1280px) {
+ .our-stars {
+ display: flex;
+ gap: 8px;
+ justify-content: center;
+ align-items: baseline;
+ margin-top: 0;
+ margin-bottom: 12px;
+ }
+
+ .footer-text-team,
+ .footer-team-link {
+ color: var(--secondary-text-color);
+ font-size: 12px;
+ line-height: 0.83;
+ letter-spacing: -0.02em;
+ opacity: 0.9;
+ }
+
+ .footer-team-link {
+ text-decoration: underline;
+ border: none;
+ background-color: transparent;
+ }
+
+ .footer-icon-team {
+ margin-left: 8px;
+ fill: none;
+ stroke: var(--secondary-text-color);
+ animation: pulse 2s infinite;
+ }
+
+ @keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.2);
+ }
+ 100% {
+ transform: scale(1);
+ }
+ }
+}
+
+/* modal */
+.footer-modal-backdrop {
+ position: fixed;
+ z-index: 100;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(27, 27, 27, 0.6);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+}
+.footer-modal-backdrop.is-open {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+ transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
+ visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.our-team-footer-card {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+ background-color: var(--secondary-text-color);
+ border-radius: 20px;
+ padding: 32px;
+}
+
+.footer-team-list {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ gap: 24px;
+}
+
+.footer-team-list-item {
+ width: calc((100% - 96px) / 5);
+}
+.footer-team-member-img:hover,
+.footer-team-member-img:focus {
+ transform: scale(1.05);
+ box-shadow: 0 0 25px #0f0e0eb3;
+}
+
+.footer-team-member-img {
+ border-radius: 50%;
+ margin-bottom: 8px;
+}
+
+.footer-team-member-info {
+ width: 1096px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.footer-team-member-name {
+ color: var(--main-text-color);
+}
+
+.team-sm-icon {
+ fill: var(--dark-grey);
+}
+
+.team-sm-icon:hover,
+.team-sm-icon:focus {
+ fill: #5f6560;
+}
diff --git a/src/index.html b/src/index.html
index 26347a2..ca11788 100644
--- a/src/index.html
+++ b/src/index.html
@@ -42,6 +42,8 @@
+
+
diff --git a/src/js/our-team-modal.js b/src/js/our-team-modal.js
new file mode 100644
index 0000000..18f9a7a
--- /dev/null
+++ b/src/js/our-team-modal.js
@@ -0,0 +1,12 @@
+// MODAL
+const closeBtnFooter = document.querySelector('.footer-close-btn');
+const backDropFooter = document.querySelector('.footer-modal-backdrop');
+
+const openFooterModalBtn = document.querySelector('.footer-team-link');
+openFooterModalBtn.addEventListener('click', function () {
+ backDropFooter.classList.add('is-open');
+});
+
+closeBtnFooter.addEventListener('click', function () {
+ backDropFooter.classList.remove('is-open');
+});
diff --git a/src/main.js b/src/main.js
index 313b33a..bdc3aa2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,3 +4,4 @@ import('./js/exersises');
import('./js/submit-email-footer');
import('./js/quote');
import('./js/page-after-switch');
+import('./js/our-team-modal');
diff --git a/src/partials/footer.html b/src/partials/footer.html
index 9b9b835..01031a6 100644
--- a/src/partials/footer.html
+++ b/src/partials/footer.html
@@ -71,4 +71,21 @@
+