From d5c12b77fa29f9b6452450dfd918591ac3ea6827 Mon Sep 17 00:00:00 2001 From: dustin Date: Mon, 15 Apr 2024 17:16:01 -0500 Subject: [PATCH] init commit! --- .vscode/settings.json | 3 + app.css | 134 ++++++++++++++++++++++++++++++++++++++++++ app.js | 6 ++ index.html | 37 ++++++++++++ 4 files changed, 180 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 app.css create mode 100644 app.js create mode 100644 index.html diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/app.css b/app.css new file mode 100644 index 0000000..c508e00 --- /dev/null +++ b/app.css @@ -0,0 +1,134 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + --primary-color: rgb(67, 140, 208); + font-family: sans-serif; + min-height: 100vh; + background-color: #eee; +} + +button { + padding: .5rem 1rem; + border-radius: .25rem; + background-color: var(--primary-color); + border: none; + color: white; + cursor: pointer; +} + +.overlay { + position: absolute; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.5); + height: 100vh; + width: 100%; + padding: 1rem; + place-items: center; + display: none; + z-index: 10; +} + +.modal { + width: 100%; + max-width: 500px; + background-color: white; + padding: 1rem; + border-radius: .5rem; + box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15); + animation: fadeIn .5s ease forwards; +} + +form { + display: flex; + flex-direction: column; + gap: .25rem; +} + +form input { + width: 100%; + padding: .5rem; + border: 1px solid #ccc; + border-radius: .25rem; + outline: none; +} + +form .group { + display: flex; + justify-content: space-between; + align-items: center; +} + +form .group:first-of-type { + margin-top: .5rem; + margin-bottom: 1rem; +} + +form .group:last-of-type { + margin-top: 2rem; +} + +form .group p:last-of-type { + background-color: #eee; + height: 2rem; + width: 2rem; + border-radius: 50%; + display: grid; + place-items:center; + color: #333; + cursor: pointer; + transition: all .2s ease; +} +form .group p:last-of-type:hover { + background-color: #ccc; + color: white; +} + +form .group a { + color: var(--primary-color); + text-decoration: none; +} + + + +/* nav */ +nav { + background-color: white; + padding: 1rem; + position: fixed; + top: 0; + width: 100%; +} + +nav .wrapper { + margin: 0 auto; + width: 100%; + max-width: 800px; + display: flex; + justify-content: space-between; + align-items: center; +} + +nav h1 { + color: var(--primary-color); +} + +nav h1 span { + font-weight: 100; + opacity: 0.6; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + margin-top: -3rem; + } + 100% { + opacity: 1; + margin-top: 0; + } +} \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 0000000..447cdc2 --- /dev/null +++ b/app.js @@ -0,0 +1,6 @@ +const overlay = document.getElementById("overlay"); +const login = document.getElementById("login"); + +login.addEventListener("click", () => { + overlay.style.display = "grid"; +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..4b897a7 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + JS-MODAL + + + +
+
+
+
+

Login to your account

+

x

+
+ + +
+ New here? Sign up! + +
+
+
+
+ + + + + +