Merge pull request #19 from Tanvi51204/main

Developers pop-up centered.
riyaahlawat · Jul 10, 2024 · f39c896 · f39c896
2 parents e0efb17 + d5ce40d
commit f39c896
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -327,7 +327,7 @@ <h3>Amazon Route 53 🌐</h3>
         <div id="developerModal" class="modal">
           <div class="modal-content">
             <span class="close">&times;</span>
-            <div class="contact-container">
+            <div class="contact-container-developer">
               <h1>Meet the Developers</h1>
               <p>Thank you for visiting our website! We're a dedicated team who collaborated closely to bring this
                 website to life. Here's our Development Team:</p>

diff --git a/styles/modal.css b/styles/modal.css
@@ -1,46 +1,46 @@
 @import url('variables.css');
 
 .modal {
-    display: none;
-    font-weight: 500;
+    display: none; 
     position: fixed;
-    z-index: 1;
-    left: 0;
     top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    overflow: auto;
-
+    background-color: rgba(0, 0, 0, 0.5);
     justify-content: center;
     align-items: center;
-    /* background-color: rgb(0, 0, 0); */
-    background-color: rgba(0, 0, 0, 0.4);
-    /* padding-top: 60px; */
+    z-index: 1000; 
+
 }
 
-.contact-container h1 {
+.modal-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 800px;
+    background-color: var(--bgColor); 
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px var(--black);
+    box-sizing: border-box;
+    overflow: auto; 
+}
+
+
+.contact-container-developer h1 {
     color: var(--black);
 }
 
-.contact-container p {
+.contact-container-developer p {
     font-size: 1rem;
 }
 
-.modal-content {
-    background-color: var(--bgColor);
-    margin: 15% auto;
-    padding: 20px;
-    border: 3px solid var(--black);
-    width: 80vw;
-    height: auto;
-    max-width: 800px;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px var(--black);
-    display: flex;
-}
 
-/* layout for the buttons */
-.contact-container {
+
+.contact-container-developer {
     text-align: center;
     width: 100%;
 }
@@ -67,7 +67,7 @@
     padding: 10px;
     background-color: var(--bgColor);
     color: var(--textColor);
-    /* text-align: center; */
+
     border: 2px solid var(--black);
     border-radius: 5px;
     text-decoration: none;
@@ -84,22 +84,24 @@
 }
 
 @media screen and (max-width: 600px) {
-    /* .contact-container {
-        text-align: center;
-    } */
+
+    .modal-content {
+        width: 90%;
+        margin: 10% auto;
+        padding: 10px;
+    }
 
     .button-grid {
         flex-direction: column;
         align-items: center;
     }
 
-    /* .left-buttons,
-    .right-buttons {
-        flex: auto;
-    } */
+
 
     .button {
-        /* width: auto; */
+
         width: 40vw;
     }
-}
+} 
+
+