footer all done

TetiZ · Feb 1, 2024 · 481ad79 · 481ad79
1 parent 2c5ba83
commit 481ad79
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/src/css/layout/footer.css b/src/css/layout/footer.css
@@ -246,7 +246,8 @@
     margin-bottom: 12px;
   }
 
-  .footer-text-team {
+  .footer-text-team,
+  .footer-team-link {
     color: var(--secondary-text-color);
     font-size: 12px;
     line-height: 0.83;
@@ -256,6 +257,8 @@
 
   .footer-team-link {
     text-decoration: underline;
+    border: none;
+    background-color: transparent;
   }
 
   .footer-icon-team {
@@ -286,6 +289,16 @@
     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 {

diff --git a/src/css/layout/pop-ups.css b/src/css/layout/pop-ups.css
@@ -92,7 +92,8 @@
     visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.pop-ex-close-btn {
+.pop-ex-close-btn,
+.footer-close-btn {
   position: absolute;
   display: flex;
   justify-content: center;

diff --git a/src/img/our-team/Anastasiia.jpg b/src/img/our-team/Anastasiia.jpg
diff --git a/src/js/submit-email-footer.js b/src/js/submit-email-footer.js
@@ -63,3 +63,16 @@ form.addEventListener('submit', async e => {
     console.log('Електронна пошта не введена.');
   }
 });
+
+// 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/partials/footer.html b/src/partials/footer.html
@@ -85,14 +85,14 @@
     </p>
     <p class="footer-text-team">
       Developed by
-      <a class="footer-team-link" href="">GoIT Students</a>
+      <button class="footer-team-link" type="button">GoIT Students</button>
     </p>
   </div>
 
   <!-- Modal -->
-  <!-- <div class="footer-modal-backdrop visually-hidden">
+  <div class="footer-modal-backdrop">
     <div class="our-team-footer-card">
-      <button class="pop-ex-close-btn">
+      <button class="footer-close-btn">
         <svg
           class="pop-ex-close-btn-icon"
           width="24"
@@ -241,7 +241,7 @@ <h3 class="footer-team-member-name">Iryna</h3>
         <li class="footer-team-list-item">
           <img
             class="footer-team-member-img"
-            src=""
+            src="./img/our-team/Anastasiia.jpg"
             width="164"
             alt="photo of team member"
           />
@@ -442,5 +442,5 @@ <h3 class="footer-team-member-name">Tetiana</h3>
         </li>
       </ul>
     </div>
-  </div> -->
+  </div>
 </footer>