Popup Form Update

Author: BhalliBhai

26. Popup Form/index.html

@@ -22,7 +22,11 @@ <h1>Welcome To The Real World</h1>
 
     <section class="modal-container" id="modal">
       <section class="modal">
-        <button class="close-btn" id="close">x</button>
+        <button class="close-btn" id="close">
+          <svg width="25" height="25" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"></path>
+          </svg>
+        </button>
         <div class="modal-content">
           <h1>Sign Up</h1>
           <form class="modal-form">

26. Popup Form/style.css

@@ -62,11 +62,10 @@ header {
 }
 
 .modal {
-  background: #fff;
-  border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   position: absolute;
   overflow: hidden;
+  color: white;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -90,16 +89,18 @@ header {
 .modal-form .form-input {
   padding: 8px;
   width: 100%;
+  border-radius: 5px;
+  outline: none;
 }
 
 .close-btn {
   background: transparent;
   border: none;
-  font-size: 25px;
   position: absolute;
-  top: 5px;
+  top: 12px;
   right: 12px;
   cursor: pointer;
+  color: white;
 }
 
 .modal-container .submit-btn {
@@ -109,6 +110,7 @@ header {
   border: none;
   color: #fff;
   cursor: pointer;
+  border-radius: 5px;
 }
 
 /* JavaScript */