diff --git a/bgi.png b/bgi.png new file mode 100644 index 0000000..4212c30 Binary files /dev/null and b/bgi.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ab76eae --- /dev/null +++ b/index.html @@ -0,0 +1,63 @@ + + + + + + Document + + + + + +
+ + +
+
+

Welcome to Paint Quote System

+

+ Consequat adipisicing ea do labore irrure adipisicing
occaecat + cupidatat excepteur duis mo +

+
+
+
+

Sign Up

+

Enter details to create your account

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

Already have an account?Sign in

+
+
+
+
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..6587a1e --- /dev/null +++ b/index.js @@ -0,0 +1,33 @@ +document.querySelector("#btn-group").addEventListener("click", () => { + const name = document.querySelector("#name").value.trim(); + const phone = document.querySelector("#phone").value.trim(); + const dulux = document.querySelector("#dulux").value.trim(); + + + if (name === "") { + alert("Name is required"); + return; + } + if (phone === "") { + alert("Phone number is required"); + return; + } else if (!/^\d{10,11}$/.test(phone)) { + alert("Phone number is invalid"); + return; + } + + if (dulux === "") { + alert("Dulux account is required"); + return; + } else if (!/^[a-zA-Z0-9]{5,15}$/.test(dulux)) { + alert("Dulux account is invalid"); + return; + } + + alert("Form submitted successfully!"); +}); + +document.querySelector("#sign-in-link").addEventListener("click", (e) => { + e.preventDefault(); + alert("Redirecting to sign in page..."); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..a66d964 --- /dev/null +++ b/style.css @@ -0,0 +1,142 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html, +body { + margin: 0; + width: 100%; + height: 100%; +} + +.bg-image { + position: relative; + display: inline-block; + height: 100%; + width: 100%; +} + +.bg-image img { + width: 100%; + display: block; + height: 100% +} + +.cover { + font-family: "Inter", sans-serif; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.left-section h1 { + color: rgb(9, 64, 90); + font-size: 25px; +} + +.left-section h1::after { + content: ""; + display: block; + width: 400px; + height: 2px; + background-color: rgb(9, 64, 90); + margin-top: 8px; + border-radius: 2px; +} + +.left-section p { + color: rgb(9, 64, 90); + font-size: 15px; + margin-top: 20px; +} + +.right-section { + background-color: rgba(255, 255, 255, 0.877); + height: 470px; + border-radius: 12px; + border: none; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); +} + +.right-section h1 { + color: #4c4c4c; + text-align: center; + margin-bottom: 5px; + font-size: 28px; + font-weight: bold; +} + +.right-section p { + color: #7e7e7e; + text-align: center; + margin-top: auto; + margin-bottom: 25px; + font-size: 15px; +} + +.input-group { + display: flex; + flex-direction: column; + align-items: center; +} + +.input-group label { + margin-bottom: 6px; + font-size: 17px; + align-self: flex-start; + margin-left: 7.5%; + color: #7e7e7e; +} + +.input-group input { + height: 40px; + width: 80%; + padding: 0 12px; + font-size: 15px; + border: 2px solid #dfdede; + border-radius: 6px; + outline: none; + margin-bottom: 20px; +} + +#btn-group { + display: flex; + justify-content: center; + align-items: center; +} + +#btn-group button { + width: 85.5%; + display: block; + margin: 0 auto; + height: 45px; + background: rgb(27, 106, 175); + color: white; + border: none; + border-radius: 6px; + font-size: 16px; + margin-bottom: 20px; +} +#btn-group button:hover { + background-color: rgb(11, 83, 137); +} + +#sign-in { + text-align: center; + font-size: 16px; + font-weight: 400; + margin-bottom: 20px; +} +#sign-in p { + margin: 0; + color: #7e7e7e; +} + +#sign-in a { + color: rgb(100, 117, 225); + text-decoration-line: none; +} \ No newline at end of file