diff --git a/A login page/A login Page/index.html b/A login page/A login Page/index.html new file mode 100644 index 0000000..54d695a --- /dev/null +++ b/A login page/A login Page/index.html @@ -0,0 +1,78 @@ + + + + + + + + + form + + +
+
+ +
+ +
+
+ Start for free and
get ready to create someting interesting ! +
+
+
+ +
+ + + + + +
+
+
+ + + + + +
+
+
+ + + + + + +
+
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/A login page/A login Page/main.js b/A login page/A login Page/main.js new file mode 100644 index 0000000..d2bf24a --- /dev/null +++ b/A login page/A login Page/main.js @@ -0,0 +1,47 @@ +let id=(id)=>document.getElementById(id); +let classes=(classes)=>document.getElementsByClassName(classes); +let username=id("Username"), +email=id("email"), +password=id("Password"), +form=id("form"), + +erromessage=classes("error"), +successicon=classes("success-icon"), +failureicon=classes("failure-icon"); +form.addEventListener("submit",(e)=>{ + e.preventDefault(); + validation(username, 0, "Username cannot be blank"); + validation(email, 1, "Email cannot be blank"); + validation(password, 2, "Password cannot be blank"); +}) +let validation=(id,serial,message)=>{ + if(id.value.trim()==="") + { + erromessage[serial].innerHTML=message; + failureicon[serial].style.opacity="1"; + successicon[serial].style.opacity="0"; + + } + else{ + erromessage[serial].innerHTML=""; + failureicon[serial].style.opacity="0"; + successicon[serial].style.opacity="1"; + } +}; +function Toggle() { + var temp = document.getElementById("Password"), + eyeicon=classes("eye"); + + if (temp.type === "password") { + temp.type = "text"; + eyeicon.style.color="blue"; + + } + else { + temp.type = "password"; + eyeicon.style.color="black"; + } +} + + + diff --git a/A login page/A login Page/roject (1).jpg b/A login page/A login Page/roject (1).jpg new file mode 100644 index 0000000..c56256c Binary files /dev/null and b/A login page/A login Page/roject (1).jpg differ diff --git a/A login page/A login Page/roject.jpg b/A login page/A login Page/roject.jpg new file mode 100644 index 0000000..2b7ae8c Binary files /dev/null and b/A login page/A login Page/roject.jpg differ diff --git a/A login page/A login Page/style.css b/A login page/A login Page/style.css new file mode 100644 index 0000000..644ae32 --- /dev/null +++ b/A login page/A login Page/style.css @@ -0,0 +1,179 @@ +*{ + margin: 5px; + padding: 0; + box-sizing: border-box; +} +body { + font-family:sans-serif +} +form { + width: 45%; + max-width: none; + display: flex; + flex-direction: column; + justify-content: center; + box-shadow: 2px 2px 4px rgba(0,0,0,0.1); +} +label{ + font-weight: bolder; + display: block; + margin-bottom:10px;; +} +.title { + font-size: 25px; + font-weight: bold; + margin-bottom: 20px; + +} +form div input { + width:80%; + height:30px; + padding-right: 10px; + padding-left: 30px; + padding-top:2px; + margin: 5px; + border: 2px solid black; + border-radius: 8px; + box-shadow: 1px;; +} +form div{ + position: relative; + margin-bottom: 15px; + +} +input:focus{ + border: 2px solid grey; +} +form div i{ + position: absolute; + padding: 10px; +} +.failure-icon,.error { + color: red; +} + +.success-icon { + color: green; +} + +.error { + font-size: 14.5px; + margin-top: 5px; +} +.success-icon, +.failure-icon { + right: 0; + opacity: 0; +} +button{ + margin-top:10px; + width: 80%; + height: 45px; + border:3px; + border-radius: 10px; + background-color: aliceblue; + color: black; + font-weight: bold; + font-size: medium; + cursor: pointer; + transition: all 0.1s ease; +} +button:hover{ + background-color: rgb(94, 159, 245); +} +.eye{ + cursor: pointer; +} +.eye:hover{ + color:rgb(0, 132, 255) + +} +.btn{ + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 10px; +} +.btn1,.btn2{ + padding: 10px,5px; + width:100%; + display: flex; + gap:15px; + justify-content: center; + align-items: center; + border: 2px solid #c4c4c4; + border-radius: 8px; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); + cursor: pointer; +} +.btn2{ + background-color: blue; +} +.or{ + text-align: center; +} +span{ + cursor: pointer; + font-size: larger; + color: rgb(177, 41, 0); +} +.container +{ + display: flex; + flex-direction: row; +} +.content{ + display: flex; + flex-direction:column; + justify-content: space-between; + background-color: rgb(94, 159, 245); + width: 55%; + min-height: 100vh; + padding: 10px,20px; +} +.text{ + padding: 15px; + font-size: larger; + font-weight: bolder; +} +.image img { + height: 800px; + width: 1200px; + object-fit: contain; +} +@media(max-width:900px) { + .container{ + flex-direction: column; + } + form, + .content { + width: 100%; + } + + .btn { + flex-direction: column; + } + .image { + height: 70vh; + } +} +html,body{ + width:100%; + height:100% +} +body{ + background: linear-gradient(45deg, #ee7752, #e73c7e, #bd970d, #c50623); + background-size: 400% 400%; + animation: gradient 15s ease infinite; +} +@keyframes gradient{ + 0%{ + background-position: 0%,5%; + } + 50%{ + background-position: 100%,50%; + } + 100%{ + background-position: 0% 50%; + } +} \ No newline at end of file diff --git a/A login page/A login Page/woman.png b/A login page/A login Page/woman.png new file mode 100644 index 0000000..54bc6f9 Binary files /dev/null and b/A login page/A login Page/woman.png differ