Followed most recommended changes.

Author: Shadedog838

index.html

@@ -61,72 +61,72 @@
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/1.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/1.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/2.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/2.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/3.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/3.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/4.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/4.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/5.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/5.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/6.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/6.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/7.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/7.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/8.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/8.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/9.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/9.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/10.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/10.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front_clip"></div>
                 <div class="back_clip"></div>
-                <img class="slide-image" src="./assets/imgs/11.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/11.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
         </div>
         <div id="modal">
             <span id="close"><i id="close" class="fas fa-times"></i></span>
-            <img id="modal-content">
+            <img id="modal-content" alt="image from carousel">
         </div>
         <div id="hackathon-content">
             <div id="hackathon-text">

index.js

@@ -43,12 +43,19 @@ $(document).on('click', '#close', function() {
 });
 
 // Closes modal when window is clicked
-$(window).on('click', function() {
+$(window).on('click', function(event) {
     if (event.target == modal) {
         $('#modal').hide();
     }
 });
 
+// Closes modal when esc key is pressed
+$(document).on('keydown', function(event) {
+    if (event.key == "Escape") {
+        $('#modal').hide();
+    }
+});
+
 
 let card = document.getElementsByClassName("card");
 for (let i = 0; i < card.length; i++) {

sass/main.scss

@@ -362,7 +362,12 @@ nav {
     }
 
     #modal-content {
+        position: absolute;
         margin: auto;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
         display: block;
         width: 80%;
         max-width: 700px;
@@ -373,15 +378,15 @@ nav {
 
     @keyframes zoom {
         from {transform:scale(0)}
-        to {transform: scale(1);}
+        to { transform: scale(1); }
     }
 
     #close {
         position: absolute;
-        top: 50px;
-        right: 160px;
+        top: 15px;
+        right: 35px;
         color:white;
-        font-size: 2em;
+        font-size: 1.5em;
         font-weight: bold;
         transition: 0.3s;
     }
@@ -393,8 +398,6 @@ nav {
         cursor: pointer;
     }
 
-
-
     #hackathon-content {
         display: flex;
         justify-content: space-between;
@@ -775,15 +778,6 @@ footer {
                 width: 100%;
             }
         }
-        #modal-content {
-            width: 100%;
-        }
-        #close {
-            top: 50px;
-            right: 25px;
-            color: white;
-            font-size: 1.5em;
-        }
     }
 
     #faq #faq-wrapper #faq-cards {