diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 9354e5b..0000000 --- a/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -css/style.css -index.html \ No newline at end of file diff --git a/HTML/.index.html.swp b/HTML/.index.html.swp new file mode 100644 index 0000000..f1b08d1 Binary files /dev/null and b/HTML/.index.html.swp differ diff --git a/HTML/index.html b/HTML/index.html new file mode 100644 index 0000000..cedbed6 --- /dev/null +++ b/HTML/index.html @@ -0,0 +1,74 @@ + + + + + + + + + SingIn + + +
+
+
+

Let's talk about everything!

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Ab + harum vel asperiores porro perspiciatis illo? Laborum, + magnam + enim vitae a nisi, quam soluta autem similique adipisci + error + quas tempore? Molestias? +

+ Background Image +
+
+ + Gacha Nox +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/css/style.css b/css/style.css index de53064..23dc670 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,9 @@ .content { - padding: 7rem 0; + display: flex; + flex-wrap: wrap; + padding: 7rem 0 !important; } + .form-control { border: none; background: #f3f3f3; @@ -55,9 +58,29 @@ box-shadow: none; } -.form-group{ +.form-group { margin-bottom: 1rem; } + #message { resize: vertical; +} + +.mapouter { + position: relative; + text-align: right; + width: 600px; + height: 400px; +} + +.gmap_canvas { + overflow: hidden; + background: none !important; + width: 600px; + height: 400px; +} + +.gmap_iframe { + width: 600px !important; + height: 400px !important; } \ No newline at end of file diff --git a/signin_Grid/index.html b/signin_Grid/index.html new file mode 100644 index 0000000..b1d3ef5 --- /dev/null +++ b/signin_Grid/index.html @@ -0,0 +1,57 @@ + + + + + + + SingIn + + +
+
+

Let's talk about everything!

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Ab + harum vel asperiores porro perspiciatis illo? Laborum, + magnam + enim vitae a nisi, quam soluta autem similique adipisci + error + quas tempore? Molestias? +

+ Background Image + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ + + +
+
+
+ + + \ No newline at end of file diff --git a/signin_Grid/style.css b/signin_Grid/style.css new file mode 100644 index 0000000..059fa04 --- /dev/null +++ b/signin_Grid/style.css @@ -0,0 +1,55 @@ +.container { + margin: 20px; + padding: 3rem; + display: grid; + /* grid-template-columns: 50% 50%; */ + grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + gap: 50px; + align-items: center; +} + +.item, +.form { + width: 90%; +} + +.form-control { + border: none; + background: #f3f3f3; + width: 90%; + border-radius: 5px; + margin-bottom: 5px; + padding: 10px; +} + +.form-control:active, +.form-control:focus { + outline: none; + -webkit-box-shadow: none; + box-shadow: none; + border-color: #000; + background: #f3f3f3; + border: 2px solid black +} + +.col-form-label { + color: #000; +} + +.btn, +.form-control { + height: 50px; +} + +.btn { + border: none; + border-radius: 4px; + background: #3f3d56; + color: #fff; + padding: 15px 20px; + margin: 10px 0px 20px 0px; +} + +/* .form-control:focus:invalid{ + border: 2px solid red; +} */ \ No newline at end of file diff --git a/signin_Grid/undraw-contact.svg b/signin_Grid/undraw-contact.svg new file mode 100644 index 0000000..3e35eab --- /dev/null +++ b/signin_Grid/undraw-contact.svg @@ -0,0 +1 @@ +delivery_address \ No newline at end of file diff --git a/signin_Grid/validaion.js b/signin_Grid/validaion.js new file mode 100644 index 0000000..2931b0d --- /dev/null +++ b/signin_Grid/validaion.js @@ -0,0 +1,62 @@ +function validationFrom(event) { + event.preventDefault(); + let name = document.getElementById("name"); + let email = document.getElementById("email"); + let subject = document.getElementById("subject"); + let message = document.getElementById("message"); + let error = document.getElementById("errorMessage"); + let success = document.getElementById("successMessage") + + if (name.value == "") { + // alert("Enter your name"); + name.focus(); + name.style.borderColor = "red" + error.innerText = "ERROR: Enter your name"; + error.style.display = "block"; + setTimeout(function () { error.style.display = "none"; }, 2000); + return false; + } + if (email.value == "") { + // alert("Enter your email"); + email.focus(); + email.style.borderColor = "red" + error.innerText = "ERROR: Enter your email"; + error.style.display = "block"; + setTimeout(function () { error.style.display = "none"; }, 2000); + return false; + } + //Check email format + let emailFormat = /^[a-zA-Z0-9_]+@gmail.com$/i; + if (!emailFormat.test(email.value)) { + // alert("ERROR: Invalid email format [Gmail account only]"); + email.focus(); + email.style.borderColor = "red"; + error.innerText = "ERROR: Invalid email format [Gmail account only]"; + error.style.display = "block"; + setTimeout(function () { error.style.display = "none"; }, 2000); + return false; + } + + if (subject.value == "") { + // alert("Enter the subject"); + subject.focus(); + subject.style.borderColor = "red" + error.innerText = "ERROR: Enter the subject"; + error.style.display = "block"; + setTimeout(function () { error.style.display = "none"; }, 2000); + return false; + } + if (message.value == "") { + // alert("Enter your message"); + message.focus(); + message.style.borderColor = "red" + error.innerText = "ERROR: Enter your message"; + error.style.display = "block"; + setTimeout(function () { error.style.display = "none"; }, 2000); + return false; + } + if ((name.value != "") && (email.value != "") && (subject.value != "") && (message.value != "")) { + success.style.display = "block"; + setTimeout(function () { success.style.display = "none"; }, 2000); + } +} \ No newline at end of file