add modal and demo

Author: solygambas

100-hulu webpage clone/index.html

@@ -230,7 +230,11 @@ <h3>Log In</h3>
         <div class="modal-footer">
           <p>Don't have an account? <a href="#">Start your free trial</a></p>
         </div>
-        <img class="close" src="img/close.svg" alt="close" />
+        <img
+          class="close"
+          src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/close.svg?raw=true"
+          alt="close"
+        />
       </div>
     </div>
     <script src="script.js"></script>

100-hulu webpage clone/script.js

@@ -0,0 +1,15 @@
+const modal = document.querySelector(".modal");
+const loginButton = document.querySelector(".login-btn");
+const closeButton = document.querySelector(".close");
+
+const openModal = () => (modal.style.display = "block");
+const closeModal = () => (modal.style.display = "none");
+const outsideClick = (e) => {
+  if (e.target == modal) {
+    closeModal();
+  }
+};
+
+loginButton.addEventListener("click", openModal);
+closeButton.addEventListener("click", closeModal);
+window.addEventListener("click", outsideClick);

100-hulu webpage clone/style.css

@@ -74,6 +74,11 @@ h4 {
   border-color: #ccc;
 }
 
+.btn-dark {
+  color: #fff;
+  background-color: #000;
+}
+
 .legal-text {
   font-size: 10px;
   color: #ccc;
@@ -355,6 +360,90 @@ h4 {
   margin-right: 25px;
 }
 
+/* Modal */
+
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-box {
+  margin: 10% auto;
+  width: 400px;
+  background-color: #fff;
+  color: #333;
+  position: relative;
+  animation: modalopen 1s;
+}
+
+@keyframes modalopen {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal-body {
+  padding: 50px;
+}
+
+.modal-body h3 {
+  font-weight: bold;
+}
+
+.modal-body .btn {
+  width: 100%;
+  margin-top: 30px;
+}
+
+.modal .close {
+  cursor: pointer;
+  height: 23px;
+  width: 23px;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+
+.modal .modal-footer {
+  background-color: #f7f7f9;
+  color: #333;
+  padding: 20px 0;
+  border-top: 1px solid #eee;
+  text-align: center;
+}
+
+.modal a {
+  color: steelblue;
+}
+
+/* Form */
+
+.form-control {
+  margin: 20px 0;
+}
+
+.form-control label {
+  display: block;
+  text-transform: uppercase;
+}
+
+.form-control input {
+  width: 100%;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  height: 50px;
+  padding: 5px;
+}
+
 /* Media Queries */
 
 @media (max-width: 1300px) {

README.md

@@ -105,7 +105,7 @@
 | 97  | [Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/97-terminal%20style%20landing%20page)   | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG)  |
 | 98  | [Magazine Layout](https://github.com/solygambas/html-css-fifty-projects/tree/master/98-magazine%20layout)                               | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj)  |
 | 99  | [Parallax Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/99-parallax%20website)                             | [Live Demo](https://codepen.io/solygambas/full/poeBdPr)  |
-| 100 | [Hulu Webpage Clone](https://github.com/solygambas/html-css-fifty-projects/tree/master/100-hulu%20webpage%20clone)                      | [Live Demo](#)                                           |
+| 100 | [Hulu Webpage Clone](https://github.com/solygambas/html-css-fifty-projects/tree/master/100-hulu%20webpage%20clone)                      | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy)  |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):