diff --git a/src/js/footerModalOpen.js b/src/js/footerModalOpen.js
index f861d09249e12171261af9a46fafd413fe652257..67f9b4fe9970caff65671dbfbe013c5f1b4c7eea 100644
--- a/src/js/footerModalOpen.js
+++ b/src/js/footerModalOpen.js
@@ -4,17 +4,27 @@ const refs = {
modal: document.querySelector('[data-modal]'),
bodyScroll: document.querySelector('body'),
overlay: document.querySelector('.overlay'),
+ list: document.querySelector('.team'),
};
refs.openModalBtn.addEventListener('click', openModal);
+const array = [...refs.list.children];
+
function openModal() {
refs.modal.classList.toggle('footer__backdrop--hidden');
refs.bodyScroll.classList.toggle('is-open');
document.addEventListener('keydown', eventKeydown);
- setTimeout(hideOverlay, 1500);
+
+ setTimeout(hideOverlay, 1000);
setTimeout(showBackground, 3000);
refs.closeModalBtn.addEventListener('click', closeModal);
+ array.reduce((acc, item) => {
+ acc += 250;
+ setTimeout(() => (item.style.opacity = '1'), acc + 500);
+ setTimeout(() => item.classList.remove('big'), (acc += 1000));
+ return acc;
+ }, 1000);
}
function closeModal() {
@@ -25,6 +35,10 @@ function closeModal() {
refs.modal.classList.toggle('modal-bg');
refs.closeModalBtn.removeEventListener('click', closeModal);
document.removeEventListener('keydown', eventKeydown);
+ array.map(item => {
+ item.classList.add('big');
+ item.style.opacity = '0';
+ });
}
function hideOverlay() {
diff --git a/src/partials/footer-modal.html b/src/partials/footer-modal.html
index 0b8ad43d9085a549344a683d51e661c42afee6b8..66534c998378449b5eeb98c6cc096ac1dfef4f30 100644
--- a/src/partials/footer-modal.html
+++ b/src/partials/footer-modal.html
@@ -1,88 +1,79 @@
<div class="footer__backdrop--visible footer__backdrop--hidden" data-modal>
- <div class="footer__modal">
- <button class="footer__button-close" type="button" data-modal-close>
- <svg class="footer__close-icon" width="18" height="18">
- <use href="./images/sprite.svg#close"></use>
- </svg>
-</button>
- <h2 class="footer-modal__title">Наша супер команда</h2>
-
- <ul class="team list">
- <li class="team__item">
- <img class="team__img" src="./images/photo1-desktop.jpg" alt="Фото Игоря Демьяненко">
- <div class="team__wrapper">
- <h3 class="team__title">Михаил Ермаков</h3>
- <p lang="en" class="team__text">UI Designer</p>
-
- </div>
- </li>
-
- <li class="team__item">
- <img class="team__img" src="./images/photo1-desktop.jpg" alt="Фото Игоря Демьяненко">
- <div class="team__wrapper">
- <h3 class="team__title">Михаил Ермаков</h3>
- <p lang="en" class="team__text">UI Designer</p>
-
- </div>
- </li>
-
- <li class="team__item">
- <img class="team__img" src="./images/photo1-desktop.jpg" alt="Фото Игоря Демьяненко">
- <div class="team__wrapper">
- <h3 class="team__title">Михаил Ермаков</h3>
- <p lang="en" class="team__text">UI Designer</p>
-
- </div>
- </li>
-
- <li class="team__item">
- <img class="team__img" src="./images/photo1-desktop.jpg" alt="Фото Игоря Демьяненко">
- <div class="team__wrapper">
- <h3 class="team__title">Михаил Ермаков</h3>
- <p lang="en" class="team__text">UI Designer</p>
-
- </div>
- </li>
- <li class="team__item">
- <img class="team__img" src="./images/photo1-desktop.jpg" alt="Фото Игоря Демьяненко">
- <div class="team__wrapper">
- <h3 class="team__title">Михаил Ермаков</h3>
- <p lang="en" class="team__text">UI Designer</p>
-
- </div>
- </li>
-
- <li class="team__item">
- <img class="team__img" src="./images/photo1-desktop.jpg" alt="Фото Игоря Демьяненко">
- <div class="team__wrapper">
- <h3 class="team__title">Михаил Ермаков</h3>
- <p lang="en" class="team__text">UI Designer</p>
-
- </div>
- </li>
-
- <li class="team__item">
- <img class="team__img" src="./images/photo1-desktop.jpg" alt="Фото Игоря Демьяненко">
- <div class="team__wrapper">
- <h3 class="team__title">Михаил Ермаков</h3>
- <p lang="en" class="team__text">UI Designer</p>
-
- </div>
- </li>
-
- <li class="team__item">
- <img class="team__img" src="./images/photo1-desktop.jpg" alt="Фото Игоря Демьяненко">
- <div class="team__wrapper">
- <h3 class="team__title">Михаил Ермаков</h3>
- <p lang="en" class="team__text">UI Designer</p>
+ <div class="footer__modal">
+ <button class="footer__button-close" type="button" data-modal-close>
+ <svg class="footer__close-icon" width="18" height="18">
+ <use href="./images/sprite.svg#close"></use>
+ </svg>
+ </button>
+ <h2 class="footer-modal__title">Наша супер команда</h2>
+
+ <ul class="team list">
+ <li class="team__item big">
+ <div class="team__img" style="background-image: url(./images/masha.jpg)"></div>
+ <div class="team__wrapper">
+ <h3 class="team__title">Masha</h3>
+ <p lang="en" class="team__text">Team-lead</p>
+ </div>
+ </li>
+
+ <li class="team__item big">
+ <div class="team__img" style="background-image: url(./images/sergio.jpg)"></div>
+ <div class="team__wrapper">
+ <h3 class="team__title">Sergio Pieshko</h3>
+ <p lang="en" class="team__text">SCRUM-master</p>
+ </div>
+ </li>
- </div>
- </li>
+ <li class="team__item big">
+ <div class="team__img team__img--left" style="background-image: url(./images/ruslan.jpg)"></div>
+ <div class="team__wrapper">
+ <h3 class="team__title">Ruslan Moiseyenko</h3>
+ <p lang="en" class="team__text">Developer</p>
+ </div>
+ </li>
- </ul>
- <div class="overlay">
- <h1>Наша супер команда</h1>
- </div>
- </div>
+ <li class="team__item big">
+ <div class="team__img" style="background-image: url(./images/valdes.jpg)"></div>
+ <div class="team__wrapper">
+ <h3 class="team__title">Vladislav Boyko</h3>
+ <p lang="en" class="team__text">Developer</p>
+ </div>
+ </li>
-</div>
+ <li class="team__item big">
+ <div class="team__img" style="background-image: url(./images/tolik.jpg)"></div>
+ <div class="team__wrapper">
+ <h3 class="team__title">Anatolii Kryvoruchko</h3>
+ <p lang="en" class="team__text">Developer</p>
+ </div>
+ </li>
+
+ <li class="team__item big">
+ <div class="team__img" style="background-image: url(./images/kirill.jpg)"></div>
+ <div class="team__wrapper">
+ <h3 class="team__title">Kirill Bodnar</h3>
+ <p lang="en" class="team__text">Developer</p>
+ </div>
+ </li>
+
+ <li class="team__item big">
+ <div class="team__img team__img--centered" style="background-image: url(./images/oksana.jpg)"></div>
+ <div class="team__wrapper">
+ <h3 class="team__title">Oksana Iemets</h3>
+ <p lang="en" class="team__text">Developer</p>
+ </div>
+ </li>
+
+ <li class="team__item big">
+ <div class="team__img" style="background-image: url(./images/serhii.jpg)"></div>
+ <div class="team__wrapper">
+ <h3 class="team__title">Serhii Rubtsov</h3>
+ <p lang="en" class="team__text">Developer</p>
+ </div>
+ </li>
+ </ul>
+ <div class="overlay">
+ <h1>Наша супер команда</h1>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/sass/_footer-modal.scss b/src/sass/_footer-modal.scss
index 6024e05c8f3e2bff3f49bb4b389eb6a987efb1ce..fe348f707d95af5903220b8fd829d32e86b39979 100644
--- a/src/sass/_footer-modal.scss
+++ b/src/sass/_footer-modal.scss
@@ -1,3 +1,5 @@
+/*бекдроп и оверлей*/
+
.footer__backdrop--visible {
overflow-y: scroll;
padding: 93px 15px;
@@ -23,10 +25,46 @@
pointer-events: none;
}
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ opacity: 1;
+ font-size: 40px;
+
+ @media screen and (max-width: 767px) {
+ font-size: 30px;
+ }
+
+ font-weight: 700;
+ text-align: center;
+ background-image: url(../images/bg_modal-team.jpg);
+
+ transition: opacity 250ms linear;
+
+ z-index: 4;
+
+ width: 100%;
+ height: 100%;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+
+ pointer-events: none;
+}
+
+.modal-bg {
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
+ url('../images/bg_modal-team.jpg');
+}
+
+/*модалка*/
+
.footer__modal {
.footer__backdrop--visible & {
padding: 45px;
- padding-top: 60px;
+ padding-top: 15px;
+ padding-bottom: 15px;
border-radius: 4px;
background-color: #fff;
position: relative;
@@ -37,11 +75,12 @@
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
- max-width: 586px;
+ max-width: 520px;
}
@media screen and (min-width: 1024px) {
- width: 942px;
+ width: 738px;
+ height: 482px;
position: absolute;
top: 50%;
left: 50%;
@@ -54,40 +93,12 @@
}
}
-.footer-modal__title {
- text-align: center;
- margin-bottom: 20px;
-}
-
-.modal-bg {
- background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
- url('../images/bg_modal-team.jpg');
-}
+/*наполнение модалки*/
-.overlay {
- position: fixed;
- top: 0;
- left: 0;
- opacity: 1;
- font-size: 100px;
- @media screen and (max-width: 767px) {
- font-size: 30px;
- }
- font-weight: 700;
+.footer-modal__title {
text-align: center;
- background-image: url(../images/bg_modal-team.jpg);
-
- transition: opacity 250ms linear;
-
- z-index: 4;
-
- width: 100%;
- height: 100%;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
-
- pointer-events: none;
+ margin-bottom: 10px;
+ margin-top: 0;
}
.footer__button-close {
@@ -121,11 +132,15 @@
}
}
+/*наполнение модалки - карточка*/
+
.team__item {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14),
0px 2px 1px rgba(0, 0, 0, 0.2);
border-radius: 0px 0px 4px 4px;
+ transition: transform 200ms linear;
+
@media screen and (max-width: 767px) {
&:not(:last-child) {
margin-bottom: 30px;
@@ -134,7 +149,7 @@
@media screen and (min-width: 768px) and (max-width: 1023px) {
&:nth-child(2n + 1) {
- margin-right: 15px;
+ margin-right: 30px;
}
&:nth-child(n + 3) {
@@ -148,39 +163,65 @@
}
&:nth-child(n + 5) {
- margin-top: 30px;
+ margin-top: 10px;
}
}
}
.team__item:hover {
- border: 1px solid $accent-color;
+ transform: scale(1.1);
+}
+
+.team__item.big {
+ @media screen and (min-width: 1024px) {
+ position: fixed;
+ transition: transform 500ms linear;
+ opacity: 0;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(2.2);
+
+ margin: 0;
+ }
}
.team__img {
- display: block;
- border-radius: 0;
- height: auto;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
@media screen and (max-width: 767px) {
width: 100%;
max-width: 360px;
+ height: 350px;
}
@media screen and (min-width: 768px) {
- width: 240px;
+ width: 200px;
+ height: 250px;
}
@media screen and (min-width: 1024px) {
- width: 200px;
+ width: 150px;
+ height: 145px;
}
}
+.team__img--centered {
+ background-position: top;
+}
+
+.team__img--left {
+ background-position: left;
+}
+
+/*наполнение модалки - карточка - текст в карточке*/
+
.team__wrapper {
- padding-top: 30px;
- padding-bottom: 24px;
- padding-left: 32px;
- padding-right: 30px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
border-radius: 0px 0px 4px 4px;
background: #ffffff;
@@ -191,7 +232,7 @@
margin-bottom: 10px;
color: black;
- font-size: 16px;
+ font-size: 14px;
line-height: 1.17;
font-weight: 500;
@@ -200,7 +241,6 @@
.team__text {
margin-top: 0;
- margin-bottom: 16px;
color: grey;
font-size: 16px;
@@ -208,24 +248,14 @@
text-align: center;
}
-.social {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.social__item:not(:last-child) {
- margin-right: 10px;
-}
-
body.is-open {
overflow-y: hidden;
}
.footer-btn-open {
- cursor: pointer;
- color: inherit;
- background-color: inherit;
- border: 0;
- text-decoration: underline;
-}
+ cursor: pointer;
+ color: inherit;
+ background-color: inherit;
+ border: 0;
+ text-decoration: underline;
+}
\ No newline at end of file