From 7b043dd5180bcccbfcb9ef443d27b42ea3592170 Mon Sep 17 00:00:00 2001 From: Fatima Alaa Date: Sat, 24 Jun 2023 16:56:24 +0300 Subject: [PATCH 1/2] signin --- .gitignore | 2 -- HTML/.index.html.swp | Bin 0 -> 12288 bytes HTML/index.html | 74 +++++++++++++++++++++++++++++++++++++++++++ css/style.css | 27 ++++++++++++++-- 4 files changed, 99 insertions(+), 4 deletions(-) delete mode 100644 .gitignore create mode 100644 HTML/.index.html.swp create mode 100644 HTML/index.html 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 0000000000000000000000000000000000000000..f1b08d19e6671068be55bea587d3903cd4163a2e GIT binary patch literal 12288 zcmeHNO^h5z6|Ru*<0MX^a3CjCZX|Hz?dh5IF4|?gcjKSfYkS6yvbHyigshtG+Me=u zSM^ra%CFe?rSB#!)DIB-CG-92N^W@pwh z2SlQ7>D#WVSM}=ESFhizp6z!1=A{;0s?8Hz&k*vLU;iMo%}2=-j}UUhaGf_l=(@nH zNZEsW5%SGkp?98}9jh|Wh*;hd(oLDMXkNeGYI;IOe6QBAY4TugRga2+ih+k?;5a!w z->BzfzTljopMCbm!ws)`R}54PR18!MR18!MR18!MR18!Me54t$*(2mzSivVotGGP6 zXER3{(tM3{(tM3{(tM3{(tM3{(tM3{(tM415F`U=bnj!S2WN9{}+G z|MC0(-=8Mr55Vt$cY$r-72uyw5wZ^qfa|~_@C@)Y@Q>q!{2BNaa2NO z_dgBYfCW6@U!Nl6_rP1gE#M?@4EXIQ3Hd&71(*Z={TLxX0p0{O&;p(V-g^{l1C9f4 zf}2g?1;7P94?GLxoE-x`9+&Us-(9Q{ip%%fDjJmKvL1=v{pyUSBbswjez7D`{q1g& zm{4;rSA9=xYnJkZy34-h-(p1IurTBa*DB@sSY(B=EB#MCVfhN> zGSq|2^2kkjB-jd#2U?j>Wsqeev|Y_ze0DM_uFyVjyQaf5cgWT5dO%%zMlyPq{pr;o!fw8u@Ev;c+V-{x1xsjiphZY;iioS{={M-f z;XA`S`>*eRmk!?@{&e^b3N9VKwg1NO4n_Uv!@Fqv_WpPFU!y1YU&H;(7gkzcx@^+imk&s8WxoZ60~^H!t2iBhPOdyS0`GV}qB^w_4LR`sH5H zzKComaF*vA4()IecWmG+HkJ+#^5HeuAZAS9geq|x^UmRo_Ps;CHRj&;wv|o~4;jnz z`$&D;N(#7{#-~UiJ}`EN-LQzRg4XF?o~_B6*DE-zu9N`e8Hgq;C`oLMD66O!1Lo#)(*n*+2rZWru)tzb26g8nbr6Mz!FH(upScRnsdzK<&8YC%>1L0^vm{!J=C&JdID)eV; zh~H_fHo5&0c7!E66y_pP^B&g&+kwUtI9WFiZ{?)R;&Ai<51N!})t`_~O7g7Fki^H{ z>*vSzani|!T#mCajNmM~Z-!qSR#!J*;3esMWsMwIcNy;BxuG$hv4cE3naO9$M+DfR znkRu%h)sucd(fK^CyY^AAUxm@FO?jmsynHJ;u0`4#(`)6Jsoy>X~Dg6WqIM;`h{kb zpORbiQF?CkVrzG~q0e1pi?O}2knSwcuSdNteyZhdyt00}-pCd&H3z4ntIMb4k2tlEF-zTa7KaxhJosLKYm| z%5a>Ms literal 0 HcmV?d00001 diff --git a/HTML/index.html b/HTML/index.html new file mode 100644 index 0000000..b6aa440 --- /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 From 1d01930b32a2f5b44bd15752834776d2232fd04a Mon Sep 17 00:00:00 2001 From: Fatima Alaa Date: Wed, 5 Jul 2023 23:12:01 +0300 Subject: [PATCH 2/2] Sign in page using Grid display --- HTML/index.html | 6 ++-- signin_Grid/index.html | 57 +++++++++++++++++++++++++++++++ signin_Grid/style.css | 55 ++++++++++++++++++++++++++++++ signin_Grid/undraw-contact.svg | 1 + signin_Grid/validaion.js | 62 ++++++++++++++++++++++++++++++++++ 5 files changed, 178 insertions(+), 3 deletions(-) create mode 100644 signin_Grid/index.html create mode 100644 signin_Grid/style.css create mode 100644 signin_Grid/undraw-contact.svg create mode 100644 signin_Grid/validaion.js diff --git a/HTML/index.html b/HTML/index.html index b6aa440..cedbed6 100644 --- a/HTML/index.html +++ b/HTML/index.html @@ -61,9 +61,9 @@

Let's talk about everything!

- 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