Merge pull request #97 from VasylievYurii/footer

Add close btn for footer modal

src/js/footer.js

@@ -1,5 +1,6 @@
 const settingsBtn = document.querySelector('.footer-btn');
 const backdropFooter = document.querySelector('.backdrop-modal-footer');
+const closeFooterBrn = document.querySelector('.close-footer-btn');
 
 function openFooterModal(e) {
   e.preventDefault();
@@ -24,4 +25,8 @@ settingsBtn.addEventListener('click', openFooterModal);
 
 backdropFooter.addEventListener('click', closeFooterModal);
 
-document.addEventListener('keydown', escClose);
+closeFooterBrn.addEventListener('click', () => {
+    backdropFooter.classList.add('is-hidden-footer');
+});
+
+document.addEventListener('keydown', escClose);

src/partials/footer.html

@@ -1,6 +1,11 @@
 <div class="backdrop-modal-footer is-hidden-footer">
     <footer class="footer">
         <div class="container">
+            <button class="close-footer-btn">
+                <svg class="close-footer-modal" width="24" height="24">
+                    <use href="./images/sprite.svg#close"></use>
+                </svg>
+            </button>
             <h4 class="footer-head">Our team</h4>
             <ul class="contact-list">
                 <li class="contact-list-item">

src/sass/_footer.scss

@@ -108,6 +108,20 @@
     transform: rotate(360deg);
   }
 }
+
+.close-footer-btn{
+    position: absolute;
+    top: 12px;
+    right: 8px;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.close-footer-modal {
+    stroke: var(--color-dark-theme);
+}
+
 @media screen and (min-width: 768px) {
   .footer {
     width: 548px;