diff --git a/20251214112137_939eaa292972f81dc750c6c39f8d425dc5609958.png b/20251214112137_939eaa292972f81dc750c6c39f8d425dc5609958.png new file mode 100644 index 0000000..606f3be Binary files /dev/null and b/20251214112137_939eaa292972f81dc750c6c39f8d425dc5609958.png differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c3e39d0 --- /dev/null +++ b/styles.css @@ -0,0 +1,155 @@ +body { + background-image: url('20251214112137_939eaa292972f81dc750c6c39f8d425dc5609958.png'); + background-size: cover; + font-family: Arial; + margin: 0; + padding: 0; +} + +.container { + display: flex; + height: 100vh; + width: 100vw; + align-items: center; +} + +.web_title { + width: 50vw; + flex-direction: column; + justify-content: center; + padding-left: 5vw; +} + +.web_title h1 { + color: rgb(0, 65, 96); + font-size: 2.2rem; +} + +.title-line { + width: 36.5vw; + height: 2px; + background-color: rgb(0, 65, 96); +} + +.web_title h2 { + color: rgb(0, 65, 96); + font-size: 1.3rem; + font-weight: 300; + width: 36vw; +} + +.sign_form { + width: 50vw; + padding: 1.25rem; +} + +form { + background: white; + width: 30vw; + border-radius: 12px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + padding: 2.5rem; +} + +form h1 { + font-size: 2.2rem; + color: rgb(70, 70, 70); + text-align: center; +} + +form h2 { + font-size: 1.2rem; + color: rgb(70, 70, 70); + font-weight: 300; + text-align: center; + margin-bottom: 2rem; +} + +.form_group label { + display: block; + margin-bottom: 0.5rem; + color: rgb(70, 70, 70); + font-size: 1.2rem; + font-weight: 300; + width: 36vw; +} + +.form_group input { + box-sizing: border-box; + padding: 0.7rem 0.9rem; + border-radius: 6px; + border: 1px solid rgb(209, 213, 219); + font-size: 1.2rem; + margin-bottom: 2rem; + width: 100%; +} + +.sign_button { + width: 100%; + height: 6vh; + border-radius: 12px; + background-color: rgb(2, 119, 175); + color: rgb(255, 255, 255); + font-size: 1.2rem; + font-weight: 300; + border: none; +} + +p { + text-align: center; + font-size: 1.2rem; + font-weight: 300; + color: rgb(70, 70, 70); + margin-top: 1.2rem; +} + +p a { + color: rgb(2, 119, 175); + text-decoration: none; +} + +@media (max-width: 768px) { + .container { + flex-direction: column; + height: auto; + min-height: 100%; + width: 100%; + padding: 1.25rem; + } + + .web_title { + width: 100%; + padding-left: 0; + padding: 0; + } + + .sign_form { + width: 100%; + padding-left: 0; + padding: 0; + } + + .title-line { + width: 100%; + } + + .web_title h2 { + width: 100%; + } + + form { + width: 92vw; + max-width: 520px; + margin: 1rem auto; + padding: 1.8rem; + box-sizing: border-box; + } + + .form_group label { + width: 100%; + } + + .sign_button { + height: 48px; + } +} \ No newline at end of file diff --git a/w1.html b/w1.html new file mode 100644 index 0000000..56945c2 --- /dev/null +++ b/w1.html @@ -0,0 +1,70 @@ + + + + + + + week1 + + + + + +
+
+

+ Welcome to Plaint Quote System +

+
+

+ Consequat adipising ea do labore irure adipiscing + occaecat cuidatat excepteur duis mo +

+
+ +
+
+

+ Sign Up +

+

+ Enter details to create your account +

+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+

Already have an account? Sign in

+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/w2.js b/w2.js new file mode 100644 index 0000000..a107ac4 --- /dev/null +++ b/w2.js @@ -0,0 +1,32 @@ +const form = document.querySelector("form"); +const nameInput = document.querySelector("#name"); +const numberInput = document.querySelector("#number"); +const accountInput = document.querySelector("#account"); +const formError = document.querySelector("#form-error"); +const modal = document.querySelector("#modal"); +const modalMessage = document.querySelector("#modal-message"); +const closeModalBtn = document.querySelector("#close-modal"); + +function openModal(message) { + modalMessage.textContent = message; + modal.classList.remove("hidden"); +} + +function closeModal() { + modal.classList.add("hidden"); +} + +closeModalBtn.addEventListener("click", closeModal); + +form.addEventListener("submit", (e) => { + e.preventDefault(); + const name = nameInput.value; + const number = numberInput.value; + const account = accountInput.value; + + if (name === "" || number === "" || account === "") { + openModal("All the information is required"); + } else { + openModal("Create Success"); + } +}); \ No newline at end of file